/* Index page - Pages/Index.cshtml.
   Hero band with the start-line lights, the AFD lockup, and the auto-scrolling driver
   carousel. The carousel restyles .driver-card; that component lives in
   components/driver-card.css. */

.hero { position: relative; overflow: hidden; }
.hero::before {
    content: ""; position: absolute; inset: -30% -10% 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(50% 55% at 50% 42%, color-mix(in srgb, var(--red) 26%, transparent), transparent 72%),
        radial-gradient(40% 50% at 8% 28%, color-mix(in srgb, var(--blue) 22%, transparent), transparent 72%),
        radial-gradient(40% 50% at 92% 30%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 72%);
}
.hero::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: repeating-linear-gradient(104deg,
        transparent 0 54px, color-mix(in srgb, var(--ink) 7%, transparent) 54px 56px);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 45%, transparent);
}
.hero-copy { position: relative; z-index: 1; padding-block: 2rem 3.5rem; text-align: center; }
.eyebrow {
    display: inline-flex; align-items: center; gap: .75rem; margin: 0;
    font-family: var(--font-display); font-size: .75rem; font-weight: 600;
    letter-spacing: .24em; text-transform: uppercase; color: var(--muted);
}
.eyebrow::before, .eyebrow::after { content: ""; width: 28px; height: 1px; background: var(--border); }
.hero-logo { width: min(420px, 76%); height: auto; margin: 1.25rem auto .25rem; display: block; }
.hero-title {
    margin-top: 1.25rem; font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.02;
    letter-spacing: -.02em; color: var(--ink);
}
.hero-title .accent { color: var(--red); text-shadow: 0 0 40px var(--pole-glow); }

/* F1 start gantry: five lights arm one by one, then go out. Runs once, on load. */
.startlights { display: flex; justify-content: center; gap: .45rem; margin: 0 0 1.5rem; }
/* Unlit = a dark housing with a dim red lens, so the resting state still reads as a gantry. */
.startlights span {
    width: 1.5rem; height: 1.5rem; border-radius: 1.5rem;
    background: color-mix(in srgb, var(--red) 22%, transparent);
    border: 1px solid color-mix(in srgb, var(--red) 35%, var(--border));
    box-shadow: inset 0 1px 3px rgb(0 0 0 / .35);
}
/* Each light is lit only while its animation runs (fill-mode none, so the dark base style
   applies before and after). Delay + duration are paired so all five go out together at 3.4s. */
@media (prefers-reduced-motion: no-preference) {
    .startlights span:nth-child(1) { animation: rlag-lit 3.05s linear .35s; }
    .startlights span:nth-child(2) { animation: rlag-lit 2.50s linear .90s; }
    .startlights span:nth-child(3) { animation: rlag-lit 1.95s linear 1.45s; }
    .startlights span:nth-child(4) { animation: rlag-lit 1.40s linear 2.00s; }
    .startlights span:nth-child(5) { animation: rlag-lit 0.85s linear 2.55s; }
}
@keyframes rlag-lit {
    from, to {
        background: var(--red);
        box-shadow: 0 0 18px var(--pole-glow), inset 0 0 0 2px color-mix(in srgb, #fff 22%, transparent);
    }
}
.hero-lede { margin: 1.25rem auto 0; max-width: 44rem; font-size: 1.1rem; color: var(--ink-soft); text-wrap: pretty; }

.hero-art { position: relative; margin-top: 1rem; max-width: 760px; margin-inline: auto; }
.hero-art img { display: block; width: 100%; height: auto; }

/* The American Formula Driver Development lockup. The artwork is black-on-white with no dark
   variant, and its checkered flag makes a blanket recolour impossible, so it keeps its own white
   plate and reads identically in both themes. The plate is white, not var(--surface). */
.afd-mark {
    margin: 0 0 1.75rem; display: inline-block; background: #fff;
    border: 1px solid var(--border); border-radius: .85rem; padding: .9rem 1.1rem;
    box-shadow: var(--shadow);
}
.afd-mark img { display: block; width: auto; height: 150px; }
@media (max-width: 34rem) { .afd-mark img { height: 116px; } }

/* Driver carousel - infinite auto-scroll (lives in the stats band).
   The track holds two identical copies of the roster; site.js advances scrollLeft slowly and
   wraps by one copy for a seamless loop. It pauses on hover, and the user can take over with the
   side buttons or by dragging. Edges are masked so cards fade in/out as if looping forever. */
.carousel { padding-block: 2rem; }
.carousel-title { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; margin: 0 0 1.1rem; color: var(--ink); }
.carousel-shell { position: relative; }
.carousel-viewport {
    overflow: hidden;
    padding: 20px 0; /* vertical room so a card's hover lift + shadow aren't clipped */
    touch-action: pan-y; /* let vertical touch scroll the page; JS handles horizontal drag */
    user-select: none;
    cursor: grab;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.carousel-viewport:active { cursor: grabbing; }
.carousel-track { display: flex; width: max-content; will-change: transform; }
.carousel-track > .driver-card { flex: 0 0 11.5rem; margin-right: 1.1rem; -webkit-user-drag: none; }
.carousel-track img { -webkit-user-drag: none; }
.carousel .driver-body { padding: .6rem .85rem .8rem; gap: .15rem; }
.carousel .driver-name { font-size: .95rem; }
.carousel .driver-meta { font-size: .74rem; }
.carousel .driver-series { -webkit-line-clamp: 1; font-size: .74rem; }
/* Keep the hover lift, but a shadow that fits the viewport's vertical padding (no clipping). */
.carousel a.driver-card:hover { box-shadow: var(--shadow); }
/* Side scroll buttons */
.carousel-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
    width: 2.6rem; height: 2.6rem; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface); color: var(--ink);
    box-shadow: var(--shadow); cursor: pointer; font-size: 1.4rem; line-height: 1;
    display: grid; place-items: center; transition: border-color .15s, color .15s;
}
.carousel-arrow:hover { border-color: var(--blue); color: var(--blue); }
.carousel-arrow:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.carousel-arrow.prev { left: -.4rem; }
.carousel-arrow.next { right: -.4rem; }


/* ---------- Sponsorship ask (under the hero) ---------- */
/* Copy on the left, a miniature of the Road-to-F1 grid on the right; stacks on narrow screens. */
/* Straight after the Road to F1 section, whose own bottom padding already gives the gap. */
.sponsor-cta-wrap { padding-top: 0; }
.sponsor-cta {
    display: flex; flex-wrap: wrap; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border); border-radius: .85rem; box-shadow: var(--shadow);
}
.sponsor-cta-copy { flex: 1 1 26rem; padding: clamp(20px, 3vw, 34px); display: flex; flex-direction: column; gap: 1rem; }
.sponsor-cta-kicker {
    margin: 0; font-family: var(--font-display); font-weight: 600; font-size: .75rem;
    letter-spacing: .24em; text-transform: uppercase; color: var(--muted);
}
.sponsor-cta .section-title { margin: 0; text-wrap: balance; }
.sponsor-cta-text { margin: 0; max-width: 34rem; color: var(--ink-soft); text-wrap: pretty; }
.sponsor-cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }

.sponsor-cta-art { flex: 1 1 20rem; min-height: 280px; display: flex; flex-direction: column; background: var(--track-bg); }
.sponsor-cta-rumble { height: 12px; background-image: repeating-linear-gradient(90deg, var(--red) 0 22px, var(--rumble-white) 22px 44px); }
.sponsor-cta-grid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 28px; }
.sponsor-cta-grid > div { display: flex; gap: 12px; }
.sponsor-cta-grid span {
    width: 88px; height: 46px; border: 2px solid var(--track-line); border-radius: 8px; background: var(--slot-fill);
    display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: .8rem; color: var(--ink);
}
.sponsor-cta-grid span.is-pole { border-color: var(--red); box-shadow: 0 0 0 3px var(--pole-glow); }
@media (max-width: 34rem) {
    .sponsor-cta-art { min-height: 200px; }
    .sponsor-cta-grid span { width: 64px; height: 36px; }
}