/* ═══════════════════════════════════════════════════════════════
   AUS PEV — 2026 Nationals Trial Theme
   Red & Black · Stars & Flames
   Inspired by the 2026 race jersey
   ═══════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }

body {
  font-family: 'Titillium Web', sans-serif;
  background-color: #0A0A0A;
  color: #E0E0E0;
}

/* ══════════════════════════════════════════════════════════════
   STAR TILE PATTERN
   Replaces the hex honeycomb pattern from the previous theme.
   Three 5-pointed stars per 100×100 tile — one large (r=10),
   one medium (r=5), one small (r=4) — placed so the tile
   tessellates without obvious repetition.

   Star polygon maths: 10-point polygon alternating between
   outer radius R and inner radius r, starting from the top.
   ══════════════════════════════════════════════════════════════ */

/* ── Main (dark background, #0A0A0A)
   Stars recalculated with larger radii:
     large  (50,50)  R=15 r=6   — dominant centred star
     medium (78,67)  R=10 r=4   — lower-right accent
     small  (20,11)  R=8  r=3.2 — upper-left accent
     tiny   (85,17)  R=6  r=2.4 — upper-right accent
     micro  (15,72)  R=5  r=2   — lower-left accent
   Polygon maths: 10-point alternating outer/inner radius,
   starting from 270° (top) stepping 36°.
── */
.star-bg {
  background-color: #0A0A0A;
  position: relative;
}
.star-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpolygon points='50,35 53.5,45.1 64.3,45.4 55.7,51.9 58.8,62.1 50,56 41.2,62.1 44.3,51.9 35.7,45.4 46.5,45.1' fill='%23C80000' fill-opacity='0.07'/%3E%3Cpolygon points='78,57 80.4,63.8 87.5,63.9 81.8,68.2 83.9,75.1 78,71 72.1,75.1 74.2,68.2 68.5,63.9 75.6,63.8' fill='%23C80000' fill-opacity='0.05'/%3E%3Cpolygon points='20,3 21.9,8.4 27.6,8.5 23.0,12.0 24.7,17.5 20,14.2 15.3,17.5 17.0,12.0 12.4,8.5 18.1,8.4' fill='%23C80000' fill-opacity='0.04'/%3E%3Cpolygon points='85,11 86.4,15.1 90.7,15.1 87.3,17.7 88.5,21.9 85,19.4 81.5,21.9 82.7,17.7 79.3,15.1 83.6,15.1' fill='%23C80000' fill-opacity='0.03'/%3E%3Cpolygon points='15,65 16.2,68.4 19.8,68.5 16.9,70.6 17.9,74.0 15,72 12.1,74.0 13.1,70.6 10.2,68.5 13.8,68.4' fill='%23C80000' fill-opacity='0.025'/%3E%3C/svg%3E");
  animation: star-twinkle 7s ease-in-out infinite;
}

/* Bump opacity on small screens so the pattern is still visible */
@media (max-width: 640px) {
  .star-bg::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpolygon points='50,35 53.5,45.1 64.3,45.4 55.7,51.9 58.8,62.1 50,56 41.2,62.1 44.3,51.9 35.7,45.4 46.5,45.1' fill='%23C80000' fill-opacity='0.12'/%3E%3Cpolygon points='78,57 80.4,63.8 87.5,63.9 81.8,68.2 83.9,75.1 78,71 72.1,75.1 74.2,68.2 68.5,63.9 75.6,63.8' fill='%23C80000' fill-opacity='0.09'/%3E%3Cpolygon points='20,3 21.9,8.4 27.6,8.5 23.0,12.0 24.7,17.5 20,14.2 15.3,17.5 17.0,12.0 12.4,8.5 18.1,8.4' fill='%23C80000' fill-opacity='0.08'/%3E%3Cpolygon points='85,11 86.4,15.1 90.7,15.1 87.3,17.7 88.5,21.9 85,19.4 81.5,21.9 82.7,17.7 79.3,15.1 83.6,15.1' fill='%23C80000' fill-opacity='0.06'/%3E%3Cpolygon points='15,65 16.2,68.4 19.8,68.5 16.9,70.6 17.9,74.0 15,72 12.1,74.0 13.1,70.6 10.2,68.5 13.8,68.4' fill='%23C80000' fill-opacity='0.045'/%3E%3C/svg%3E");
  }
}

/* ── Dark variant (#121212) ── */
.star-bg-dark {
  background-color: #121212;
  position: relative;
}
.star-bg-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpolygon points='50,35 53.5,45.1 64.3,45.4 55.7,51.9 58.8,62.1 50,56 41.2,62.1 44.3,51.9 35.7,45.4 46.5,45.1' fill='%23C80000' fill-opacity='0.05'/%3E%3Cpolygon points='78,57 80.4,63.8 87.5,63.9 81.8,68.2 83.9,75.1 78,71 72.1,75.1 74.2,68.2 68.5,63.9 75.6,63.8' fill='%23C80000' fill-opacity='0.035'/%3E%3Cpolygon points='20,3 21.9,8.4 27.6,8.5 23.0,12.0 24.7,17.5 20,14.2 15.3,17.5 17.0,12.0 12.4,8.5 18.1,8.4' fill='%23C80000' fill-opacity='0.025'/%3E%3C/svg%3E");
  animation: star-twinkle 11s ease-in-out infinite 3.5s;
}

/* ══════════════════════════════════════════════════════════════
   FLAME EFFECTS
   Inspired by the flame design on the lower jersey panels.
   ══════════════════════════════════════════════════════════════ */

/* ── Star twinkle keyframe ── */
@keyframes star-twinkle {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ── Flame flicker keyframe (applied to decorative flame elements) ── */
@keyframes flame-flicker {
  0%,  100% { transform: scaleX(1)    scaleY(1);    opacity: 1; }
  20%        { transform: scaleX(1.01) scaleY(0.98); opacity: 0.92; }
  50%        { transform: scaleX(0.99) scaleY(1.02); opacity: 0.88; }
  75%        { transform: scaleX(1.01) scaleY(0.99); opacity: 0.95; }
}

/*
 * .flame-edge
 * Add to any section that should have a jagged flame silhouette
 * rising from its bottom edge.  Uses a pseudo-element so it doesn't
 * affect layout.  The containing element must have position relative
 * or absolute / overflow visible (the pseudo overflows downward).
 */
.flame-edge {
  position: relative;
}
.flame-edge::after {
  content: '';
  position: absolute;
  bottom: -48px;
  left: 0;
  right: 0;
  height: 70px;
  /*
   * Two-layer flame silhouette.
   * Each tongue uses cubic beziers where BOTH control points sit at
   * approximately peak height — this produces the characteristic narrow
   * teardrop flame shape rather than a zigzag.
   * Layer 1 (back): 6 wider flames, valleys at y=58, fill-opacity 0.14
   * Layer 2 (front): 7 narrower taller flames offset by ~half period, fill-opacity 0.22
   */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 70' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,70 L0,58 C0,38 112,10 120,10 C128,10 240,38 240,58 C240,38 352,26 360,26 C368,26 480,38 480,58 C480,38 592,6 600,6 C608,6 720,38 720,58 C720,38 832,20 840,20 C848,20 960,38 960,58 C960,38 1072,8 1080,8 C1088,8 1200,38 1200,58 C1200,38 1312,28 1320,28 C1328,28 1440,38 1440,58 L1440,70 Z' fill='%23C80000' fill-opacity='0.14'/%3E%3Cpath d='M0,70 L0,64 C0,44 68,2 75,2 C82,2 180,44 180,64 C180,44 268,14 275,14 C282,14 380,44 380,64 C380,44 468,4 475,4 C482,4 580,44 580,64 C580,44 668,16 675,16 C682,16 780,44 780,64 C780,44 868,6 875,6 C882,6 980,44 980,64 C980,44 1068,18 1075,18 C1082,18 1180,44 1180,64 C1180,44 1268,2 1275,2 C1282,2 1380,44 1380,64 C1380,44 1420,16 1440,18 L1440,70 Z' fill='%23E00000' fill-opacity='0.22'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 5;
  animation: flame-flicker 3.5s ease-in-out infinite;
}

/*
 * .flame-glow
 * Adds a radial red glow rising from the bottom of a section,
 * suggesting heat/flame without any hard SVG shape.
 * Combine with .flame-edge for maximum effect.
 */
.flame-glow {
  position: relative;
  overflow: hidden;
}
.flame-glow::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 140px;
  background:
    radial-gradient(ellipse 180px 140px at  8% 100%, rgba(200,0,0,0.14) 0%, transparent 65%),
    radial-gradient(ellipse 120px 110px at 22% 100%, rgba(200,0,0,0.09) 0%, transparent 65%),
    radial-gradient(ellipse 150px 130px at 38% 100%, rgba(200,0,0,0.11) 0%, transparent 65%),
    radial-gradient(ellipse 100px  90px at 54% 100%, rgba(200,0,0,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 160px 140px at 68% 100%, rgba(200,0,0,0.13) 0%, transparent 65%),
    radial-gradient(ellipse 130px 110px at 82% 100%, rgba(200,0,0,0.10) 0%, transparent 65%),
    radial-gradient(ellipse 110px 120px at 95% 100%, rgba(200,0,0,0.12) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/*
 * .flame-divider
 * A standalone <div> element placed between sections.
 * Height 40px, shows the flame peaks on a transparent background.
 * Use inside a relative wrapper or outside sections.
 */
.flame-divider {
  width: 100%;
  height: 90px;
  position: relative;
  z-index: 10;
  overflow: visible;
  pointer-events: none;
  /*
   * Two-layer approach for depth.
   * Layer 1 (back): 9 flames, valleys at y=62, wider & lower (fill-opacity 0.14)
   * Layer 2 (front): 8 narrower taller flames offset ~half period (fill-opacity 0.20)
   * Both layers use the peaked-bezier technique:
   *   going UP   — C(valleyX, valleyY-20) (peakX-8, peakY) (peakX, peakY)
   *   going DOWN — C(peakX+8, peakY) (valleyX, valleyY-20) (valleyX, valleyY)
   * This ensures the peak is rounded and the tongue is narrow, not zigzag.
   */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 90' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,90 L0,62 C0,42 72,32 80,32 C88,32 160,42 160,62 C160,42 242,50 250,50 C258,50 330,42 330,62 C330,42 407,28 415,28 C423,28 500,42 500,62 C500,42 577,46 585,46 C593,46 670,42 670,62 C670,42 747,35 755,35 C763,35 840,42 840,62 C840,42 917,24 925,24 C933,24 1010,42 1010,62 C1010,42 1087,42 1095,42 C1103,42 1180,42 1180,62 C1180,42 1257,30 1265,30 C1273,30 1350,42 1350,62 C1350,42 1387,40 1395,40 C1403,40 1440,42 1440,62 L1440,90 Z' fill='%23C80000' fill-opacity='0.14'/%3E%3Cpath d='M0,90 L0,72 C0,52 102,20 110,20 C118,20 220,52 220,72 C220,52 272,42 280,42 C288,42 340,52 340,72 C340,52 442,15 450,15 C458,15 560,52 560,72 C560,52 612,38 620,38 C628,38 680,52 680,72 C680,52 782,22 790,22 C798,22 900,52 900,72 C900,52 952,12 960,12 C968,12 1060,52 1060,72 C1060,52 1122,34 1130,34 C1138,34 1240,52 1240,72 C1240,52 1292,18 1300,18 C1308,18 1410,52 1410,72 L1410,90 Z' fill='%23E00000' fill-opacity='0.20'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  margin-top: -1px;
  margin-bottom: -1px;
}

/* ══════════════════════════════════════════════════════════════
   ANGLED SECTION CLIPS  (same as previous theme)
   ══════════════════════════════════════════════════════════════ */
.clip-bottom { clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); }
.clip-top    { clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 100%); }

/* On mobile the clip angles create a large dark triangle that overlaps
   content — disable them so sections stack flush instead */
@media (max-width: 640px) {
  .clip-bottom,
  .clip-top { clip-path: none; }
  .racers-section { margin-top: 0 !important; }
}

/* Pull clip-top sections up to cover the gap left by clip-bottom */
.racers-section { margin-top: -6vh; }

/* ══════════════════════════════════════════════════════════════
   RED GLOWS  (replaces orange glows)
   ══════════════════════════════════════════════════════════════ */
.glow-orange    { box-shadow: 0 0 40px rgba(200,0,0,0.30); }
.glow-orange-sm { box-shadow: 0 0 18px rgba(200,0,0,0.22); }

/* ══════════════════════════════════════════════════════════════
   LIVE DOT PULSE  (identical to previous theme)
   ══════════════════════════════════════════════════════════════ */
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}
.live-dot { animation: live-pulse 1.4s ease-in-out infinite; }

/* ══════════════════════════════════════════════════════════════
   SCROLLBAR
   ══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: #0A0A0A; }
::-webkit-scrollbar-thumb { background: #C80000; border-radius: 3px; }

/* ══════════════════════════════════════════════════════════════
   SECTION HEADING HELPER
   ══════════════════════════════════════════════════════════════ */
.section-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3rem;
}

/* Red section bar (replaces orange) */
.section-bar { width: 4px; height: 2.5rem; background: #C80000; flex-shrink: 0; }