/*
 * Motion: "electrifying" (owner, 2026-10-07: "the landing page should feel
 * like a sport game"). A few signature moves, all transform/opacity/clip so a
 * phone keeps 60fps, and all of it off under prefers-reduced-motion:
 *
 *   slam    the hero headline's words land like a broadcast title card
 *   charge  a current runs through the headline and across the buttons
 *   wipe    sections snap in with a sports-TV wipe, not a soft fade
 *   burst   picking a badge or a step throws a spark
 *   flicker the bolts in the background flicker like live current
 *   tilt    hero phones lean toward the pointer, like a player card (desktop)
 *
 * `html.motion` is set by the head script before first paint, only when motion
 * is allowed; everything hidden here is hidden only under that class, and the
 * head script takes the class off again if main.js never arrives.
 */
:root{--accent:#1A84DA;--accent-hi:#9fd3ff;--ease-expo:cubic-bezier(.16,1,.3,1);--ease-spring:cubic-bezier(.34,1.56,.64,1)}

/* ---- wipe: sections snap in -------------------------------------------- */
.motion [data-reveal]:not(h1):not(.in){opacity:0;transform:translate3d(0,26px,0) skewY(2deg);clip-path:inset(-80px -80px 100% -80px)}
.motion [data-reveal]:not(h1).in:not(.done){transition:opacity .35s ease-out var(--d,0ms),transform .75s var(--ease-expo) var(--d,0ms),clip-path .65s var(--ease-expo) var(--d,0ms);clip-path:inset(-80px)}

/* ---- slam: the headline lands word by word ------------------------------ */
h1 .w{display:inline-block}
.motion h1:not(.in) .w{opacity:0}
.motion h1.in .w{animation:slam .62s var(--ease-spring) both;animation-delay:calc(var(--i) * 75ms + 120ms)}
@keyframes slam{0%{opacity:0;transform:scale(1.9) translateY(-14px);filter:blur(10px)}55%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
/* charge: a current runs through each word in turn, once on landing and then
   every few seconds while the hero is on screen */
h1 .w{background:linear-gradient(100deg,#f4f4f0 0 40%,var(--accent-hi) 46%,#fff 50%,var(--accent-hi) 54%,#f4f4f0 60% 100%) 100% 0/300% 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.motion h1.charge .w{animation:slam .62s var(--ease-spring) both,current .9s var(--ease-expo) both;animation-delay:calc(var(--i) * 75ms + 120ms),calc(var(--i) * 70ms + var(--charge-at,900ms))}
@keyframes current{from{background-position:100% 0}to{background-position:0% 0}}

/* ---- charge: a light streak across the buttons ---------------------------- */
.zap{position:relative;overflow:hidden;isolation:isolate}
.zap::after{content:"";position:absolute;inset:-2px;z-index:1;pointer-events:none;transform:translateX(-130%) skewX(-18deg);
  background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,.35) 46%,rgba(200,232,255,.85) 50%,rgba(255,255,255,.35) 54%,transparent 70%)}
.motion .zap:hover::after,.motion .zap.charging::after{animation:streak .65s var(--ease-expo)}
@keyframes streak{from{transform:translateX(-130%) skewX(-18deg)}to{transform:translateX(130%) skewX(-18deg)}}
/* press: a little squash, the hard shadow already collapses in the design */
.motion .zap:active{scale:.965;transition:scale .08s ease-out}
.motion .zap{transition-property:transform,box-shadow,background,scale}

/* ---- burst: picking a badge or a step -------------------------------------------- */
.burst img{animation:pop .6s var(--ease-spring)}
@keyframes pop{0%{transform:scale(.82)}60%{transform:scale(1.1)}100%{transform:scale(1)}}
.burst::before{content:"";position:absolute;left:50%;top:38%;width:58%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  border:2px solid var(--accent-hi);box-shadow:0 0 24px var(--accent),inset 0 0 18px rgba(26,132,218,.6);
  transform:translate(-50%,-50%) scale(.35);opacity:0;animation:ring .75s var(--ease-expo)}
@keyframes ring{0%{opacity:.95;transform:translate(-50%,-50%) scale(.35)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}}
.flash{animation:flash .55s ease-out}
@keyframes flash{0%{box-shadow:inset 0 0 0 1px var(--accent),0 0 0 0 rgba(26,132,218,.75)}100%{box-shadow:inset 0 0 0 1px var(--accent),0 0 0 14px rgba(26,132,218,0)}}

/* ---- flicker: the bolts carry current ------------------------------------------------ */
.motion .bolt-gw img,.motion .bolt-cta img{animation:flicker 7s steps(1,end) infinite}
.motion .bolt-cta img{animation-delay:2.4s}
@keyframes flicker{0%,62%,100%{opacity:1}63%{opacity:.45}64%{opacity:1}66%{opacity:.6}67%{opacity:1}}

/* ---- tilt: hero phones lean toward the pointer (set by main.js) ---------------------- */
.tilt{transition:transform .35s var(--ease-expo);transform-style:preserve-3d}

/* Keyboard users see where they are, in the accent. */
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}

@media (prefers-reduced-motion:reduce){
  .zap::after,.burst::before{display:none}
  h1 .w,.burst img,.flash,.bolt-gw img,.bolt-cta img{animation:none!important}
}