/* =====================================================================
   SEAT THEORY — motion layer
   ---------------------------------------------------------------------
   Experiential behavior that pages opt into with data attributes, so the
   markup stays readable and any page can use it:

     data-aura            ambient drifting light behind a section
     data-spotlight       a soft light that follows the pointer
     data-kinetic         headline reveals line by line on entry
     data-stagger         children fade up in sequence
     data-parallax="0.2"  element drifts against the scroll
     data-pin             a horizontal scroll journey (see st-motion.js)
     .magnetic            a button that leans toward the cursor

   SHAPE RULES (the whole site):
     pill (999px)   buttons and button-styled links, and nothing else
     14–22px        cards, panels and modules
     10–12px        inputs
     0–3px          labels, tags, marks and rules

   Everything here is transform/opacity only, and every effect is disabled
   under prefers-reduced-motion.
   ===================================================================== */

/* ── Ambient light ───────────────────────────────────────────────────── */
[data-aura]{position:relative;isolation:isolate}
[data-aura]>*{position:relative;z-index:1}
[data-aura]::before,[data-aura]::after{
  content:'';position:absolute;z-index:0;border-radius:50%;pointer-events:none;
  filter:blur(70px);opacity:.5;mix-blend-mode:screen}
[data-aura]::before{
  width:52vw;height:52vw;max-width:760px;max-height:760px;left:-14vw;top:-10vw;
  background:radial-gradient(circle at 50% 50%, rgba(91,60,240,.55), transparent 66%);
  animation:auraDriftA 34s ease-in-out infinite alternate}
[data-aura]::after{
  width:46vw;height:46vw;max-width:660px;max-height:660px;right:-12vw;bottom:-14vw;
  background:radial-gradient(circle at 50% 50%, rgba(56,191,248,.34), transparent 66%);
  animation:auraDriftB 42s ease-in-out infinite alternate}
@keyframes auraDriftA{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(7vw,5vh,0) scale(1.14)}}
@keyframes auraDriftB{from{transform:translate3d(0,0,0) scale(1.06)}to{transform:translate3d(-6vw,-6vh,0) scale(.92)}}

/* Pointer spotlight: depth that follows the reader, never obscures text */
[data-spotlight]{position:relative}
[data-spotlight]::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  transition:opacity .6s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,40%), rgba(131,102,247,.16), transparent 70%)}
[data-spotlight].is-live::after{opacity:1}

/* ── Kinetic type: lines rise out of a mask ──────────────────────────── */
.kin{display:block;overflow:hidden}
.kin > i{display:block;font-style:inherit;transform:translateY(108%);opacity:0;
  transition:transform 1.05s cubic-bezier(.16,1,.3,1),opacity .8s ease}
.scene.in .kin > i,.is-in .kin > i{transform:translateY(0);opacity:1}
.kin:nth-of-type(2) > i{transition-delay:.09s}
.kin:nth-of-type(3) > i{transition-delay:.18s}

/* A slow sweep of light across the gradient words */
.shine{position:relative;background-size:200% 100%;animation:shine 9s ease-in-out infinite}
@keyframes shine{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ── Stagger ─────────────────────────────────────────────────────────── */
[data-stagger] > *{opacity:0;transform:translateY(18px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.scene.in [data-stagger] > *,.is-in[data-stagger] > *{opacity:1;transform:none}
.scene.in [data-stagger] > *:nth-child(1){transition-delay:.05s}
.scene.in [data-stagger] > *:nth-child(2){transition-delay:.14s}
.scene.in [data-stagger] > *:nth-child(3){transition-delay:.23s}
.scene.in [data-stagger] > *:nth-child(4){transition-delay:.32s}
.scene.in [data-stagger] > *:nth-child(5){transition-delay:.41s}
.scene.in [data-stagger] > *:nth-child(6){transition-delay:.5s}
.scene.in [data-stagger] > *:nth-child(7){transition-delay:.59s}

/* ── Magnetic buttons ────────────────────────────────────────────────── */
.magnetic{will-change:transform;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .3s ease}
.magnetic:hover{box-shadow:0 18px 50px -22px rgba(91,60,240,.95)}

/* ── Horizontal scroll journey ───────────────────────────────────────── */
[data-pin]{position:relative}
.pin__stage{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.pin__track{display:flex;gap:clamp(18px,3vw,36px);will-change:transform}
.pin__panel{flex:0 0 clamp(280px,62vw,520px)}
.pin__rail{margin-top:38px;height:2px;background:rgba(255,255,255,.12);position:relative;max-width:420px}
.pin__rail i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--violet-lt,#8366F7),var(--cyan,#38BFF8))}
.pin__count{font-family:var(--mono,monospace);font-size:12px;letter-spacing:.18em;color:rgba(255,255,255,.4);margin-top:12px}
[data-pin].is-stacked{height:auto !important}
[data-pin].is-stacked .pin__stage{position:static;height:auto;overflow:visible}
[data-pin].is-stacked .pin__track{flex-direction:column;transform:none !important}
[data-pin].is-stacked .pin__panel{flex:none}
[data-pin].is-stacked .pin__rail,[data-pin].is-stacked .pin__count{display:none}
@media(max-width:820px){
  [data-pin]{height:auto !important}
  .pin__stage{position:static;height:auto;overflow:visible}
  .pin__track{flex-direction:column;transform:none !important;padding-right:0}
  .pin__panel{flex:none}
  .pin__rail,.pin__count{display:none}
}

/* ── Parallax ────────────────────────────────────────────────────────── */
[data-parallax]{will-change:transform}

@media (prefers-reduced-motion: reduce){
  [data-aura]::before,[data-aura]::after{animation:none}
  [data-spotlight]::after{display:none}
  .kin > i{transform:none;opacity:1;transition:none}
  [data-stagger] > *{opacity:1;transform:none;transition:none}
  .shine{animation:none}
  .magnetic{transition:none}
  .pin__stage{position:static;height:auto}
  .pin__track{flex-direction:column;transform:none !important}
}