/* KKB — motion pre-hide layer (front page only). Loads AFTER components.css.

   Reveal "from" states apply ONLY under html.kkb-anim, which the head guard adds
   solely when JS is on AND prefers-reduced-motion is OFF. So with no JS, or under
   reduced motion, or if this file fails to load, every element is fully visible and
   correctly laid out — the animation is pure enhancement, never a gate on content.
   A head watchdog also removes .kkb-anim if motion.js never marks itself ready.

   will-change is set/cleared per-tween in motion.js (never parked on many nodes here). */

.kkb-anim [data-reveal],
.kkb-anim [data-reveal-group] > * { opacity: 0; }

.kkb-anim [data-reveal]            { transform: translateY(24px); }
.kkb-anim [data-reveal="fade"]     { transform: none; }
.kkb-anim [data-reveal="scale"]    { transform: scale(0.96); }
.kkb-anim [data-reveal="left"]     { transform: translateX(-16px); }
.kkb-anim [data-reveal="right"]    { transform: translateX(16px); }
.kkb-anim [data-reveal-group] > *  { transform: translateY(20px); }

/* Hero entrance — pure CSS, so it starts with the first paint. It used to wait on GSAP +
   motion.js at the end of the body, which kept the hero (the page's LCP) invisible for
   seconds on a slow phone. The "from" states are the rules above; this only plays them out.
   The device art goes first (it is the LCP), the copy follows in a short cascade. */
.kkb-anim .section--hero [data-reveal] {
  animation: kkb-hero-in var(--ios-duration-slow) var(--ios-ease-out) both;
}
.kkb-anim .section--hero [data-reveal][data-pop] { animation-timing-function: var(--ios-ease-spring); }
.kkb-anim .section--hero .hero__title   { animation-delay: 60ms; }
.kkb-anim .section--hero .hero__lead    { animation-delay: 120ms; }
.kkb-anim .section--hero .hero__actions { animation-delay: 180ms; }
.kkb-anim .section--hero .hero__note    { animation-delay: 240ms; }
@keyframes kkb-hero-in { to { opacity: 1; transform: none; } }