/* alive.css - pointer/press layer + helpers for alive.js.
   The token values and the .tactile/.btn styles below are for the tactile looks only.
   For any other look (references/looks.md), set your own tokens and restyle .btn, but keep a press response. */
:root {
  --ink: #26201a;            /* outlines, text, hard shadows */
  --paper: #fff4dd;
  --card: #fffdf7;
  --accent: #ff5c2b;
  --sun: #ffd84d; --rose: #ffb9cc; --sky: #a5dcff; --mint: #b9e6a6;
  --edge: 2.5px;             /* outline width */
  --lift: 5px;               /* hard shadow offset at rest */
  --radius: 16px;            /* 0 for tactile-sharp */
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis-smooth { scroll-behavior: auto !important; }
.lenis-stopped { overflow: hidden; }

/* Tactile surfaces: outline + hard shadow that grows on hover, slams flat on press */
.tactile {
  border: var(--edge) solid var(--ink); border-radius: var(--radius); background: var(--card);
  box-shadow: var(--lift) var(--lift) 0 var(--ink);
  transition: transform .18s var(--spring), box-shadow .18s var(--spring), background-color .2s;
}
a.tactile:hover, button.tactile:hover, .tactile.is-hoverable:hover {
  transform: translate(-2px, -2px); box-shadow: calc(var(--lift) + 3px) calc(var(--lift) + 3px) 0 var(--ink);
}
a.tactile:active, button.tactile:active, .tactile.is-hoverable:active {
  transform: translate(var(--lift), var(--lift)); box-shadow: 0 0 0 var(--ink); transition-duration: .06s;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .55em; white-space: nowrap; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 1rem; line-height: 1; padding: .95em 1.4em; color: var(--ink); text-decoration: none;
  border: var(--edge) solid var(--ink); border-radius: 999px; background: var(--card);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .18s var(--spring), box-shadow .18s var(--spring), background-color .2s;
}
.btn:hover { transform: translate(-1px, -2px); box-shadow: 5px 6px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); transition-duration: .06s; }
.btn-primary { background: var(--accent); color: #fff; }
.btn .icon { transition: transform .3s var(--spring); }
.btn:hover .icon { transform: translateX(4px) rotate(-8deg); }

/* Spotlight glow that follows the cursor (pair with data-tilt, which sets --mx/--my) */
.spotlight { position: relative; overflow: hidden; isolation: isolate; }
.spotlight::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%);
}
.spotlight:hover::after { opacity: 1; }
[data-tilt] { transform-style: preserve-3d; will-change: transform; }
[data-tilt] .pop-out { transform: translateZ(40px); }

/* Hover wiggles for icons: add class to the icon, trigger from a parent hover */
@keyframes alive-wiggle { 0%,100% { transform: rotate(0) } 25% { transform: rotate(-14deg) } 55% { transform: rotate(11deg) } 80% { transform: rotate(-5deg) } }
@keyframes alive-bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
:is(a, button, .is-hoverable):hover .wiggle { animation: alive-wiggle .5s; }
:is(a, button, .is-hoverable):hover .spin { transition: transform .6s var(--spring); transform: rotate(180deg); }

/* Animated underline for text links */
.link { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .35s var(--ease-out); }
.link:hover, .link:focus-visible { background-size: 100% 2px; }

/* Highlighter swipe behind a word (codex-resets headline). Animate --hl from 0 to 1 */
.highlight { background: linear-gradient(var(--sun), var(--sun)) 0 60% / calc(var(--hl, 1) * 100%) 70% no-repeat; padding: 0 .12em; border-radius: .12em; }

/* Marquee */
[data-marquee] { overflow: hidden; }
.marquee-track { display: flex; width: max-content; gap: 2.5rem; }

/* Progress bar */
[data-progress] { position: fixed; top: 0; left: 0; right: 0; height: 4px; background: var(--accent); z-index: 100; }

/* Burst sparks */
.alive-spark { position: fixed; width: 9px; height: 9px; margin: -4px 0 0 -4px; border-radius: 2px; pointer-events: none; z-index: 9999; border: 1.5px solid var(--ink); }

/* Paper dot-grid texture (codex-resets) */
.dots { background-image: radial-gradient(color-mix(in srgb, var(--ink) 10%, transparent) 1px, transparent 1.2px); background-size: 18px 18px; }

/* Horizontal pan falls back to native swipe on small screens */
[data-pan] { overflow: hidden; }
@media (max-width: 899px) { [data-pan] .pan-track { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } [data-pan] .pan-track > * { scroll-snap-align: start; } }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}