/* BreakPlay F1 Vibe - injected atmosphere layer for play-f1-* arenas.
   .fv-root sits behind arena content (z-index:-1 inside an isolated arena). */

.f1-arena { isolation: isolate; }

.fv-root {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  --fv-sky1: #16203f;
  --fv-sky2: #0a0d18;
  --fv-accent: #e10600;
  --fv-glow: rgba(225, 6, 0, 0.35);
}

/* ── Sky ── */
.fv-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 320px at 50% -8%, var(--fv-glow), transparent 65%),
    linear-gradient(180deg, var(--fv-sky1), var(--fv-sky2) 62%);
}
.fv-stars {
  position: absolute;
  inset: 0 0 40% 0;
  background-image:
    radial-gradient(2px 2px at 12% 30%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(1.6px 1.6px at 34% 14%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(2.2px 2.2px at 57% 26%, rgba(255,255,255,0.45), transparent 60%),
    radial-gradient(1.4px 1.4px at 76% 10%, rgba(255,255,255,0.35), transparent 60%),
    radial-gradient(1.8px 1.8px at 90% 33%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 45% 44%, rgba(255,255,255,0.3), transparent 60%);
  opacity: 0.8;
}

/* ── Grandstand silhouette + crowd + flags ── */
.fv-stand {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8%;
  height: 26%;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.16) 0 3px, transparent 3px 9px,
      rgba(255,255,255,0.1) 9px 11px, transparent 11px 18px),
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.75));
  clip-path: polygon(0 38%, 6% 26%, 6% 100%, 0 100%, 0 38%, 100% 46%, 100% 100%, 94% 100%, 94% 30%, 100% 38%);
  opacity: 0.55;
}
.fv-stand::before {
  content: "";
  position: absolute;
  inset: 20% 0 0;
  background-image:
    radial-gradient(3px 3px at 8% 30%, #ffd400 40%, transparent 60%),
    radial-gradient(3px 3px at 22% 55%, #ff5a3c 40%, transparent 60%),
    radial-gradient(3px 3px at 41% 25%, #f5f6fa 40%, transparent 60%),
    radial-gradient(3px 3px at 63% 60%, #2fd99a 40%, transparent 60%),
    radial-gradient(3px 3px at 78% 32%, #ffd400 40%, transparent 60%),
    radial-gradient(3px 3px at 92% 52%, #ff5a3c 40%, transparent 60%);
  animation: fv-crowd 2.4s ease-in-out infinite alternate;
}
@keyframes fv-crowd {
  from { transform: translateY(0); opacity: 0.7; }
  to { transform: translateY(-3px); opacity: 1; }
}

/* ── Floodlight towers (4 corners, soft cones) ── */
.fv-light {
  position: absolute;
  top: -6px;
  width: 46px;
  height: 150px;
  pointer-events: none;
}
.fv-light::before {
  content: "";
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #ffe9a8;
  box-shadow: 0 0 18px 6px rgba(255, 236, 170, 0.55);
}
.fv-light::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 130px;
  height: 140px;
  background: conic-gradient(from 160deg at 50% 0%, transparent 0deg, rgba(255, 240, 190, 0.16) 14deg, transparent 30deg);
  filter: blur(2px);
  animation: fv-flicker 5.5s ease-in-out infinite;
}
.fv-light.l1 { left: 4%; }
.fv-light.l2 { right: 4%; transform: scaleX(-1); }
.fv-light.l3 { left: 34%; transform: scale(0.7); opacity: 0.7; }
.fv-light.l4 { right: 34%; transform: scale(0.7) scaleX(-1); opacity: 0.7; }
@keyframes fv-flicker {
  0%, 100% { opacity: 0.85; }
  47% { opacity: 1; }
  52% { opacity: 0.72; }
  57% { opacity: 0.95; }
}

/* ── Scrolling sponsor banners (bottom strip above track) ── */
.fv-banners {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14%;
  height: 26px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(6, 6, 10, 0.9), rgba(10, 10, 16, 0.75));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  opacity: 0.9;
}
.fv-banners-track {
  display: inline-flex;
  gap: 26px;
  white-space: nowrap;
  padding-left: 100%;
  animation: fv-scroll 26s linear infinite;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.fv-banners-track span { color: rgba(255, 255, 255, 0.55); }
.fv-banners-track span.acc { color: var(--fv-accent); text-shadow: 0 0 10px var(--fv-glow); }
.fv-banners-track span.hl { color: var(--f1-yellow, #ffd400); }
body.f1-live .fv-banners-track { animation-duration: 13s; }
@keyframes fv-scroll { to { transform: translateX(-100%); } }

/* ── Speed streaks (only while a run is live) ── */
.fv-streaks { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease; }
body.f1-live .fv-streaks { opacity: 1; }
.fv-streaks i {
  position: absolute;
  height: 2px;
  width: 26%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: fv-zip 1.1s linear infinite;
  opacity: 0;
}
body.f1-live .fv-streaks i { opacity: 1; }
.fv-streaks i:nth-child(1) { top: 22%; animation-delay: 0s; }
.fv-streaks i:nth-child(2) { top: 38%; animation-delay: 0.35s; width: 34%; }
.fv-streaks i:nth-child(3) { top: 55%; animation-delay: 0.72s; width: 20%; }
.fv-streaks i:nth-child(4) { top: 68%; animation-delay: 0.15s; width: 30%; }
@keyframes fv-zip {
  from { left: -35%; }
  to { left: 110%; }
}

/* ── Vignette for depth ── */
.fv-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

/* ── Event-driven colour wash (VSC yellow, rain blue, purple sector...) ── */
.fv-wash {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  mix-blend-mode: screen;
}
.fv-root[data-ev="vsc"] .fv-wash,
.fv-root[data-ev="yellow"] .fv-wash { background: rgba(255, 212, 0, 0.13); opacity: 1; }
.fv-root[data-ev="rain"] .fv-wash { background: rgba(60, 130, 255, 0.14); opacity: 1; }
.fv-root[data-ev="purple"] .fv-wash { background: rgba(170, 90, 255, 0.15); opacity: 1; }
.fv-root[data-ev="crowd"] .fv-wash { background: rgba(255, 90, 60, 0.1); opacity: 1; }
.fv-root[data-ev="slip"] .fv-wash { background: rgba(60, 255, 180, 0.1); opacity: 1; }
.fv-root[data-ev="bonus"] .fv-wash { background: rgba(255, 212, 0, 0.16); opacity: 1; }

/* ── Track horizon: asphalt + animated kerb + lane dashes ── */
.fv-track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14%;
  background: linear-gradient(180deg, #26262e, #101014 55%, #050507);
  border-top: 3px solid rgba(255, 255, 255, 0.14);
}
.fv-kerb {
  position: absolute;
  left: 0;
  right: 0;
  top: -11px;
  height: 8px;
  background: repeating-linear-gradient(90deg, #e10600 0 22px, #f5f6fa 22px 44px);
  opacity: 0.85;
}
.fv-lane {
  position: absolute;
  left: 0;
  right: 0;
  top: 55%;
  height: 3px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.55) 0 34px, transparent 34px 74px);
  animation: fv-lane 3.2s linear infinite;
  animation-play-state: paused;
  opacity: 0.5;
}
body.f1-live .fv-lane { animation-play-state: running; opacity: 0.85; }
@keyframes fv-lane { to { transform: translateX(-74px); } }

/* ── Per-game sky themes (keyed off the arena modifier class each page sets) ── */
.lights-arena .fv-root { --fv-sky1: #1a1030; --fv-sky2: #0a0714; --fv-accent: #e10600; --fv-glow: rgba(225, 6, 0, 0.4); }
.brake-arena .fv-root { --fv-sky1: #2a1636; --fv-sky2: #0d0812; --fv-accent: #ff7a1a; --fv-glow: rgba(255, 122, 26, 0.32); }
.drs-arena .fv-root { --fv-sky1: #0e2a3f; --fv-sky2: #061019; --fv-accent: #00d26a; --fv-glow: rgba(0, 210, 106, 0.3); }
.pit-arena .fv-root { --fv-sky1: #101a2e; --fv-sky2: #070a12; --fv-accent: #ffd400; --fv-glow: rgba(255, 212, 0, 0.3); }
.quali-arena .fv-root { --fv-sky1: #231245; --fv-sky2: #0a0616; --fv-accent: #b06bff; --fv-glow: rgba(176, 107, 255, 0.35); }
.dodge-arena .fv-root { --fv-sky1: #33101a; --fv-sky2: #12060a; --fv-accent: #e10600; --fv-glow: rgba(225, 6, 0, 0.45); }
.safety-arena .fv-root { --fv-sky1: #33290c; --fv-sky2: #121004; --fv-accent: #ffd400; --fv-glow: rgba(255, 212, 0, 0.4); }
.strat-arena .fv-root { --fv-sky1: #0c2233; --fv-sky2: #060e15; --fv-accent: #37b6ff; --fv-glow: rgba(55, 182, 255, 0.32); }
.sprint-arena .fv-root { --fv-sky1: #20242e; --fv-sky2: #0b0d12; --fv-accent: #e10600; --fv-glow: rgba(225, 6, 0, 0.35); }
.tyre-arena .fv-root { --fv-sky1: #14141f; --fv-sky2: #08080d; --fv-accent: #ff3b24; --fv-glow: rgba(255, 59, 36, 0.32); }

/* ── Respect reduced-motion: freeze the atmosphere too ── */
@media (prefers-reduced-motion: reduce) {
  .fv-banners-track,
  .fv-streaks i,
  .fv-stand::before,
  .fv-light::after,
  .fv-lane { animation: none !important; }
}