/* ==========================================================
   SCREENPEEK — Coming Soon
   1 Tokens/base · 2 Background · 3 Header/Hero · 4 Countdown
   5 Reels · 6 Film strip · 7 Features/Footer · 8 Animations
   9 Responsive · 10 Reduced motion
   ========================================================== */

/* ---------- 1. TOKENS & BASE ---------- */
:root {
  --bg: #050505; --bg2: #0b0b0b; --tx: #f5f5f5;
  --mute: rgba(255,255,255,.55);
  --ac: #ff4058; --ac2: #ff174f;
  --ease: cubic-bezier(.2,.8,.2,1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100svh; color: var(--tx); overflow-x: hidden;
  font-family: Inter, system-ui, sans-serif;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,40,70,.10), transparent 30%),
    radial-gradient(ellipse at 50% 110%, rgba(255,60,40,.18), transparent 50%),
    linear-gradient(var(--bg), var(--bg2));
}
a:focus-visible { outline: 2px solid var(--ac); outline-offset: 6px; border-radius: 4px; }

/* ---------- 2. BACKGROUND ---------- */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bg > * { position: absolute; }
.beam { width: 40vw; height: 170vh; top: -30vh; rotate: 25deg;
  background: linear-gradient(90deg, transparent, rgba(255,64,88,.07), transparent);
  animation: beam 14s ease-in-out infinite alternate; }               /* light beams */
.b1 { left: 5%; } .b2 { left: 60%; animation-delay: -7s; animation-direction: alternate-reverse; }
.fog { inset: 0;
  background:
    radial-gradient(ellipse 60% 30% at 20% 70%, rgba(255,255,255,.045), transparent),
    radial-gradient(ellipse 50% 25% at 80% 55%, rgba(255,60,60,.07), transparent);
  animation: fog 18s ease-in-out infinite alternate; }                /* soft fog */
.horizon { left: 0; right: 0; bottom: 0; height: 30vh;
  background: radial-gradient(ellipse 45% 70% at 50% 100%, rgba(255,23,79,.5), transparent 70%); }
.mountains { left: 0; right: 0; bottom: 0; height: 22vh; background: #020202;
  clip-path: polygon(0 100%, 0 55%, 12% 40%, 25% 62%, 38% 46%, 50% 22%, 62% 46%, 75% 56%, 88% 38%, 100% 56%, 100% 100%); }
.vignette { inset: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.85) 100%); }
.grain { inset: -50%; opacity: .07; animation: grain 1s steps(6) infinite;   /* film grain */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.particles span { position: fixed; bottom: -10px; border-radius: 50%; opacity: 0;
  animation: drift linear infinite; }                                    /* dots created in script.js */

/* ---------- 3. HEADER & HERO ---------- */
.page { position: relative; z-index: 2; min-height: 100svh; display: flex; flex-direction: column;
  align-items: center; padding: 26px 20px 22px; overflow-x: clip; }
.top { width: 100%; display: flex; flex-direction: column; align-items: center; }
.logo { margin-top: 30px; font: 700 clamp(40px, 5vw, 64px)/1 "Space Grotesk", sans-serif;
  letter-spacing: -.05em; color: #fff; text-decoration: none; }
.logo span { color: var(--ac); }
.nav { position: absolute; top: 26px; right: clamp(20px, 3vw, 48px); display: flex; gap: 14px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.nav span + span::before { content: "•"; margin-right: 14px; color: rgba(255,255,255,.35); }
.hero { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.eyebrow { display: flex; align-items: center; gap: 16px; margin-top: 26px;
  font-size: 12px; letter-spacing: .4em; text-transform: uppercase; color: var(--mute); }
.eyebrow::before, .eyebrow::after { content: ""; width: clamp(24px, 5vw, 60px); height: 1px; background: var(--ac); }
h1 { margin: 14px 0; font: 300 clamp(42px, 3vw + 34px, 92px)/1.05 "Space Grotesk", sans-serif; letter-spacing: -.05em; }
h1 em { font-style: normal; font-weight: 700; color: var(--ac); text-shadow: 0 0 40px rgba(255,64,88,.45); }
.lead { max-width: 600px; font-weight: 300; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: var(--mute); }

/* ---------- 4. COUNTDOWN ---------- */
.countdown { display: flex; gap: 14px; margin-top: 30px; }
.time-card { width: 96px; padding: 18px 0 14px; text-align: center; border-radius: 14px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.5); transition: transform .3s var(--ease), border-color .3s; }
.time-card:hover { transform: translateY(-4px); border-color: rgba(255,64,88,.5); }
.time-card b { display: block; font: 500 38px/1 "Space Grotesk", sans-serif; font-variant-numeric: tabular-nums; }
.time-card span { display: block; margin-top: 8px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.live { font: 700 clamp(26px, 4vw, 44px)/1 "Space Grotesk", sans-serif; letter-spacing: .3em; color: var(--ac); text-shadow: 0 0 30px rgba(255,64,88,.6); }

/* ---------- 5. FILM REELS ---------- */
.stage { position: relative; z-index: 1; width: 100%; margin-top: clamp(20px, 4vw, 60px); padding: clamp(50px, 7vw, 110px) 0; }
.reel { position: absolute; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, #4a3532, #1a1010 55%, #070404);
  box-shadow: inset 0 0 0 clamp(8px,1.2vw,18px) #150c0c, inset 0 0 0 clamp(10px,1.4vw,20px) rgba(255,64,88,.35),
              inset -30px -30px 90px rgba(255,40,70,.28), 0 0 90px rgba(255,40,70,.18);
  animation: spin 20s linear infinite; }                              /* reel rotation: change 20s */
.reel::before { content: ""; position: absolute; inset: 40%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #666, #1b1b1b 60%, #050505); box-shadow: 0 0 0 6px #100909, 0 0 30px rgba(255,64,88,.4); }
.reel i { position: absolute; inset: 0; margin: auto; width: 24%; height: 24%; border-radius: 50%; background: #030202;
  box-shadow: inset 0 0 20px #000, 0 0 0 3px rgba(120,80,80,.5), 0 0 12px rgba(255,64,88,.25);
  transform: rotate(calc(var(--i) * 60deg)) translateY(-135%); }
.reel-l { width: clamp(280px, 40vw, 680px); left: -17vw; top: -22vw; }
.reel-r { width: clamp(140px, 20vw, 340px); right: -8vw; top: -2vw; opacity: .55; filter: blur(1.5px); animation-duration: 26s; animation-direction: reverse; }

/* ---------- 6. FILM STRIP ---------- */
.film-strip { position: relative; display: flex; gap: 14px; width: 150vw; margin-left: -25vw; padding: 30px 14px;
  background: linear-gradient(#0c0c0c, #050505); box-shadow: 0 0 60px rgba(255,40,70,.28);
  animation: filmFloat 6s ease-in-out infinite;                        /* float: change 6s / tilt */
  -webkit-box-reflect: below 8px linear-gradient(transparent 70%, rgba(255,255,255,.18)); }
.film-strip::before, .film-strip::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; opacity: .75; /* sprocket holes */
  background: repeating-linear-gradient(90deg, transparent 0 8px, #d9d9d9 8px 22px, transparent 22px 30px); }
.film-strip::before { top: 9px; } .film-strip::after { bottom: 9px; }
.frame { position: relative; flex: 1; aspect-ratio: 1.75; overflow: hidden; border-radius: 3px;
  box-shadow: inset 0 0 28px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06); }
.frame::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%);   /* light sweep */
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.15), transparent 55%);
  animation: shine 5s ease-in-out infinite; }
.frame:nth-child(2)::after { animation-delay: .4s; } .frame:nth-child(3)::after { animation-delay: .8s; }
.frame:nth-child(4)::after { animation-delay: 1.2s; } .frame:nth-child(5)::after { animation-delay: 1.6s; }
.frame:nth-child(6)::after { animation-delay: 2s; } .frame:nth-child(7)::after { animation-delay: 2.4s; }
.frame:nth-child(8)::after { animation-delay: 2.8s; }
/* Abstract "movie stills" — swap for real artwork later */
.frame:nth-child(1) { background: /* action: fire + hero silhouette */
  radial-gradient(ellipse 12% 60% at 42% 92%, #050202 62%, transparent 64%), radial-gradient(circle at 75% 75%, rgba(255,140,40,.9), transparent 45%), linear-gradient(#1a0a05, #7a2a08 65%, #ff7a20); }
.frame:nth-child(2) { background: /* city at night */
  repeating-linear-gradient(90deg, #0a0c14 0 12px, #050505 12px 20px, #0d1020 20px 28px) bottom/100% 48% no-repeat, radial-gradient(circle at 70% 30%, rgba(255,64,140,.5), transparent 35%), linear-gradient(#05070f, #1a2040); }
.frame:nth-child(3) { background: /* character silhouette */
  radial-gradient(circle at 50% 36%, #050505 0 9%, transparent 9.5%), radial-gradient(ellipse 30% 32% at 50% 100%, #050505 96%, transparent 100%), radial-gradient(circle at 50% 40%, rgba(255,64,88,.6), #1a0508 65%); }
.frame:nth-child(4) { background: /* romantic sunset */
  radial-gradient(ellipse 9% 40% at 42% 100%, #0a0405 90%, transparent), radial-gradient(ellipse 9% 36% at 56% 100%, #0a0405 90%, transparent), linear-gradient(#3a1030, #ff5a3c 75%, #ffb066); }
.frame:nth-child(5) { background: /* sci-fi planet */
  radial-gradient(circle at 68% 42%, #ffd0a0 0 5%, #b04a78 8%, #2a1250 24%, transparent 26%), radial-gradient(circle at 20% 25%, #fff 0 1px, transparent 2px), radial-gradient(circle at 40% 70%, #fff 0 1px, transparent 2px), linear-gradient(#05030f, #1a0a3a); }
.frame:nth-child(6) { background: /* thriller: fog + light cone */
  radial-gradient(ellipse 8% 45% at 60% 100%, #030505 92%, transparent), linear-gradient(100deg, transparent 38%, rgba(200,230,255,.25) 50%, transparent 62%), linear-gradient(#0a1214, #1f3238); }
.frame:nth-child(7) { background: /* battlefield glow */
  radial-gradient(ellipse 10% 55% at 55% 95%, #050202 62%, transparent 64%), radial-gradient(circle at 45% 60%, rgba(255,90,30,.85), transparent 50%), linear-gradient(#150806, #4a1a0a); filter: hue-rotate(-12deg); }
.frame:nth-child(8) { background: /* dusk duo */
  radial-gradient(ellipse 8% 38% at 45% 100%, #050202 90%, transparent), radial-gradient(ellipse 8% 34% at 55% 100%, #050202 90%, transparent), linear-gradient(#2a0d20, #d94a4a 80%, #ffa060); filter: hue-rotate(15deg); }

/* ---------- 7. FEATURES, NOTICE, FOOTER ---------- */
.features { position: relative; z-index: 2; display: flex; margin-top: clamp(10px, 2vw, 30px); }
.feat { padding: 0 clamp(18px, 3.5vw, 54px); text-align: center; border-left: 1px solid rgba(255,255,255,.12); }
.feat:first-child { border-left: 0; }
.feat i { display: block; margin-bottom: 10px; font-style: normal; font-size: 26px; color: var(--ac); }
.feat span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; line-height: 1.6; color: var(--mute); }
.notice { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; margin-top: 28px; font-size: 13px; color: var(--mute); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ac2); box-shadow: 0 0 12px var(--ac2); animation: pulse 2s ease-in-out infinite; }
.foot { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: auto; padding-top: 40px;
  font-size: 10px; letter-spacing: .12em; color: var(--mute); text-align: center; }
.foot strong { font-weight: 500; letter-spacing: .3em; }

/* ---------- 8. ANIMATIONS (customise durations here) ---------- */
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }
.rv { opacity: 0; transform: translateY(20px); animation: reveal .8s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: var(--d, 0s); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes filmFloat { 0%, 100% { transform: rotate(3.5deg) translateY(0); } 50% { transform: rotate(3.5deg) translateY(-8px); } }
@keyframes shine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes pulse { 0%, 100% { opacity: .4; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes beam { to { translate: 8vw 0; } }
@keyframes fog { to { transform: translateX(5vw) scale(1.1); } }
@keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-4%,3%); } 40% { transform: translate(3%,-5%); } 60% { transform: translate(-5%,-2%); } 80% { transform: translate(4%,4%); } 100% { transform: translate(0,0); } }
@keyframes drift { 10% { opacity: .8; } 100% { opacity: 0; transform: translateY(-105vh); } }

/* ---------- 9. RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .reel-l { width: 36vw; } .reel-r { width: 18vw; }
  .film-strip { width: 170vw; margin-left: -35vw; }
  .time-card { width: 84px; } .time-card b { font-size: 32px; }
}
@media (max-width: 640px) {
  .nav { display: none; }
  .logo { margin-top: 8px; }
  .eyebrow { letter-spacing: .28em; font-size: 10px; }
  .countdown { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(300px, 100%); }
  .time-card { width: auto; }
  .stage { margin: -10px 0 -50px; padding: 60px 0; opacity: .55 !important; }   /* strip sits behind content */
  .reel-l { width: 62vw; left: -28vw; top: -30vw; } .reel-r { width: 30vw; right: -14vw; }
  .film-strip { width: 230vw; margin-left: -65vw; padding: 24px 10px; gap: 10px; }
  .frame { aspect-ratio: 2.2; }
  .features { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 0; width: 100%; max-width: 340px; }
  .feat { padding: 0 10px; } .feat:nth-child(odd) { border-left: 0; }
  .feat span { font-size: 10px; }
}

/* ---------- 10. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; scroll-behavior: auto !important; }
  .particles { display: none; }
}