/* ==========================================================================
   Draft Edge — animated arrow background (index.html ONLY)
   --------------------------------------------------------------------------
   Resting state: a flat PNG arrow field (assets/arrows.png, exported from the
   PSD — arrows only, no logos/text), drawn full-viewport with background:cover.

   On every page load a red "entrance" layer animates on top, then clears so
   only the grey resting field remains (red is purely transitional). The intro
   replays on every visit — there is no session gate.

   Variants (JS sets the container class):
     v1 "Sweep"       — Option A: a red-tinted copy of arrows.png revealed by a
                        30vw gradient band sweeping across (1.8s).
     v3 "Pulse-sweep" — Option A: narrower (15vw), brighter band, snappier (1.4s).
     v2 "Cascade"     — Option B: ~15 procedural red arrows (arrow-single.png
                        sprite) fly in from the left, staggered, then fade out.
                        Rotation is LOCKED (no rotate transform) — only position
                        and size vary.
   ========================================================================== */

#arrow-bg {
  position: fixed;
  inset: 0;
  z-index: -2;   /* behind .hero-bg-radial (-1), which is behind all content */
  pointer-events: none;
  overflow: hidden;

  /* static resting-state field */
  background-image: url('/assets/arrows.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* transitional red tokens */
  --red-arrow:  #c70e2d;   /* brand red          */
  --red-bright: #ff2a48;   /* v3 scan highlight  */
}

/* a layer that sits above the static PNG */
.bg-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ==========================================================================
   OPTION A — red-tinted full field (v1 Sweep, v3 Pulse-sweep)
   --------------------------------------------------------------------------
   .bg-red-png is the SAME arrows.png used as an alpha mask over a red fill, so
   its arrows line up pixel-for-pixel with the static grey field (both cover/
   center). The parent .field-red carries a gradient band mask that sweeps,
   revealing the red only inside the moving band. Default band position is
   off-screen → settled state shows grey only.
   ========================================================================== */
.bg-red-png {
  position: absolute;
  inset: 0;
  background-color: var(--red-arrow);
  -webkit-mask: url('/assets/arrows.png') center / cover no-repeat;
          mask: url('/assets/arrows.png') center / cover no-repeat;
}

.var-v1 .field-red,
.var-v3 .field-red {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 50%, transparent);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* v1 — 30vw band, 1.8s */
.var-v1 .field-red {
  -webkit-mask-size: 30vw 100%;
          mask-size: 30vw 100%;
  -webkit-mask-position: -30vw 0;
          mask-position: -30vw 0;
}
.var-v1.animate .field-red {
  animation: bgSweep 1.8s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}
@keyframes bgSweep {
  from { -webkit-mask-position: -30vw 0; mask-position: -30vw 0; }
  to   { -webkit-mask-position: 130vw 0; mask-position: 130vw 0; }
}

/* v3 — 15vw band, brighter, 1.4s */
.var-v3 .field-red {
  -webkit-mask-size: 15vw 100%;
          mask-size: 15vw 100%;
  -webkit-mask-position: -15vw 0;
          mask-position: -15vw 0;
}
.var-v3 .bg-red-png {
  background-color: var(--red-bright);
  filter: drop-shadow(0 0 8px rgba(255, 42, 72, 0.5));
}
.var-v3.animate .field-red {
  animation: bgScan 1.4s cubic-bezier(0.6, 0, 0.25, 1) forwards;
}
@keyframes bgScan {
  from { -webkit-mask-position: -15vw 0; mask-position: -15vw 0; }
  to   { -webkit-mask-position: 130vw 0; mask-position: 130vw 0; }
}

/* ==========================================================================
   OPTION B — procedural red arrows (v2 Cascade)
   --------------------------------------------------------------------------
   Each arrow is the arrow-single.png sprite as an alpha mask over a red fill.
   ROTATION IS LOCKED: no rotate transform anywhere — the sprite's own angle is
   the only angle. Only left/top (position) and width/height (size) vary.
   Arrows fly in from the left (translateX), hold, then fade out, leaving the
   static grey field beneath.
   ========================================================================== */
.cascade-arrow {
  position: absolute;
  background-color: var(--red-arrow);
  -webkit-mask: url('/assets/arrow-single.png') center / contain no-repeat;
          mask: url('/assets/arrow-single.png') center / contain no-repeat;
  opacity: 0;                 /* hidden until (and after) the animation */
  will-change: transform, opacity;
}
.var-v2.animate .cascade-arrow {
  animation: cascadeIn 1.6s cubic-bezier(0.2, 0.75, 0.25, 1) forwards;
  animation-delay: var(--delay, 0ms);
}
@keyframes cascadeIn {
  0%   { transform: translateX(calc(-1 * var(--dist, 60vw))); opacity: 0; }
  28%  { opacity: 1; }
  60%  { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }   /* clear → grey field remains */
}

/* ==========================================================================
   .hero-bg-radial — site-wide red corner glow. Also defined inline in
   index.html (landing); duplicated here so /live + /live/:id get it via this
   shared stylesheet. Keep the two copies identical.
   ========================================================================== */
.hero-bg-radial {
  position: fixed; inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 800px 600px at 80% 20%, rgba(199, 14, 45, 0.18), transparent 60%),
    radial-gradient(ellipse 600px 500px at 10% 90%, rgba(199, 14, 45, 0.08), transparent 60%);
  pointer-events: none;
}

/* ==========================================================================
   SLOW CONTINUOUS SWEEP — /live and /live/:id ONLY (JS gates by pathname).
   A narrow (~7vw), brighter-red scan line crawls left→right at constant speed
   over 25s, looping infinitely. Both keyframe endpoints sit off-screen, so the
   wrap is seamless. Its own layer (.field-slow > .bg-red-png), independent of the
   variant entrance sweep. JS anchors the loop's phase to wall-clock time and
   persists it (sessionStorage) so navigating between /live pages resumes the band
   mid-stride via a negative animation-delay — no entrance-sweep replay. Pause/
   resume via animation-play-state on visibilitychange (preserves frame).
   ========================================================================== */
.field-slow {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 50%, transparent);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 7vw 100%;
          mask-size: 7vw 100%;
  -webkit-mask-position: -12vw 0;        /* parked off-screen left until .slow-run */
          mask-position: -12vw 0;
}
.field-slow .bg-red-png {
  background-color: var(--red-bright);   /* brighter than v1, like the v3 scan */
  filter: drop-shadow(0 0 6px rgba(255, 42, 72, 0.4));
}
.field-slow.slow-run {
  /* Infinite loop. Both keyframe endpoints (-12vw / 112vw) are off-screen, so the
     wrap is invisible. JS sets a negative animation-delay on (re)start to resume
     mid-stride when navigating between /live pages. */
  animation: slowSweep 25s linear infinite;
}
@keyframes slowSweep {
  from { -webkit-mask-position: -12vw 0; mask-position: -12vw 0; }
  to   { -webkit-mask-position: 112vw 0; mask-position: 112vw 0; }
}

/* ==========================================================================
   Reduced motion — never animate; static grey field only.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .bg-field { display: none !important; }
}