/* ============================================================
   EIGEN · effects.css
   The motion + 3D layer. Loaded last so it can compose on top.

   Transform contract: every animated element builds ONE transform
   from custom properties, so reveal / hover / pointer-tilt can each
   own a different property without fighting over `transform`.
     --ty  translateY   (reveal offset + hover lift)
     --tz  translateZ   (depth pop)
     --rx  rotateX      (reveal tilt + pointer tilt)
     --ry  rotateY      (pointer tilt)
     --sc  scale
   ============================================================ */

/* ---------- scroll reveal ---------- */
.reveal{
  transform:
    perspective(var(--persp,1000px))
    translate3d(0,var(--ty,0px),var(--tz,0px))
    rotateX(var(--rx,0deg))
    rotateY(var(--ry,0deg))
    scale(var(--sc,1));
  transition:opacity .75s ease,transform .75s var(--ease-out);
}
/* only hide when JS is present to un-hide it — no JS, no blank page */
html.js .reveal{opacity:0;--ty:34px;--rx:-8deg}
html.js .reveal.on{opacity:1;--ty:0px;--rx:0deg}

/* ---------- pointer tilt targets ---------- */
[data-tilt]{
  transform:
    perspective(var(--persp,900px))
    translate3d(0,var(--ty,0px),var(--tz,0px))
    rotateX(var(--rx,0deg))
    rotateY(var(--ry,0deg))
    scale(var(--sc,1));
  transition:transform .55s var(--ease-out),opacity .75s ease,box-shadow .35s ease,border-color .3s ease;
  transform-style:preserve-3d;
}
/* while the pointer drives it, drop the transform transition so it tracks 1:1 */
[data-tilt].tilting{transition:box-shadow .35s ease,border-color .3s ease}

/* ---------- hero showpiece ---------- */
.hero-3d{
  transform:
    rotateX(var(--rx,0deg))
    rotateY(var(--ry,0deg));
  transition:transform .6s var(--ease-out);
}
.hero-3d.tilting{transition:none}
.lambda-card{animation:cardFloat 6s ease-in-out infinite}
@keyframes cardFloat{
  0%,100%{transform:translateY(0) rotate(-1.5deg)}
  50%{transform:translateY(-16px) rotate(1.5deg)}
}
/* orbit chips ride at different depths so the tilt parallaxes them */
.orbit{animation:orbitFloat var(--dur,6s) ease-in-out infinite}
.o2{--dur:7s}
.o3{--dur:6.4s;animation-direction:reverse}
.o1{--dur:5s;animation-direction:reverse}
@keyframes orbitFloat{
  0%,100%{transform:translateZ(var(--z,60px)) translateY(0) rotate(-1deg)}
  50%{transform:translateZ(var(--z,60px)) translateY(-14px) rotate(1deg)}
}
/* light sweep across the logo card */
.lambda-card::after{
  content:'';position:absolute;inset:0;border-radius:28px;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.16) 48%,transparent 62%);
  background-size:250% 250%;
  animation:sweep 7s ease-in-out infinite;
}
@keyframes sweep{
  0%,65%{background-position:120% 0}
  100%{background-position:-40% 0}
}

/* ---------- magnetic buttons ---------- */
.store-btn,.nav-cta{
  transform:translate3d(var(--mx,0px),var(--my,0px),0) scale(var(--sc,1));
  transition:transform .45s var(--ease-out),box-shadow .3s ease,background .2s ease,border-color .2s ease;
}
.store-btn.magnetic{transition:box-shadow .3s ease}
.store-play:hover,.store-ios:hover{--sc:1.04}

/* ---------- staggered children ---------- */
.ccard:nth-child(2){transition-delay:.09s}
.ccard:nth-child(3){transition-delay:.18s}
.ccard:hover{--ty:-8px;--tz:26px}

.tier:nth-child(1){transition-delay:0s}
.tier:nth-child(2){transition-delay:.07s}
.tier:nth-child(3){transition-delay:.14s}
.tier:nth-child(4){transition-delay:.21s}
.tier:nth-child(5){transition-delay:.28s}
.tier:nth-child(6){transition-delay:.35s}
.tier:nth-child(7){transition-delay:.42s}
.tier:hover{--ty:-12px;--tz:40px;--rx:8deg;box-shadow:0 26px 50px rgba(54,9,61,.28)}
/* tiers build in from a steeper angle than the default reveal.
   :not(.on) keeps this from out-specifying the settled `.reveal.on` state. */
html.js .tier.reveal:not(.on){--ty:26px;--rx:-18deg}

/* GOATED tier: gold shine sweep */
.tier.goated::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,201,62,.45) 50%,transparent 65%);
  background-size:250% 250%;
  animation:sweep 4.5s ease-in-out infinite;
}

/* raid walls: bricks build in */
html.js .wall .brick{opacity:0;transform:translateZ(-40px) rotateX(-45deg);transition:opacity .5s ease,transform .5s var(--ease-out)}
html.js .reveal.on .wall .brick{opacity:1;transform:none}
.wall .brick:nth-child(1){transition-delay:.02s}
.wall .brick:nth-child(2){transition-delay:.06s}
.wall .brick:nth-child(3){transition-delay:.10s}
.wall .brick:nth-child(4){transition-delay:.14s}
.wall .brick:nth-child(5){transition-delay:.18s}
.wall .brick:nth-child(6){transition-delay:.22s}
.wall .brick:nth-child(7){transition-delay:.26s}
.wall .brick:nth-child(8){transition-delay:.30s}
.wall .brick:nth-child(9){transition-delay:.34s}
.wall .brick:nth-child(10){transition-delay:.38s}
.wall .brick:nth-child(11){transition-delay:.42s}
.wall .brick:nth-child(12){transition-delay:.46s}
.raid-attack .brick:hover{--sc:1.08;transform:translateZ(20px) rotateX(10deg)}

/* streak calendar: days flip in */
html.js .reveal .sday{opacity:0;transform:rotateX(-70deg);transition:opacity .4s ease,transform .5s var(--ease-out)}
html.js .reveal.on .sday{opacity:1;transform:none}
.streak-days{perspective:500px}
.sday:nth-child(2){transition-delay:.05s}
.sday:nth-child(3){transition-delay:.10s}
.sday:nth-child(4){transition-delay:.15s}
.sday:nth-child(5){transition-delay:.20s}
.sday:nth-child(6){transition-delay:.25s}
.sday:nth-child(7){transition-delay:.30s}

/* ---------- respect reduced motion: kill every bit of it ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html.js .reveal,
  html.js .reveal.on,
  html.js .wall .brick,
  html.js .reveal .sday{opacity:1;transform:none}
  .hero-3d,[data-tilt]{transform:none}
}