/* 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  idle loop: steady glow with a brief flicker burst every 15s
*/

.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 */

  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-idle      15s linear                  3500ms infinite;
}

/* Wordmark gets the same flicker + idle loop, 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-idle      15s linear   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 (0–22%), die out to a
   barely-there ember, then slowly fade up to the full steady glow (22→100%).
   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)); }
}

/* Idle loop — steady glow with a brief flicker burst once per cycle.
   The burst (89.5%–91.9% of a 15s cycle = ~360ms of action) uses the same
   30/60ms off/flash cadence as the initial cold-strike, so a quick glance
   at the sign feels like it briefly glitched. 0%/100% match the steady-glow
   end of `apx-neon-flicker` so the handoff is seamless. */
@keyframes apx-neon-idle {
  /* Steady glow before the burst and after the snap-back recovery */
  0%, 89%, 92.5%, 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));
  }
  /* Off states during the burst (5×) */
  89.5%, 90.1%, 90.7%, 91.3%, 91.9% {
    filter: drop-shadow(0 0 0 transparent)
            drop-shadow(0 0 0 transparent)
            drop-shadow(0 0 0 transparent);
  }
  /* Flash states during the burst (4×) */
  89.9%, 90.5%, 91.1%, 91.7% {
    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);
  }
}

/* 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;
  }
}

@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/idle loop 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));
  }
}