.dust-overlay {
    background: url('data:image/svg+xml,%3Csvg width="100" height="100" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noise"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" /%3E%3C/filter%3E%3Crect width="100" height="100" filter="url(%23noise)" opacity="0.15"/%3E%3C/svg%3E');
    pointer-events: none;
}

.hero-clip {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

.text-stroke {
    -webkit-text-stroke: 2px rgba(255,255,255,0.1);
    color: transparent;
}

.stage-card:hover .stage-overlay {
    transform: translateY(0);
}

.timeline-line {
    background: linear-gradient(to bottom, transparent 0%, #B87333 20%, #B87333 80%, transparent 100%);
}

.glitch-text {
    position: relative;
}
.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.glitch-text::before {
    left: 2px;
    text-shadow: -1px 0 #DC2626;
    clip: rect(24px, 550px, 90px, 0);
    animation: glitch-anim-1 2s infinite linear alternate-reverse;
}
.glitch-text::after {
    left: -2px;
    text-shadow: -1px 0 #009543;
    clip: rect(85px, 550px, 140px, 0);
    animation: glitch-anim-2 2s infinite linear alternate-reverse;
}
@keyframes glitch-anim-1 {
    0% { clip: rect(20px, 9999px, 15px, 0); }
    100% { clip: rect(95px, 9999px, 100px, 0); }
}
@keyframes glitch-anim-2 {
    0% { clip: rect(125px, 9999px, 160px, 0); }
    100% { clip: rect(15px, 9999px, 60px, 0); }
}

.parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Honour roll table */
.honour-table tbody tr {
    border-bottom: 1px solid #292524;
    transition: background-color 0.2s;
}
.honour-table tbody tr:hover {
    background-color: rgba(184, 115, 51, 0.08);
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0c0a09; }
::-webkit-scrollbar-thumb { background: #B87333; border-radius: 4px; }

/* ===== Gravel & Glory theme extensions ===== */

/* Checkered flag strip */
.checker {
    height: 12px;
    background:
        repeating-conic-gradient(#F5F2EC 0% 25%, #0B0B0D 0% 50%) 0 0 / 24px 24px;
    opacity: 0.9;
}
.checker-fade {
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

/* Scanlines over hero media */
.scanlines::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0,0,0,0.18) 3px 4px);
    pointer-events: none;
}

/* Timing tower table */
.timing-table { border-collapse: collapse; width: 100%; }
.timing-table th {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #78716c;
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid #44403c;
}
.timing-table td {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    padding: 10px 14px;
    border-bottom: 1px solid #1c1917;
    white-space: nowrap;
}
.timing-table tbody tr { transition: background 0.15s; }
.timing-table tbody tr:hover { background: rgba(184,115,51,0.10); }
.timing-pos { color: #B87333; font-weight: 700; }
.timing-gap { color: #a8a29e; }
.timing-time { color: #F5F2EC; font-weight: 700; }
.row-dnf td { color: #78716c; }
.row-dnf .timing-pos { color: #E10600; }
.row-sr .timing-pos { color: #FF5A1F; }
.status-chip {
    font-size: 9px;
    letter-spacing: 0.15em;
    padding: 2px 6px;
    border: 1px solid currentColor;
    border-radius: 2px;
}

/* Signal glow for live elements */
.signal-glow { text-shadow: 0 0 18px rgba(255,90,31,0.55); }

/* 3D viewer */
.viewer-frame {
    position: relative;
    background:
        radial-gradient(ellipse at 50% 120%, rgba(184,115,51,0.25), transparent 60%),
        linear-gradient(#0B0B0D, #171512);
    border: 1px solid #292524;
    overflow: hidden;
}
.viewer-frame canvas { display: block; cursor: grab; }
.viewer-frame canvas:active { cursor: grabbing; }
.viewer-hint {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.3em;
    color: #78716c;
    text-transform: uppercase;
    pointer-events: none;
}

/* Year tab buttons */
.year-tab {
    font-family: 'Racing Sans One', cursive;
    font-size: 20px;
    padding: 10px 22px;
    border: 1px solid #292524;
    color: #78716c;
    transition: all 0.2s;
}
.year-tab:hover { border-color: #B87333; color: #D4A574; }
.year-tab.active {
    background: #B87333;
    border-color: #B87333;
    color: #0B0B0D;
}

/* ===== Vibrancy pass ===== */

/* Animated nav underline */
nav a.uppercase:not(.bg-arc-red):not(.px-4) {
    position: relative;
}
nav a.uppercase:not(.bg-arc-red):not(.px-4)::after {
    content: '';
    position: absolute;
    left: 0; right: 100%;
    bottom: -4px;
    height: 2px;
    background: linear-gradient(90deg, #B87333, #FF5A1F);
    transition: right 0.25s ease;
}
nav a.uppercase:not(.bg-arc-red):not(.px-4):hover::after { right: 0; }

/* Card lift & glow */
a.group, .driver-card, .bg-stone-950.border {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
a.group:hover, .driver-card:hover {
    box-shadow: 0 12px 40px -8px rgba(184, 115, 51, 0.25);
}

/* Image saturation boost */
img { transition: filter 0.3s ease; }
.group:hover img, .driver-card:hover img { filter: saturate(1.25) contrast(1.05); }

/* Pulsing copper accents */
@keyframes copperPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(184,115,51,0.5); }
    50% { box-shadow: 0 0 0 8px rgba(184,115,51,0); }
}
button.bg-copper, a.bg-copper { animation: copperPulse 2.4s infinite; }

/* Gradient shimmer on hero headings */
.font-racing span.text-transparent {
    background-size: 200% auto;
    animation: shimmer 4s linear infinite;
}
@keyframes shimmer {
    to { background-position: 200% center; }
}

/* Buttons micro-interactions */
button, a.px-8, a.px-4 { transition: transform 0.15s ease; }
button:active, a.px-8:active { transform: scale(0.97); }

/* Marquee links pop */
.marquee-track span { text-shadow: 0 0 12px rgba(220,38,38,0.4); }

/* Table row glow on hover */
.timing-table tbody tr:hover td:first-child {
    text-shadow: 0 0 10px rgba(184,115,51,0.8);
}

/* ===== Cinematic background video engine ===== */
html { background-color: #0c0a09; }
body.has-bg-video { background: transparent; }
body.has-bg-video > section:not(.hero-clip):not(.bg-window),
body.has-bg-video > footer,
body.has-bg-video > div.checker,
body.has-bg-video > div.bg-arc-red { background-color: #0c0a09; }

.bg-video-stack {
    position: fixed; inset: 0; z-index: -1; overflow: hidden;
    pointer-events: none;
}
.bg-video-stack video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0; transition: opacity 1.4s ease;
    filter: saturate(1.05) contrast(1.02);
}
.bg-video-stack video.on { opacity: 1; }
.bg-video-tint {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(12,10,9,0.55) 0%, rgba(12,10,9,0.35) 40%, rgba(12,10,9,0.72) 100%);
}

/* Full-height "moment" windows that reveal the fixed video behind */
.bg-window { background: transparent; position: relative; }
.bg-window .moment-card {
    display: inline-block;
    background: rgba(12,10,9,0.55);
    border: 1px solid rgba(184,115,51,0.25);
    backdrop-filter: blur(2px);
    padding: 1.5rem 2.5rem;
}
.bg-window .moment-card h3 { text-shadow: 0 4px 30px rgba(0,0,0,0.8); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .bg-video-stack video { display: none; }
    .bg-video-stack { background: url('videos/hero-dust.jpg') center/cover; }
}