/* ============================================================
   MAYHEM — takeover over hero -> 371px banner. TONIGHT live mode
   on race dates. Auto-sunsets after the final (server + client).
   Huset's Speedway x Heiman Fire, § 02.
   ============================================================ */
.mayhem{
  --mh-red:#d11f1f; --mh-orange:#ff6a00; --mh-amber:#ffb300;
  position:relative; height:371px; max-height:371px; overflow:hidden;
  background:#0b0b0b; isolation:isolate;
  font-family:var(--fs-body,"Barlow",sans-serif);
}

/* ---------- TAKEOVER ---------- */
.mayhem.is-takeover{position:fixed;inset:0;height:100vh;max-height:100vh;z-index:1200;animation:mh-takeover-in .6s cubic-bezier(.2,.7,.2,1) both;}
.mayhem.is-collapsing{position:fixed;inset:0;height:100vh;max-height:100vh;z-index:1200;animation:mh-collapse .9s cubic-bezier(.76,0,.24,1) both;}
@keyframes mh-takeover-in{from{opacity:0;transform:scale(1.04);}to{opacity:1;transform:scale(1);}}
@keyframes mh-collapse{0%{height:100vh;}55%{height:100vh;}100%{height:371px;}}
.mayhem-slot{height:371px;} .mayhem-slot.is-hidden{display:none;}
.mayhem.is-takeover .mayhem-word,.mayhem.is-collapsing .mayhem-word{font-size:clamp(110px,20vw,300px);transition:font-size .9s cubic-bezier(.76,0,.24,1);}
.mayhem-skip{position:absolute;top:20px;right:24px;z-index:6;display:none;font-family:var(--fs-cond,"Barlow Condensed",sans-serif);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7);background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.25);padding:8px 14px;cursor:pointer;transition:color .2s,border-color .2s;}
.mayhem-skip:hover{color:#fff;border-color:var(--mh-amber);}
.mayhem.is-takeover .mayhem-skip{display:inline-block;}

/* ---------- backdrop ---------- */
.mayhem-bg{position:absolute;inset:0;z-index:0;}
.mayhem-bg-sprint{position:absolute;top:0;right:0;bottom:0;width:62%;background-size:cover;background-position:center 38%;-webkit-mask-image:linear-gradient(100deg,transparent 0,#000 26%);mask-image:linear-gradient(100deg,transparent 0,#000 26%);filter:contrast(1.08) saturate(1.05);}
.mayhem-bg-truck{position:absolute;top:0;left:0;bottom:0;width:52%;background-size:cover;background-position:center;-webkit-mask-image:linear-gradient(80deg,#000 58%,transparent 96%);mask-image:linear-gradient(80deg,#000 58%,transparent 96%);filter:contrast(1.05) saturate(1.02);}
.mayhem-wash{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(11,11,11,.55) 0%,rgba(11,11,11,.05) 30%,rgba(11,11,11,.75) 100%),radial-gradient(120% 90% at 30% 50%,rgba(11,11,11,.85) 0%,rgba(11,11,11,.2) 55%,transparent 75%);}
.mayhem-seam{position:absolute;top:-10%;bottom:-10%;left:46%;width:90px;z-index:2;transform:skewX(-12deg);background:linear-gradient(180deg,var(--mh-amber),var(--mh-orange) 45%,var(--mh-red));box-shadow:0 0 40px 6px rgba(255,106,0,.55);opacity:.92;}
.mayhem-seam::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 14px,rgba(0,0,0,.25) 14px 16px);mix-blend-mode:multiply;}
.mayhem-embers{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;}
.mayhem-embers span{position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;background:var(--mh-amber);box-shadow:0 0 6px 1px var(--mh-orange);animation:mh-rise linear infinite;opacity:0;}
@keyframes mh-rise{0%{transform:translateY(0) translateX(0);opacity:0;}12%{opacity:1;}100%{transform:translateY(-380px) translateX(28px);opacity:0;}}

/* ---------- content ---------- */
.mayhem-inner{position:relative;z-index:3;height:100%;max-width:var(--max,1280px);margin:0 auto;padding:0 var(--gutter,32px);display:grid;grid-template-rows:auto 1fr auto;}
.mayhem-top{display:flex;align-items:center;gap:14px;padding-top:18px;font-family:var(--fs-cond,"Barlow Condensed",sans-serif);font-weight:800;letter-spacing:.04em;text-transform:uppercase;}
.mayhem-brand{font-size:13px;color:#fff;padding:4px 10px;background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);}
.mayhem-brand--hf{background:var(--mh-red);}
.mayhem-x{color:rgba(255,255,255,.7);font-family:var(--fs-display,"Bebas Neue",sans-serif);font-size:18px;}
.mayhem-eyebrow{margin-left:auto;font-size:11px;letter-spacing:.22em;color:var(--mh-amber);}
.mayhem-wordwrap{align-self:center;position:relative;}
.mayhem-kicker{display:block;font-family:var(--fs-cond,"Barlow Condensed",sans-serif);font-weight:700;font-size:clamp(13px,1.5vw,16px);letter-spacing:.32em;text-transform:uppercase;color:#fff;margin-bottom:-.12em;text-shadow:0 2px 8px rgba(0,0,0,.7);}
.mayhem-word{font-family:var(--fs-display,"Bebas Neue",sans-serif);font-size:clamp(76px,12.5vw,168px);line-height:.82;letter-spacing:.005em;transform:skewX(-7deg);background:linear-gradient(178deg,#fff 6%,var(--mh-amber) 40%,var(--mh-orange) 66%,var(--mh-red) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 18px rgba(0,0,0,.6)) drop-shadow(0 0 28px rgba(255,106,0,.35));}
.mayhem-sub{display:block;font-family:var(--fs-cond,"Barlow Condensed",sans-serif);font-weight:700;font-size:clamp(15px,1.9vw,22px);letter-spacing:.06em;text-transform:uppercase;color:#fff;margin-top:6px;text-shadow:0 2px 8px rgba(0,0,0,.8);}
.mayhem-sub em{font-style:normal;color:var(--mh-amber);}
.mayhem-strip{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-bottom:18px;}
.mayhem-dates{display:flex;align-items:stretch;gap:0;font-family:var(--fs-cond,"Barlow Condensed",sans-serif);background:rgba(0,0,0,.5);backdrop-filter:blur(2px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);}
.mayhem-date{padding:7px 13px;color:#fff;border-right:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;line-height:1.05;position:relative;transition:background .3s;}
.mayhem-date:last-child{border-right:0;}
.mayhem-date b{font-family:var(--fs-display,"Bebas Neue",sans-serif);font-size:20px;letter-spacing:.02em;font-weight:400;}
.mayhem-date small{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.62;}
.mayhem-date.is-final{background:var(--mh-red);}
.mayhem-date.is-final small{opacity:.9;}
.mayhem-cta{margin-left:auto;display:inline-flex;align-items:center;gap:9px;font-family:var(--fs-cond,"Barlow Condensed",sans-serif);font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:#fff;text-decoration:none;padding:11px 20px;background:var(--mh-red);transition:transform .2s ease,background .2s ease;box-shadow:0 6px 20px rgba(209,31,31,.4);}
.mayhem-cta:hover{transform:translateY(-2px);background:#b91818;}
.mayhem-cta span{font-size:17px;}

/* ============================================================
   TONIGHT LIVE MODE — applied via .is-racenight on .mayhem
   ============================================================ */
/* pulsing "RACE NIGHT TONIGHT" banner sweeping across top */
.mayhem-live{
  position:absolute;top:0;left:0;right:0;z-index:5;
  display:none;align-items:center;gap:12px;
  padding:9px 24px;
  background:linear-gradient(90deg,var(--mh-red),#8f1010);
  font-family:var(--fs-cond,"Barlow Condensed",sans-serif);
  font-weight:800;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:#fff;
  box-shadow:0 4px 24px rgba(209,31,31,.6);
  overflow:hidden;
}
.mayhem.is-racenight .mayhem-live{display:flex;}
.mayhem.is-racenight .mayhem-top{padding-top:48px;} /* clear the live bar */
.mayhem-live::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.12) 0 14px,transparent 14px 28px);
  animation:mh-stripe 1.1s linear infinite;
}
@keyframes mh-stripe{from{background-position:0 0;}to{background-position:40px 0;}}
.mayhem-live-dot{width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:mh-pulse 1.1s ease-out infinite;position:relative;z-index:1;}
@keyframes mh-pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7);}70%{box-shadow:0 0 0 10px rgba(255,255,255,0);}100%{box-shadow:0 0 0 0 rgba(255,255,255,0);}}
.mayhem-live-text{position:relative;z-index:1;}
.mayhem-live-where{position:relative;z-index:1;margin-left:auto;opacity:.85;letter-spacing:.14em;}

/* tonight: hot edge glow + faster, brighter embers + flicker headline */
.mayhem.is-racenight{box-shadow:inset 0 0 0 3px var(--mh-red),inset 0 0 60px rgba(255,106,0,.25);}
.mayhem.is-racenight .mayhem-embers span{animation-duration:2.4s !important;background:#fff;box-shadow:0 0 8px 2px var(--mh-orange);}
.mayhem.is-racenight .mayhem-word{animation:mh-flicker 3.2s steps(1) infinite;}
@keyframes mh-flicker{0%,97%,100%{filter:drop-shadow(0 6px 18px rgba(0,0,0,.6)) drop-shadow(0 0 28px rgba(255,106,0,.35));}97.5%{filter:drop-shadow(0 6px 18px rgba(0,0,0,.6)) drop-shadow(0 0 60px rgba(255,180,0,.9)) brightness(1.25);}98.5%{filter:drop-shadow(0 6px 18px rgba(0,0,0,.6)) brightness(.85);}}

/* the matching date cell lights up */
.mayhem-date.is-tonight{background:var(--mh-amber);color:#0b0b0b;animation:mh-tonight 1.1s ease-in-out infinite;}
.mayhem-date.is-tonight small{opacity:.85;}
.mayhem-date.is-tonight::after{content:"TONIGHT";position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:#0b0b0b;color:var(--mh-amber);font-size:8px;letter-spacing:.12em;padding:2px 6px;white-space:nowrap;}
@keyframes mh-tonight{0%,100%{box-shadow:0 0 0 0 rgba(255,179,0,.7);}50%{box-shadow:0 0 18px 3px rgba(255,179,0,.9);}}

/* tonight CTA copy swap handled in markup via two spans */
.mayhem-cta .mh-cta-tonight{display:none;}
.mayhem.is-racenight .mayhem-cta{background:var(--mh-amber);color:#0b0b0b;}
.mayhem.is-racenight .mayhem-cta .mh-cta-default{display:none;}
.mayhem.is-racenight .mayhem-cta .mh-cta-tonight{display:inline;}

@media(max-width:760px){
  .mayhem-bg-truck{display:none;}
  .mayhem-bg-sprint{width:100%;-webkit-mask-image:none;mask-image:none;}
  .mayhem-seam{display:none;}
  .mayhem-eyebrow{display:none;}
  .mayhem-cta{margin-left:0;}
  .mayhem-live-where{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .mayhem-embers span{animation:none;display:none;}
  .mayhem-cta,.mayhem-date{transition:none;}
  .mayhem.is-takeover,.mayhem.is-collapsing{position:relative;height:371px;max-height:371px;animation:none;z-index:auto;}
  .mayhem.is-takeover .mayhem-word,.mayhem.is-collapsing .mayhem-word{font-size:clamp(76px,12.5vw,168px);}
  .mayhem-slot{display:none;}
  .mayhem-live::before,.mayhem-live-dot,.mayhem.is-racenight .mayhem-word,.mayhem-date.is-tonight{animation:none;}
}