/* APX logo entrance animation
   Choreography (left-to-right reveal):
     0ms     A rises
     80ms    P rises
     160ms   X-back rises
     240ms   red chevron strikes in from the left
     880ms   "ATHLETE LAB" types in, 50ms stagger
     1830ms  wordmark fully revealed
     1900ms  neon flicker ignites — rapid on/off bursts that fail to hold
     2230ms  flicker dies out; glow begins fading up
     3400ms  glow reaches full steady state
     3500ms  subtle pulse begins (3s breath)
*/

.apx-logo {
  --apx-red: #ff1c00;
  --apx-dark: currentColor;
  --apx-ease: cubic-bezier(.2, .8, .2, 1);
  --apx-ease-strike: cubic-bezier(.16, .88, .25, 1);
  --apx-stagger: 50ms;
  --apx-word-start: 880ms;

  /* Glow blur radii — static lengths (NOT clamp/vw, since iOS WebKit silently
     fails to render filters when clamp()/vw is plumbed through var() into
     drop-shadow). Mobile values overridden via media query below. */
  --apx-glow-1:        2px;    /* steady tight inner */
  --apx-glow-2:        5px;    /* steady mid */
  --apx-glow-3:       11px;    /* steady outer bloom */
  --apx-glow-flash-1:  3px;    /* flicker flash inner (1.5× steady) */
  --apx-glow-flash-2:  7.5px;  /* flicker flash mid */
  --apx-glow-ember:    1px;    /* flicker dies-out ember */
  --apx-glow-pulse-2:  6px;    /* pulse-up mid */
  --apx-glow-pulse-3: 14px;    /* pulse-up outer */

  display: block;
  inline-size: min(100%, 624px);
  block-size: auto;
  overflow: visible;
  color: #141414;
}

.apx-logo__art {
  transform-box: fill-box;
  transform-origin: center;
  animation: apx-logo-settle 1100ms var(--apx-ease) both;
}

.apx-logo__mark,
.apx-logo__accent,
.apx-logo__word {
  transform-box: fill-box;
  transform-origin: center;
  animation-fill-mode: both;
  animation-timing-function: var(--apx-ease);
}

/* APX letterforms — rise in left-to-right (no glow; structural sign body) */
.apx-logo__mark {
  fill: var(--apx-dark);
  animation-name: apx-mark-rise;
  animation-duration: 700ms;
  animation-delay: calc(var(--i, 0) * 80ms);
}

.apx-logo__mark--a      { --i: 0; }
.apx-logo__mark--p      { --i: 1; }
.apx-logo__mark--x-back { --i: 2; }

/* Red chevron — slides in from the left, stretched horizontally for motion
   blur, decelerating sharply to its exact resting position. Neon glow ignites
   after it lands (filter is animated separately, so it doesn't conflict with
   the strike's transform). */
.apx-logo__accent {
  fill: var(--apx-red);
  animation:
    apx-arrow-strike  680ms var(--apx-ease-strike) 240ms  both,
    apx-neon-flicker 1500ms linear                 1900ms both,
    apx-neon-pulse      3s ease-in-out             3500ms infinite;
}

/* Wordmark gets the same flicker + pulse, applied at the group level so the
   glow ignites once for "ATHLETE LAB" rather than per-letter. Flicker is
   delayed until the wordmark has fully typed in (last letter ends ~1830ms). */
.apx-logo__wordmark {
  animation:
    apx-neon-flicker 1500ms linear      1900ms both,
    apx-neon-pulse      3s ease-in-out  3500ms infinite;
}

/* Wordmark: "ATHLETE LAB", revealed left-to-right.
   DOM order is scrambled, so each path is mapped to its visual index. */
.apx-logo__word {
  fill: var(--apx-red);
  animation-name: apx-word-slide;
  animation-duration: 500ms;
  animation-delay: calc(var(--apx-word-start) + var(--i, 0) * var(--apx-stagger));
}

.apx-logo__word--9  { --i: 0; } /* A */
.apx-logo__word--1  { --i: 1; } /* T */
.apx-logo__word--2  { --i: 2; } /* H */
.apx-logo__word--3  { --i: 3; } /* L */
.apx-logo__word--4  { --i: 4; } /* E */
.apx-logo__word--5  { --i: 5; } /* T */
.apx-logo__word--6  { --i: 6; } /* E */
.apx-logo__word--7  { --i: 7; } /* L */
.apx-logo__word--10 { --i: 8; } /* A */
.apx-logo__word--8  { --i: 9; } /* B */

@keyframes apx-logo-settle {
  from { transform: scale(.99); }
  to   { transform: scale(1); }
}

@keyframes apx-mark-rise {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes apx-arrow-strike {
  0%   { opacity: 0; transform: translateX(-92px) scaleX(1.15); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0)    scaleX(1); }
}

@keyframes apx-word-slide {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Neon ignition: stacked drop-shadows simulate a soft glow halo.
   Cold strikes flash on/off as the "tube" warms up, then settle into a
   persistent subtle glow at 26%+. Pure filter animation — composites on the
   GPU and won't interfere with transform/opacity on the same element. */
@keyframes apx-neon-flicker {
  /* Every keyframe MUST keep the same 3-layer drop-shadow structure or iOS
     WebKit will fail to interpolate (renders no filter at all). "Off" states
     use transparent zero-blur drops as placeholders. */
  /* Cold strike — rapid on/off bursts that fail to hold */
  0%   { filter: drop-shadow(0 0 0 transparent)
                 drop-shadow(0 0 0 transparent)
                 drop-shadow(0 0 0 transparent); }
  4%   { filter: drop-shadow(0 0 var(--apx-glow-flash-1) rgba(255, 28, 0, .9))
                 drop-shadow(0 0 var(--apx-glow-flash-2) rgba(255, 28, 0, .55))
                 drop-shadow(0 0 0 transparent); }
  6%   { filter: drop-shadow(0 0 0 transparent)
                 drop-shadow(0 0 0 transparent)
                 drop-shadow(0 0 0 transparent); }
  10%  { filter: drop-shadow(0 0 var(--apx-glow-flash-1) rgba(255, 28, 0, .85))
                 drop-shadow(0 0 var(--apx-glow-flash-2) rgba(255, 28, 0, .5))
                 drop-shadow(0 0 0 transparent); }
  12%  { filter: drop-shadow(0 0 0 transparent)
                 drop-shadow(0 0 0 transparent)
                 drop-shadow(0 0 0 transparent); }
  16%  { filter: drop-shadow(0 0 var(--apx-glow-flash-1) rgba(255, 28, 0, .9))
                 drop-shadow(0 0 var(--apx-glow-flash-2) rgba(255, 28, 0, .5))
                 drop-shadow(0 0 0 transparent); }
  18%  { filter: drop-shadow(0 0 0 transparent)
                 drop-shadow(0 0 0 transparent)
                 drop-shadow(0 0 0 transparent); }
  /* Flicker dies out at a barely-there ember */
  22%  { filter: drop-shadow(0 0 var(--apx-glow-ember) rgba(255, 28, 0, .15))
                 drop-shadow(0 0 0 transparent)
                 drop-shadow(0 0 0 transparent); }
  /* Long, slow fade up to the full steady glow */
  100% { filter: drop-shadow(0 0 var(--apx-glow-1) rgba(255, 28, 0, .9))
                 drop-shadow(0 0 var(--apx-glow-2) rgba(255, 28, 0, .55))
                 drop-shadow(0 0 var(--apx-glow-3) rgba(255, 28, 0, .32)); }
}

/* Steady-state breathing — subtle in/out pulse so the glow feels alive.
   0%/100% match the flicker's 100% so the handoff is seamless. */
@keyframes apx-neon-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 var(--apx-glow-1) rgba(255, 28, 0, .9))
            drop-shadow(0 0 var(--apx-glow-2) rgba(255, 28, 0, .55))
            drop-shadow(0 0 var(--apx-glow-3) rgba(255, 28, 0, .32));
  }
  50% {
    filter: drop-shadow(0 0 var(--apx-glow-1)       rgba(255, 28, 0, .95))
            drop-shadow(0 0 var(--apx-glow-pulse-2) rgba(255, 28, 0, .65))
            drop-shadow(0 0 var(--apx-glow-pulse-3) rgba(255, 28, 0, .4));
  }
}

/* On small screens scale the glow down so it stays proportional to the
   smaller logo. Static lengths (not vw) for iOS WebKit reliability. */
@media (max-width: 480px) {
  .apx-logo {
    --apx-glow-1:        1px;
    --apx-glow-2:        3px;
    --apx-glow-3:      6.5px;
    --apx-glow-flash-1:  1.5px;
    --apx-glow-flash-2:  4.5px;
    --apx-glow-ember:    0.5px;
    --apx-glow-pulse-2:  3.5px;
    --apx-glow-pulse-3:  8.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .apx-logo__art,
  .apx-logo__mark,
  .apx-logo__accent,
  .apx-logo__wordmark,
  .apx-logo__word {
    animation: none !important;
  }
  /* Skip the flicker/pulse but keep the neon halo as a static brand element. */
  .apx-logo__accent,
  .apx-logo__wordmark {
    filter:
      drop-shadow(0 0 var(--apx-glow-1) rgba(255, 28, 0, .9))
      drop-shadow(0 0 var(--apx-glow-2) rgba(255, 28, 0, .55))
      drop-shadow(0 0 var(--apx-glow-3) rgba(255, 28, 0, .32));
  }
}