:root { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; color: #302320; background: #fff; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
.ambient-background { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: radial-gradient(ellipse at 50% 47%, #fffdf9 0%, #fffaf3 30%, #f5e5d5 75%, #ecd1b5 100%); }
.light-rays { position: absolute; inset: 0; opacity: .68; mix-blend-mode: multiply; }
.light-rays canvas { display: block; width: 100%; height: 100%; }
.ambient-background::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.6) 25%, transparent 65%); }
[hidden] { display: none !important; }
.hero { position: relative; z-index: 1; mix-blend-mode: multiply; min-height: 100vh; min-height: 100svh; padding: max(32px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(42px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.logo-stage { position: relative; width: min(100%, 560px, 63svh); aspect-ratio: 3 / 2; margin-bottom: 22px; animation: logo-float 5.2s ease-in-out infinite; }
.logo-stage::after { content: ''; position: absolute; inset: 8% 4%; pointer-events: none; background: linear-gradient(112deg, transparent 34%, rgba(255,255,255,.7) 49%, transparent 64%); transform: translateX(-120%) skewX(-12deg); animation: logo-sheen 8s 1s ease-in-out infinite; mix-blend-mode: screen; }
.logo-static, .logo-canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
h1 { margin: 0; font-size: clamp(2.1rem, 5vw, 3rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.045em; color: #bf260a; background: linear-gradient(100deg,#9f1712 15%,#ed7608 45%,#9f1712 75%); background-size: 240% 100%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: title-colour 6s ease-in-out infinite; }
.launch-date { margin-top: 15px; color: #76635b; font-size: clamp(1rem,3vw,1.2rem); line-height: 1.5; letter-spacing: .065em; animation: arrive 1.1s .15s both, date-glow 4.8s 1.3s ease-in-out infinite; }
.countdown { display: grid; grid-template-columns: repeat(4,1fr); width: min(100%,440px); margin-top: 38px; animation: arrive 1.1s .35s both, counter-breathe 4s 1.5s ease-in-out infinite; }
.countdown-unit { display: flex; flex-direction: column; align-items: center; gap: 11px; position: relative; }
.countdown-unit + .countdown-unit::before { content: ''; position: absolute; left: 0; top: 7px; height: 30px; width: 1px; background: #eddcd2; }
.number { display: block; min-width: 2.2ch; font-size: clamp(2rem,6vw,3rem); line-height: 1; font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: -.04em; color: #402a20; }
.number.tick { animation: tick .42s ease-out; }
.unit-label { font-size: 12px; text-transform: uppercase; letter-spacing: .15em; color: #8d7265; }
@keyframes logo-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes title-colour { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tick { from { opacity: .35; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes logo-sheen { 0%,65%,100% { transform: translateX(-120%) skewX(-12deg); opacity: 0; } 72% { opacity: .75; } 86% { transform: translateX(120%) skewX(-12deg); opacity: 0; } }
@keyframes date-glow { 0%,100% { text-shadow: 0 0 0 rgba(224,106,28,0); } 50% { text-shadow: 0 0 14px rgba(224,106,28,.3); } }
@keyframes counter-breathe { 0%,100% { filter: drop-shadow(0 0 0 rgba(222,104,30,0)); } 50% { filter: drop-shadow(0 4px 15px rgba(222,104,30,.18)); } }
@media(max-width:420px) { .hero { padding-inline: 20px; } .logo-stage { margin-bottom: 25px; } .countdown { margin-top: 32px; } .unit-label { font-size: 11px; letter-spacing: .09em; } }
/* Countdown keeps its space until the script fills it in, so nothing jumps. */
.countdown.is-pending { visibility: hidden; animation: none; }
.countdown, .launch-date { -webkit-user-select: none; user-select: none; }
/* Phones held sideways and other short screens: tighter spacing so everything fits without scrolling. */
@media (max-height: 560px) and (orientation: landscape) { .hero { padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: max(14px, env(safe-area-inset-bottom)); } .logo-stage { width: min(100%, 52svh, 440px); margin-bottom: 8px; } h1 { font-size: 1.8rem; } .launch-date { margin-top: 6px; } .countdown { margin-top: 14px; } .number { font-size: 1.9rem; } .countdown-unit { gap: 6px; } }
@media (max-width: 340px) { .number { font-size: 1.75rem; } .unit-label { font-size: 10px; letter-spacing: .06em; } }
@media(prefers-reduced-motion:reduce) { .logo-stage,h1,.launch-date,.countdown,.number.tick,.logo-stage::after { animation: none; } }