/* ppuzzl.win — Sports Victory Gold */
:root {
    --night: #121212;
    --warm1: #1A1510;
    --warm2: #1E1A0E;
    --gold: #C9960C;
    --bright-gold: #F5D76E;
    --pale-gold: #FFFACD;
    --text: #D4CFC0;
    --muted: #8A8576;
    --red: #C41E3A;
    --white: #FAFAFA;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Source Sans 3', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--text); background: var(--night); overflow-x: hidden; }

.ticker-bar { position: fixed; top: 0; left: 0; right: 0; height: 16px; background: var(--gold); z-index: 100; overflow: hidden; transform: translateY(-100%); transition: transform 0.2s; }
.ticker-bar.on { transform: translateY(0); }
.ticker-content { display: flex; gap: 16px; white-space: nowrap; animation: tickerScroll 20s linear infinite; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 11px; color: var(--white); letter-spacing: 0.04em; text-transform: uppercase; line-height: 16px; }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

#hero { height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.diagonal-stripe { position: absolute; width: 200%; height: 200px; background: linear-gradient(90deg, var(--gold), transparent); transform: rotate(-45deg); top: 30%; left: -50%; opacity: 0; transition: opacity 0.5s; animation: stripePulse 3s infinite; }
.diagonal-stripe.on { opacity: 0.7; }
@keyframes stripePulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }

.hero-text { position: relative; z-index: 10; }
.hero-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-style: italic; font-size: 72px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bright-gold); transform: skewX(-4deg); opacity: 0; transition: opacity 0.3s, transform 0.3s; }
.hero-title.on { opacity: 1; }
.hero-title .letter { display: inline-block; opacity: 0; transform: translateX(40px); transition: opacity 0.2s, transform 0.2s; }
.hero-title .letter.on { opacity: 1; transform: translateX(0); }
.hero-sub { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 36px; color: var(--white); transform: scale(1.3); transition: transform 0.2s ease-out, opacity 0.2s; opacity: 0; }
.hero-sub.on { transform: scale(1); opacity: 1; }

.hero-slashes { position: absolute; top: 40%; right: 15%; }
.slash-marks { display: flex; gap: 8px; }
.slash { display: block; width: 3px; height: 60px; background: var(--gold); opacity: 0; transform: rotate(20deg); transition: opacity 0.15s; }
.slash.on { opacity: 0.25; }

.scroll-chevron { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); font-size: 24px; color: var(--gold); animation: chevBounce 1s infinite alternate; opacity: 0; transition: opacity 0.3s; }
.scroll-chevron.on { opacity: 1; }
@keyframes chevBounce { from { transform: translateX(-50%) translateY(0); } to { transform: translateX(-50%) translateY(8px); } }

.race-section { position: relative; min-height: 80vh; display: flex; align-items: center; padding: 80px 10%; overflow: hidden; }
.sec-left { background: var(--warm1); padding-left: 15%; }
.sec-right { background: var(--warm2); padding-left: 40%; }
.rank-watermark { position: absolute; top: 10%; left: 5%; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 140px; color: var(--gold); opacity: 0; transition: opacity 0.3s, transform 0.3s; transform: scale(0.6); }
.race-section.visible .rank-watermark { opacity: 0.1; transform: scale(1); }
.sec-right .rank-watermark { left: auto; right: 5%; }
.sec-content { position: relative; z-index: 5; max-width: 600px; opacity: 0; transform: translateX(-60px); transition: opacity 0.5s, transform 0.5s; }
.sec-right .sec-content { transform: translateX(60px); }
.race-section.visible .sec-content { opacity: 1; transform: translateX(0); }
.sec-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-style: italic; font-size: 48px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bright-gold); transform: skewX(-4deg); margin-bottom: 16px; }
.sec-text { margin-bottom: 12px; }

.podium-section { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gold-band { width: 0; height: 300px; background: linear-gradient(90deg, var(--gold), var(--bright-gold)); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: width 0.6s ease-out; transform: rotate(-1deg); position: relative; z-index: 5; }
.gold-band.on { width: 100vw; }
.victory-text { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-style: italic; font-size: 80px; color: var(--white); letter-spacing: 0.04em; text-transform: uppercase; opacity: 0; transition: opacity 0.3s; }
.victory-text.on { opacity: 1; }
.victory-underline { display: block; width: 0; height: 3px; background: var(--red); margin-top: 8px; transition: width 0.3s; }
.victory-underline.on { width: 200px; }
.rank-03 { position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 140px; color: var(--gold); opacity: 0.05; }
.confetti { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.confetti-piece { position: absolute; width: 6px; height: 6px; opacity: 0; transition: transform 1.5s ease-out, opacity 1s; }

.cooldown { padding: 80px 10%; text-align: center; }
.gold-rule { border: none; height: 1px; background: var(--gold); opacity: 0.3; margin: 24px auto; max-width: 400px; width: 0; transition: width 0.4s; }
.gold-rule.on { width: 400px; }
.cool-text { font-size: 18px; color: var(--text); max-width: 500px; margin: 24px auto; opacity: 0; transition: opacity 0.8s; }
.cool-text.on { opacity: 1; }
.cool-mark { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 0.08em; color: var(--muted); margin-top: 40px; }

@media (max-width: 768px) {
    .hero-title { font-size: 48px; }
    .sec-title { font-size: 32px; }
    .victory-text { font-size: 48px; }
    .sec-left, .sec-right { padding: 60px 8%; }
    .rank-watermark { font-size: 80px; }
}