/* * flat.css — Flat-racing cinematic experience. * * Layered ON TOP of experience.css (which provides the base screen * grid, parade, leaderboard, reveal). This file only adds: * - .page-experience--flat scope (subtle palette tweaks) * - .flat-band-pill / .flat-band-subtitle (intro chrome) * - .flat-stalls (gate graphic at race start) * - .flat-photo-finish (finish-line freeze overlay) * - .page-experience--sprint / --mile / --stayer hooks for any * band-specific tuning we want to add later * * Keep selectors prefixed with .flat- or .page-experience--flat so * nothing here can leak into the jumps cinematic at /cinematic/. */ /* ── Band pill in the intro kicker ──────────────────────────── */ .flat-band-pill { display: inline-flex; align-items: center; margin-left: 10px; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; border: 1px solid currentColor; } .flat-band-pill--sprint { color: #ff8a5c; background: rgba(255, 138, 92, 0.12); } .flat-band-pill--mile { color: #f5d76e; background: rgba(245, 215, 110, 0.12); } .flat-band-pill--stayer { color: #7eb8e8; background: rgba(126, 184, 232, 0.12); } .flat-band-subtitle { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: rgba(240, 235, 224, 0.55); margin: -4px 0 18px; font-style: italic; } .page-experience--sprint .flat-band-subtitle { color: rgba(255, 138, 92, 0.75); } .page-experience--mile .flat-band-subtitle { color: rgba(245, 215, 110, 0.75); } .page-experience--stayer .flat-band-subtitle { color: rgba(126, 184, 232, 0.75); } /* ── Subtle daylight tint on the flat intro background ──────── */ .page-experience--flat #screen-intro::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(126, 184, 232, 0.06), transparent 60%); z-index: -1; } /* ══════════════════════════════════════════════════════════════ STALLS — gate graphic at race start ══════════════════════════════════════════════════════════════ Two horizontal halves cover the upper + lower track strip; on gate-open they translate apart with a flash + "BANG" subtitle. The flat.js engine adds .is-opening at t=0 of the race phase and .is-hidden once the gates have left the viewport. */ .flat-stalls { position: absolute; inset: 0; pointer-events: none; z-index: 8; opacity: 1; transition: opacity 0.4s ease; } .flat-stalls.is-hidden { opacity: 0; pointer-events: none; } .flat-stalls__top, .flat-stalls__bottom { position: absolute; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, #1c2a44 0%, #0f1828 100%); border-bottom: 4px solid var(--c-gold, #D4AF37); box-shadow: inset 0 -2px 0 rgba(212, 175, 55, 0.25), 0 12px 30px rgba(0, 0, 0, 0.6); background-image: repeating-linear-gradient( to right, rgba(212, 175, 55, 0.10) 0, rgba(212, 175, 55, 0.10) 2px, transparent 2px, transparent 56px ), linear-gradient(180deg, #1c2a44 0%, #0f1828 100%); transform: translateY(0); transition: transform 0.6s cubic-bezier(0.6, 0, 0.2, 1), opacity 0.4s ease 0.2s; will-change: transform; } .flat-stalls__top { top: 0; border-bottom: 4px solid var(--c-gold, #D4AF37); } .flat-stalls__bottom { bottom: 0; border-top: 4px solid var(--c-gold, #D4AF37); border-bottom: none; background-image: repeating-linear-gradient( to right, rgba(212, 175, 55, 0.10) 0, rgba(212, 175, 55, 0.10) 2px, transparent 2px, transparent 56px ), linear-gradient(0deg, #1c2a44 0%, #0f1828 100%); } .flat-stalls.is-opening .flat-stalls__top { transform: translateY(-110%); } .flat-stalls.is-opening .flat-stalls__bottom { transform: translateY(110%); } .flat-stalls__bang { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.5); font-family: 'Playfair Display', Georgia, serif; font-size: clamp(72px, 14vw, 180px); font-weight: 900; font-style: italic; letter-spacing: 0.08em; color: var(--c-gold-lt, #F5E49A); text-shadow: 0 0 24px rgba(212, 175, 55, 0.85), 0 0 60px rgba(212, 175, 55, 0.45); opacity: 0; pointer-events: none; } .flat-stalls.is-opening .flat-stalls__bang { animation: flatStallsBang 0.55s cubic-bezier(0.2, 1.4, 0.3, 1) 0.05s both; } @keyframes flatStallsBang { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } 35% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 85% { opacity: 1; transform: translate(-50%, -50%) scale(1.0); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.0); } } /* ══════════════════════════════════════════════════════════════ PHOTO FINISH — overlay at progress = 1.0 for the freeze frame ══════════════════════════════════════════════════════════════ */ .flat-photo-finish { position: absolute; inset: 0; pointer-events: none; z-index: 9; opacity: 0; transition: opacity 0.18s ease-out; } .flat-photo-finish.is-active { opacity: 1; } .flat-photo-finish__flash { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.85); opacity: 0; } .flat-photo-finish.is-active .flat-photo-finish__flash { animation: flatPhotoFlash 0.22s ease-out forwards; } @keyframes flatPhotoFlash { 0% { opacity: 0; } 20% { opacity: 0.95;} 100% { opacity: 0; } } .flat-photo-finish__label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.85); font-family: 'Playfair Display', Georgia, serif; font-size: clamp(46px, 9vw, 110px); font-weight: 900; font-style: italic; letter-spacing: 0.06em; color: var(--c-gold-lt, #F5E49A); text-shadow: 0 0 16px rgba(0, 0, 0, 0.8), 0 0 36px rgba(212, 175, 55, 0.45); opacity: 0; } .flat-photo-finish.is-active .flat-photo-finish__label { animation: flatPhotoLabelIn 0.45s cubic-bezier(0.2, 0.9, 0.25, 1) 0.18s forwards; } @keyframes flatPhotoLabelIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1.0); } } /* ── Reduced motion: no flash, no transforms — just stay clear ── */ @media (prefers-reduced-motion: reduce) { .flat-stalls, .flat-photo-finish { display: none; } }