/* ─── HERO ──────────────────────────────────────────────────── */
.hero {
  overflow: hidden;
  background: var(--bg0);
  min-height: 100svh;
}

/* vignette blobs (dark) */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 55% 65% at 8%  55%, rgba(196,30,58,0.18)  0%, transparent 100%),
    radial-gradient(ellipse 45% 55% at 80% 20%, rgba(21,89,163,0.16) 0%, transparent 100%),
    radial-gradient(ellipse 35% 40% at 5%  92%, rgba(17,117,64,0.12)  0%, transparent 100%);
  animation: vignette-breathe 14s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes vignette-breathe {
  0%   { opacity: 0.75; }
  100% { opacity: 1.15; }
}

/* F1 hero — signature brand asset.
   Dark: SCREEN blend lifts the bright circuit lines + diffuser red over near-black bg.
   Light: MULTIPLY blend prints the car as an ink silhouette onto the cream. */
.hero-art {
  position: absolute;
  top: 50%; right: -3vw;
  transform: translateY(-50%);
  width: clamp(460px, 64vw, 1040px);
  height: 110%;
  background: url('/assets/f1.jpg') no-repeat center right / contain;
  z-index: 0;
  opacity: 1;
  mix-blend-mode: screen;
  filter: contrast(1.2) saturate(1.4) brightness(1.05);
  mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0.6) 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0.6) 80%, transparent 100%);
}

/* light mode: f1 reads as ink silhouette over cream via multiply.
   Use a radial vignette so the rectangular image fades smoothly into the cream. */
:root[data-theme="light"] .hero-art {
  mix-blend-mode: multiply;
  filter: contrast(0.95) saturate(0.55) brightness(1.1);
  opacity: 0.7;
  mask-image: radial-gradient(ellipse 70% 80% at 60% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 45%, rgba(0,0,0,0.3) 75%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 60% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 45%, rgba(0,0,0,0.3) 75%, transparent 95%);
}

@media (max-width: 768px) {
  .hero-art {
    top: 8%; right: -10vw;
    width: 130%; height: 50%;
    transform: none;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 70%, transparent 100%);
    opacity: 0.45;
  }
}

.hero > *:not(.hero-art) { position: relative; z-index: 2; }
.hero-art { z-index: 0; }

/* light mode hero: warm cream wash with subtle tricolor vignette */
:root[data-theme="light"] .hero {
  background:
    radial-gradient(ellipse 70% 80% at 20% 30%, #fef6dd 0%, var(--bg0) 60%),
    var(--bg0);
}
:root[data-theme="light"] .hero::before {
  background:
    radial-gradient(ellipse 55% 65% at 8%  55%, rgba(168,30,54,0.10) 0%, transparent 100%),
    radial-gradient(ellipse 45% 55% at 80% 20%, rgba(19,67,113,0.09) 0%, transparent 100%),
    radial-gradient(ellipse 35% 40% at 5%  92%, rgba(15,102,56,0.07) 0%, transparent 100%);
}

/* hero copy */
.eyebrow-row {
  display: flex; align-items: center; gap: clamp(10px, 2vw, 22px);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--blue-lt); flex-wrap: wrap;
  margin-bottom: clamp(24px, 4vh, 44px);
  opacity: 0;
}
.eyebrow-row .rule { width: 28px; height: 1px; background: var(--blue-lt); }
.eyebrow-row .led {
  display: inline-block; width: 7px; height: 7px;
  background: var(--green-lt); margin-right: 6px;
  box-shadow: 0 0 6px var(--green);
  vertical-align: 1px;
  animation: led-blink 2.4s ease-in-out infinite;
}
@keyframes led-blink {
  0%,100% { opacity: 1; box-shadow: 0 0 8px var(--green-lt); }
  50%      { opacity: 0.4; box-shadow: 0 0 2px var(--green); }
}
.eyebrow-row .live { color: var(--txt2); }

.brand {
  font-family: var(--sans);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  font-size: clamp(80px, 16vw, 196px);
  opacity: 0;
}
.brand-a { background: var(--g-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: block; }
.brand-p { color: var(--txt0); display: block; }

.hero-explainer {
  font-family: var(--sans);
  font-size: clamp(17px, 2.2vw, 24px);
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--txt1);
  margin-top: 18px;
  max-width: 34ch;
  border-top: 1px solid rgba(208,220,240,0.18);
  padding-top: 14px;
  opacity: 0;
}
.hero-explainer .accent { color: var(--txt0); }

.mirror {
  font-family: var(--mono);
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.6;
  color: var(--txt1);
  margin-top: clamp(16px, 2.5vh, 28px);
  max-width: 54ch;
  padding: 14px 18px 14px 20px;
  border-left: 2px solid;
  border-image: var(--g-brand) 1 0;
  background: linear-gradient(90deg, rgba(196,30,58,0.06) 0%, transparent 100%);
  opacity: 0;
}
.mirror::before { content: '> '; color: var(--red-lt); }
.mirror .em { color: var(--txt0); }
.cursor {
  display: inline-block; width: 8px; height: 1em;
  vertical-align: -2px; background: var(--red-lt);
  animation: cur-blink 1.1s step-end infinite;
}
@keyframes cur-blink { 0%,100%{opacity:1} 50%{opacity:0} }

.cta-row {
  margin-top: clamp(24px, 3.5vh, 40px);
  display: flex; gap: 12px; flex-wrap: wrap;
  opacity: 0;
}

.subject-tags {
  margin-top: clamp(20px, 3vh, 32px);
  display: flex; gap: 8px; flex-wrap: wrap;
  opacity: 0;
}
.stag {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 7px 14px; border: 1px solid;
}
.stag.r { color: var(--red-lt);   border-color: rgba(196,30,58,0.4);  background: rgba(196,30,58,0.08); }
.stag.b { color: var(--blue-lt);  border-color: rgba(21,89,163,0.4);  background: rgba(21,89,163,0.08); }
.stag.g { color: var(--green-lt); border-color: rgba(17,117,64,0.35); background: rgba(17,117,64,0.08); }