/* ============================================================================
   STONKITTY — the physical layer's styles (sol167). Paired with js/motion.js.

   Every rule that MOVES sits behind html:not(.rm). Rules that only improve a
   still frame — the sun-driven shadows, the glare container — stand on their own.

   Traps avoided on purpose:
   - no clip-path anywhere (a clipped ancestor stops Chrome lazy-loading images)
   - the reveal layer owns `transform` on .tick elements, so every motion here
     uses the INDIVIDUAL properties (translate / rotate / scale), which compose
     with transform instead of overwriting it and killing the reveal
   ========================================================================= */

@property --solve { syntax:'<number>'; initial-value:1; inherits:true }
@property --skew  { syntax:'<number>'; initial-value:0; inherits:true }
@property --glare { syntax:'<number>'; initial-value:0; inherits:true }

/* ---------------------------------------------------- selection solve */
/* --solve is 1 unless motion.js has parked an object below the fold at 0, so a
   page without this script still shows every handle fully formed. */
.obj::after{
  background-size:calc(6px * var(--solve)) calc(6px * var(--solve));
  border-color:color-mix(in srgb, var(--suit-fill) calc(55% * min(var(--solve), 1.5)), transparent);
}
.obj::before{opacity:clamp(0, var(--solve), 1)}

/* ---------------------------------------------------- the wordmark */
.lockup .gl{display:inline-block;transform-origin:50% 92%}
html:not(.rm) .lockup.pop .gl{
  animation:glpop .8s var(--spring) both;
  animation-delay:calc(var(--gi) * 48ms);
}
@keyframes glpop{
  0%  {opacity:0;transform:translateY(.48em) scaleY(.2) rotateX(78deg)}
  55% {opacity:1}
  100%{opacity:1;transform:none}
}

/* ---------------------------------------------------- the hero plate */
html:not(.rm) #heroimg{transform:translate3d(var(--tx,0px),var(--ty,0px),0) scale(1.03)}

/* ---------------------------------------------------- one sun, every shadow */
/* --sun-x is written by main.js's clock and swings as you scroll, so every plate
   on the page throws a shadow from the same moving key light. */
.card,.rig,.band,.view__frame{
  box-shadow:
    calc((var(--sun-x) - .5) * -52px) 28px 56px -20px rgba(9,6,32,.66),
    calc((var(--sun-x) - .5) * -14px) 7px 16px -8px rgba(9,6,32,.44);
}

/* ---------------------------------------------------- glare */
.card,.rig,.band{position:relative}
.glare{
  position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:radial-gradient(440px circle at var(--gx,50%) var(--gy,0%),
    rgba(255,244,226,.30), rgba(158,110,230,.10) 38%, transparent 62%);
  opacity:var(--glare);mix-blend-mode:screen;
}
html.rm .glare{display:none}

/* 3D tilt needs perspective on the DIRECT parent of each tilting element */
html:not(.rm) .grid3,
html:not(.rm) .steps,
html:not(.rm) .two,
html:not(.rm) #collection,
html:not(.rm) #log .two > div{perspective:1500px}

/* ---------------------------------------------------- scroll momentum */
html:not(.rm) .head h2{transform:skewY(calc(var(--skew) * -.6deg));transform-origin:0 50%}
html:not(.rm) #raili{stroke-width:calc(3px + var(--skew) * var(--skew) * .9px)}

/* ---------------------------------------------------- plates drift inside their frames */
html:not(.rm) .band img,
html:not(.rm) .card img{transform:translate3d(0, calc((.5 - var(--p)) * 30px), 0) scale(1.09)}

/* ---------------------------------------------------- bursts: they only go up */
.burst{
  position:fixed;left:0;top:0;z-index:95;pointer-events:none;white-space:nowrap;
  font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.02em;
  color:var(--tan);
  text-shadow:0 1px 0 var(--edge),0 0 12px rgba(16,22,74,.9);
  animation:burstup .95s var(--tick) both;animation-delay:var(--bd,0ms);
}
@keyframes burstup{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(.55)}
  18% {opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--bx)),calc(-50% + var(--by))) rotate(var(--br)) scale(1.06)}
}
html.rm .burst{display:none}

/* ---------------------------------------------------- idle breathing */
@keyframes breathe{0%,100%{scale:1}50%{scale:1.02}}
html:not(.rm) .breathe #heroimg,
html:not(.rm) .breathe .rig__img{animation:breathe 3.2s ease-in-out infinite}

/* ---------------------------------------------------- the pair arrow keeps climbing */
@keyframes climb{0%,62%,100%{translate:0 0}74%{translate:3px -4px}86%{translate:1px -1px}}
html:not(.rm) .pair svg{animation:climb 2.6s var(--spring) infinite}

/* ---------------------------------------------------- rows lean in on hover */
html:not(.rm) .props tbody tr,
html:not(.rm) .cmp tbody tr,
html:not(.rm) .files tbody tr{transition:translate .34s var(--spring),background-color .2s linear}
html:not(.rm) .props tbody tr:hover,
html:not(.rm) .cmp tbody tr:hover,
html:not(.rm) .files tbody tr:hover{translate:5px 0}
.cmp tbody tr:hover,.files tbody tr:hover{background:color-mix(in srgb, var(--atmos) 10%, transparent)}
.props tbody tr:hover{background:color-mix(in srgb, var(--atmos-ink-pale) 7%, transparent)}

/* ---------------------------------------------------- import step icons hop */
html:not(.rm) .steps li .ic{transition:translate .45s var(--spring)}
html:not(.rm) .steps li:hover .ic{translate:0 -6px}

/* ---------------------------------------------------- the render log is still running */
@keyframes caret{0%{opacity:1}100%{opacity:0}}
html:not(.rm) .log dd:last-of-type::after{
  content:"";display:inline-block;width:.55em;height:1.05em;margin-left:6px;vertical-align:-2px;
  background:var(--verm);animation:caret 1.05s steps(2,jump-none) infinite;
}

/* ---------------------------------------------------- the pale sections: a light you steer */
html:not(.rm) .sect--pale{
  background-image:radial-gradient(560px circle at var(--mx,70%) var(--my,-30%),
    rgba(255,255,255,.62), transparent 64%);
}