/* ================================================================ COUNTDOWN — All phases, overlays, and animations Phase classes are applied to : (none) = TRADING > 60 s .cd-warning = WARNING 60 s – 31 s .cd-imminent = IMMINENT 30 s – 11 s .cd-lockout = LOCKOUT 10 s – 6 s .cd-final = FINAL 5 s – 1 s .cd-reveal = REVEAL T=0 flash .cd-resolution = RESOLUTION summary ================================================================ */ /* ===== Countdown Widget (header) ===== */ .cd-widget { display: flex; align-items: baseline; gap: 8px; transition: transform 0.3s ease; } .cd-label { font-family: var(--font-body); font-size: 16px; color: var(--green-dim); letter-spacing: 1px; } .cd-val { font-family: var(--font-pixel); font-size: 14px; color: var(--green); text-shadow: 0 0 8px var(--green); min-width: 52px; text-align: right; transition: color 0.3s, font-size 0.3s, text-shadow 0.3s; } /* WARNING phase: pulse green */ body.cd-warning .cd-widget { animation: widget-pulse-w 1s ease-in-out infinite; } body.cd-warning .cd-val { font-size: 16px; color: var(--yellow); text-shadow: 0 0 12px var(--yellow); } @keyframes widget-pulse-w { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } /* IMMINENT phase: faster pulse, red */ body.cd-imminent .cd-widget { animation: widget-pulse-i 0.5s ease-in-out infinite; } body.cd-imminent .cd-val { font-size: 18px; color: var(--red); text-shadow: 0 0 16px var(--red); } @keyframes widget-pulse-i { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } /* Hide widget during takeover phases */ body.cd-lockout .cd-widget, body.cd-final .cd-widget, body.cd-reveal .cd-widget, body.cd-resolution .cd-widget { visibility: hidden; } /* ===== Imminent Banner ===== */ .imminent-banner { position: sticky; top: var(--hdr-height); z-index: 150; width: 100%; padding: 7px 12px; text-align: center; font-family: var(--font-pixel); font-size: 10px; color: var(--red); background: var(--black); border-bottom: 2px solid var(--red); letter-spacing: 3px; animation: imminent-flash 0.4s step-start infinite; } @keyframes imminent-flash { 0%, 59% { opacity: 1; } 60%, 100% { opacity: 0.55; } } body.reduce-motion .imminent-banner { animation: none; } /* ===== Full-screen Countdown Takeover ===== */ .cd-takeover { position: fixed; inset: 0; z-index: 600; background: var(--black); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; } /* LOCKOUT phase: huge centered number */ .cd-big-wrap { display: flex; align-items: center; justify-content: center; transition: all 0.4s ease; } body.cd-lockout .cd-big { font-family: var(--font-pixel); font-size: clamp(100px, 28vw, 220px); color: var(--green); text-shadow: 0 0 40px var(--green), 0 0 80px var(--green); line-height: 1; animation: lockout-glow 0.6s ease-in-out infinite; } @keyframes lockout-glow { 0%, 100% { text-shadow: 0 0 40px var(--green), 0 0 80px var(--green); } 50% { text-shadow: 0 0 80px var(--green), 0 0 160px var(--green), 0 0 240px rgba(51,255,51,0.4); } } /* FINAL phase: number shrinks to top, final section appears */ body.cd-final .cd-takeover { flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 40px; } body.cd-final .cd-big { font-family: var(--font-pixel); font-size: clamp(20px, 7vw, 56px); color: var(--green); text-shadow: 0 0 12px var(--green); animation: none; } /* Final section: light + label */ .cd-final-section { display: flex; flex-direction: column; align-items: center; gap: 28px; margin-top: clamp(20px, 8vh, 80px); } /* The blinking light — rate controlled by JS via inline style */ .cd-light { width: clamp(60px, 16vw, 130px); height: clamp(60px, 16vw, 130px); border-radius: 50%; background: var(--green); box-shadow: 0 0 40px var(--green), 0 0 80px var(--green), 0 0 120px rgba(51,255,51,0.5); /* opacity toggled by JS */ opacity: 1; will-change: opacity; } .cd-final-label { font-family: var(--font-pixel); font-size: clamp(10px, 3.2vw, 26px); color: var(--green); text-shadow: 0 0 16px var(--green); letter-spacing: 4px; text-align: center; animation: final-label-pulse 0.4s ease-in-out infinite; } @keyframes final-label-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } body.reduce-motion .cd-final-label { animation: none; } /* ===== Number Reveal Overlay (T=0) ===== */ .reveal-overlay { position: fixed; inset: 0; z-index: 700; background: var(--black); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; animation: reveal-flash-bg 0.15s ease-out; } @keyframes reveal-flash-bg { 0% { background: #33FF33; } 100% { background: var(--black); } } .reveal-label { font-family: var(--font-pixel); font-size: clamp(10px, 3vw, 22px); color: var(--cyan); letter-spacing: 5px; } .reveal-number { font-family: var(--font-pixel); /* ~25vh on most screens */ font-size: clamp(80px, 25vw, 26vh); color: var(--green); text-shadow: 0 0 60px var(--green), 0 0 120px var(--green); line-height: 1; animation: reveal-num-pop 0.4s ease-out, reveal-num-glow 0.5s 0.4s ease-in-out 4 alternate; } @keyframes reveal-num-pop { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } } @keyframes reveal-num-glow { from { text-shadow: 0 0 60px var(--green), 0 0 120px var(--green); } to { text-shadow: 0 0 100px var(--green), 0 0 200px var(--green), 0 0 300px rgba(51,255,51,0.4); } } body.reduce-motion .reveal-number { animation: none; } /* ===== Resolution Overlay ===== */ .resolution-overlay { position: fixed; inset: 0; z-index: 700; background: rgba(0, 0, 0, 0.96); display: flex; align-items: center; justify-content: center; } .resolution-box { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; padding: 36px 40px; border: 2px solid var(--green); box-shadow: 0 0 30px rgba(51,255,51,0.2); max-width: 500px; width: 90vw; animation: res-slide-in 0.3s ease-out; } @keyframes res-slide-in { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .resolution-title { font-family: var(--font-pixel); font-size: clamp(10px, 2.5vw, 18px); color: var(--yellow); letter-spacing: 3px; } .resolution-numrow { font-size: 22px; color: var(--green); letter-spacing: 1px; } .res-num { font-family: var(--font-pixel); font-size: clamp(28px, 8vw, 56px); color: var(--green); text-shadow: 0 0 24px var(--green); display: block; margin-top: 8px; } .resolution-pnl { display: flex; gap: 36px; flex-wrap: wrap; justify-content: center; font-size: 22px; } .res-won { color: var(--green); } .res-lost { color: var(--red); } .resolution-reopen { font-size: 20px; color: var(--cyan); animation: blink-1hz 1s step-start infinite; } body.reduce-motion .resolution-reopen { animation: none; }