/* ============================================================================
 * Run 10F-R2 — approved brand artwork, real layer rig, new placement.
 *
 * Run 10F drew the logo and mascot as vector art and the owner rejected the
 * result on quality. This file keeps the same layout contract (brand upper-right,
 * mascot below it, hemisphere untouched) but the visuals are now the approved
 * transparent assets, and the animation is done WITH that artwork rather than by
 * redrawing it:
 *
 *   logo  — a CSS filter glow breathes on the image. The white lettering is never
 *           recoloured, so `КРЫМ` stays white graffiti; the light around it pulses.
 *   fox   — three layers cut from the same artwork (tail, body, finger cluster).
 *           The tail rotates about its socket, the fingers slide along the phone.
 *           The figure as a whole does NOT drift: Run 10F-R did that and it was
 *           rejected as a substitute for real motion.
 *
 * Placements follow the owner's markup AND the 10F-R2 correction: the logo is
 * larger and sits lower than in 10F-R, the fox is larger and much lower.
 * Targets from the brief: logo ~0.78 x / 0.14-0.17 y, fox ~0.79-0.82 x / 0.34-0.39 y.
 *
 * The equalizer rules further down are carried over unchanged from Run 10F — they
 * work, and the brief says to keep the living equalizer.
 * ========================================================================= */

/* ------------------------------------------------------------- brand block
 *
 * 10F-R2 correction, in the owner's words: bigger and lower.
 *
 * 10F-R pinned the logo to 10px from the top at 98px wide. The brief puts its
 * centre around 0.14-0.17 of the viewport height and asks for a clear increase
 * in size, so this is now anchored to the top of its marked zone rather than the
 * screen edge, and 30-40% wider.
 *
 * Both the offset and the size come from one custom property so the responsive
 * block below can tune them per width without repeating the rule.
 */
#screen-welcome .brand {
  position: absolute;
  /*
   * Anchored by the logo's CENTRE, not its top edge. The brief gives the target as
   * a normalized centre (X 0.78, Y ~0.155), so tying the box centre to that
   * fraction keeps the placement correct on short viewports too - a fixed pixel
   * top would ride too low on a 667 px screen and too high on a 932 px one.
   */
  left: var(--brand-cx, 78%);
  top: var(--brand-cy, 15.5%);
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
  display: block;
  /* The lockup already contains `КРЫМ` over `music`, so this box is just the art. */
  width: var(--brand-glyph-w, 158px);
}

#screen-welcome .brand-logo {
  display: block;
  width: 100%;
  height: auto;
  /*
   * The breathing glow.
   *
   * A white drop-shadow at low opacity reads as light, not as a dark outline, and a
   * warm coral shadow underneath gives the heated, neon edge the owner asked for.
   * Both are filters, so this runs on the compositor and never reflows.
   */
  filter:
    drop-shadow(0 0 6px rgba(255, 236, 226, 0.30))
    drop-shadow(0 0 14px rgba(240, 106, 85, 0.26))
    drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
  animation: brand-glow 5.6s ease-in-out infinite;
}

/*
 * The pulse: mostly the halo, barely the object. Opacity moves inside 0.97-1.0,
 * which is enough to feel alive and far too little to hurt readability or to read
 * as blinking.
 */
@keyframes brand-glow {
  0%, 100% {
    filter:
      drop-shadow(0 0 5px rgba(255, 236, 226, 0.24))
      drop-shadow(0 0 11px rgba(240, 106, 85, 0.20))
      drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
    opacity: 0.97;
  }
  38% {
    filter:
      drop-shadow(0 0 10px rgba(255, 242, 234, 0.46))
      drop-shadow(0 0 22px rgba(255, 138, 104, 0.40))
      drop-shadow(0 2px 11px rgba(0, 0, 0, 0.42));
    opacity: 1;
  }
  62% {
    filter:
      drop-shadow(0 0 7px rgba(255, 236, 226, 0.32))
      drop-shadow(0 0 16px rgba(240, 106, 85, 0.30))
      drop-shadow(0 2px 10px rgba(0, 0, 0, 0.44));
    opacity: 0.985;
  }
}

/* A slower warm haze behind the logo - the "heated" part of the glow. */
#screen-welcome .brand::before {
  content: '';
  position: absolute;
  inset: -18% -10% -26% -10%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(240, 106, 85, 0.20) 0%,
    rgba(240, 106, 85, 0.07) 52%,
    rgba(240, 106, 85, 0) 100%
  );
  filter: blur(6px);
  animation: brand-haze 7.4s ease-in-out infinite;
}

@keyframes brand-haze {
  0%, 100% { opacity: 0.55; transform: scale(0.97); }
  45%      { opacity: 1;    transform: scale(1.04); }
  70%      { opacity: 0.72; transform: scale(1.0); }
}

/* ---------------------------------------------------------------- mascot
 *
 * Run 10F-R5: a single STATIC image, bottom-right, just above the slider.
 *
 * Everything positional here is tied to real geometry rather than to the old
 * middle-right fractions:
 *   - horizontally the figure is pinned to the screen's inner padding edge, so its
 *     right side never clips at any width;
 *   - vertically the box bottom is placed `--mascot-gap` above the top edge of the
 *     actual Slide-to-Start hitbox, which is the `.slide` element inside `.welcome-cta`.
 *     That element's top edge is 18px (+ safe area) above the viewport bottom plus its
 *     own 62px height, so a box anchored 18px + 62px + gap is exactly `gap` above it.
 *     Deriving it this way keeps the gap correct when the safe-area inset changes - a
 *     hard-coded `bottom` would drift on a device with a home indicator.
 *
 * The image is decorative: aria-hidden and pointer-events: none in the markup and here,
 * so it cannot swallow the slider's drag, a tap, or keyboard focus. It carries no
 * animation of any kind - `animation: none` is asserted in QA, not just implied.
 */
#screen-welcome .mascot {
  position: absolute;
  right: var(--mascot-right, 18px);
  bottom: calc(18px + var(--safe-bottom) + 62px + var(--mascot-gap, 18px));
  z-index: 5;
  width: var(--mascot-w, 150px);
  pointer-events: none;
}

#screen-welcome .fox-static {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: transparent;
  animation: none;
  transform: none;
  /* One shadow under the assembled figure. The matte is exact, so this does not spread
     a box - it follows the alpha silhouette. */
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.42));
}


/* ------------------------------------------------------- motion (animation)
 *
 * The tail and the swipe are no longer CSS keyframes. They are a real rig baked into
 * media/brand/rig/fox_cycle.webp: an arm chain (shoulder -> elbow -> wrist) rotating
 * through contact/drag/release, and a four-bone deform travelling down the tail fur.
 * Tweening cut-outs was the Run 10F-R2 approach and the owner rejected it as a puppet.
 *
 * prefers-reduced-motion is handled by <picture> in index.html, which swaps in the
 * still fox_rest.webp - no frozen mid-gesture frame, and no wasted decode.
 */

/* --------------------------------------------------------- light theme
 *
 * `music` in the approved lockup is muted terracotta rather than white, so it
 * needs a little more local contrast behind the block on the lighter stage.
 */
/*
 * On the light stage a white halo is invisible - it disappears into the mid-tone
 * mauve - and the earlier override replaced the animated filter with a static one,
 * so the glow did not pulse at all. This keeps the animation and swaps in a warm
 * halo strong enough to read against the lighter background.
 */
[data-theme='light'] #screen-welcome .brand-logo {
  animation-name: brand-glow-light;
}

@keyframes brand-glow-light {
  0%, 100% {
    filter:
      drop-shadow(0 0 7px rgba(255, 226, 214, 0.55))
      drop-shadow(0 0 16px rgba(232, 84, 62, 0.50))
      drop-shadow(0 2px 10px rgba(20, 6, 10, 0.55));
    opacity: 0.97;
  }
  38% {
    filter:
      drop-shadow(0 0 12px rgba(255, 236, 226, 0.80))
      drop-shadow(0 0 28px rgba(255, 120, 92, 0.66))
      drop-shadow(0 2px 11px rgba(20, 6, 10, 0.50));
    opacity: 1;
  }
  62% {
    filter:
      drop-shadow(0 0 9px rgba(255, 230, 218, 0.64))
      drop-shadow(0 0 20px rgba(240, 106, 85, 0.56))
      drop-shadow(0 2px 10px rgba(20, 6, 10, 0.52));
    opacity: 0.985;
  }
}

[data-theme='light'] #screen-welcome .brand::before {
  background: radial-gradient(
    closest-side,
    rgba(232, 84, 62, 0.40) 0%,
    rgba(232, 84, 62, 0.14) 52%,
    rgba(232, 84, 62, 0) 100%
  );
}

/* -------------------------------------------------------------- equalizer
 *
 * Carried over from Run 10F unchanged. It works: seven bars, seven durations and
 * seven phases, animated purely on transform: scaleY so the surrounding copy never
 * moves. Decorative only — no audio is played or analysed.
 */
#screen-welcome .wave-mark--coral i {
  transform-origin: 50% 100%;
  will-change: transform;
  animation: wave-bar 1.9s ease-in-out infinite;
}

@keyframes wave-bar {
  0%, 100% { transform: scaleY(0.42); }
  28%      { transform: scaleY(1); }
  52%      { transform: scaleY(0.62); }
  76%      { transform: scaleY(0.88); }
}

#screen-welcome .wave-mark--coral i:nth-child(1) { animation-duration: 1.75s; animation-delay: -0.10s; }
#screen-welcome .wave-mark--coral i:nth-child(2) { animation-duration: 2.30s; animation-delay: -0.78s; }
#screen-welcome .wave-mark--coral i:nth-child(3) { animation-duration: 1.55s; animation-delay: -0.42s; }
#screen-welcome .wave-mark--coral i:nth-child(4) { animation-duration: 2.05s; animation-delay: -1.15s; }
#screen-welcome .wave-mark--coral i:nth-child(5) { animation-duration: 1.90s; animation-delay: -0.31s; }
#screen-welcome .wave-mark--coral i:nth-child(6) { animation-duration: 2.45s; animation-delay: -0.94s; }
#screen-welcome .wave-mark--coral i:nth-child(7) { animation-duration: 1.65s; animation-delay: -0.63s; }

/* -------------------------------------------------------------- responsive
 *
 * The logo and the fox scale with the screen; the hemisphere and the slider never move to
 * make room, which is an explicit constraint from the brief.
 *
 * The fox is sized by width only. Its vertical anchor is derived from the slider's real
 * height (see the mascot block), so it stays `--mascot-gap` above the bar at every width
 * and every safe-area inset without per-breakpoint bottom values.
 *
 * Brand sizes are the pre-R5 values +8%, inside the +6..12% the owner allowed. They are
 * declared once here and reused, so a later tweak cannot desynchronise the breakpoints.
 */
#screen-welcome {
  /* Base band (401-419 px). R15: mascot 150 -> 225 px (+50%) by owner decision; the logo keeps
     its approved R5 size (+7.6% over pre-R5) and is not touched. */
  --brand-glyph-w: 170px;
  --mascot-w: 225px;
  --mascot-gap: 18px;
}

@media (max-width: 400px) {
  #screen-welcome {
    /* Logo 150 -> 162 px, +8%. R15: mascot 142 -> 213 px (+50%). */
    --brand-glyph-w: 162px;
    --mascot-w: 213px;
  }
}

@media (max-width: 360px) {
  /*
   * 320: the tight one. R15 raises the fox 118 -> 171 px, which is +45% rather than +50%: the
   * owner's own browser test measured 171 px here as the largest size that still clears the
   * hemisphere and keeps a real gap above the slider. The brand is unchanged.
   */
  #screen-welcome {
    /* 128 -> 138 px, +7.8%. */
    --brand-glyph-w: 138px;
    --mascot-w: 171px;
    --mascot-right: 14px;
    --mascot-gap: 14px;
  }
}

@media (min-width: 420px) {
  #screen-welcome {
    /* 172 px pre-R5, +8.1%. R15: mascot 162 -> 243 px (+50%). */
    --brand-glyph-w: 186px;
    --mascot-w: 243px;
  }
}

/* Short viewports: the fox is smaller so the composition keeps breathing room, but the slider,
 * the disc and the type never shrink or move. R15 raised these too (126 -> 176, 108 -> 146),
 * which is what keeps the owner's six-size table monotonic. */
@media (max-height: 720px) {
  #screen-welcome { --mascot-w: 176px; --mascot-gap: 14px; }
}

@media (max-height: 640px) {
  #screen-welcome { --mascot-w: 146px; --mascot-gap: 12px; }
}

/* ------------------------------------------------------- reduced motion
 *
 * Everything decorative stops, and the still frame still looks intentional: the
 * logo keeps a fixed warm halo, and the fox holds a natural pose (no frozen
 * half-finished finger).
 */
@media (prefers-reduced-motion: reduce) {
  #screen-welcome .brand-logo,
  #screen-welcome .brand::before,
  #screen-welcome .wave-mark--coral i {
    animation: none !important;
  }

  #screen-welcome .brand-logo {
    filter:
      drop-shadow(0 0 8px rgba(255, 240, 232, 0.38))
      drop-shadow(0 0 18px rgba(240, 106, 85, 0.32))
      drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
  }

  #screen-welcome .brand::before { opacity: 0.85; }

  /* A still equalizer must still look intentional, not unscheduled. */
  #screen-welcome .wave-mark--coral i:nth-child(1) { transform: scaleY(0.55); }
  #screen-welcome .wave-mark--coral i:nth-child(2) { transform: scaleY(0.85); }
  #screen-welcome .wave-mark--coral i:nth-child(3) { transform: scaleY(0.42); }
  #screen-welcome .wave-mark--coral i:nth-child(4) { transform: scaleY(1); }
  #screen-welcome .wave-mark--coral i:nth-child(5) { transform: scaleY(0.66); }
  #screen-welcome .wave-mark--coral i:nth-child(6) { transform: scaleY(0.92); }
  #screen-welcome .wave-mark--coral i:nth-child(7) { transform: scaleY(0.48); }
}

/* A hidden tab must not burn compositor time on decoration. */
#screen-welcome.is-backgrounded .brand-logo,
#screen-welcome.is-backgrounded .brand::before,
#screen-welcome.is-backgrounded .wave-mark--coral i {
  animation-play-state: paused;
}