/* =========================================================
   SPOT CORPORATION — Launch countdown gate
   Full-screen "coming soon" state, CEO-controlled (see
   js/countdown.js + the Countdown page in the portal). Same
   fixed-full-screen pattern as #age-gate in css/style.css, same
   design tokens (css/style.css :root) -- black ground, SPOT red,
   Anton display face -- kept in its own file since it's a whole
   feature, not a shared shell tweak (unlike app-polish.css).

   Background texture (assets/countdown-bg.jpg, the boot-print/SPOT
   emblem photo) lives on #countdown-gate's ::before, not on the
   element itself -- keeps it a separate, independently-animatable
   layer under the existing .cg-glow / .cg-box without adding any
   markup. The image only ever loads while the gate is actually
   shown: [hidden] sets display:none, and a display:none subtree's
   background-image is not fetched by any current browser, so a
   visitor never pays for it while the countdown is off (the normal
   case).
   ========================================================= */

#countdown-gate{
  position: fixed; inset: 0; z-index: 10000;
  background: var(--black);
  display: flex; align-items: center; justify-content: center;
  padding: max(28px, var(--sat, 0px)) 20px max(28px, var(--sab, 0px));
  overflow-y: auto; overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
#countdown-gate[hidden]{ display: none; }

#countdown-gate::before{
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: url('../assets/countdown-bg.jpg') 50% 50% / cover no-repeat;
  filter: brightness(.5) saturate(.9);
  animation: cg-bg-drift 60s ease-in-out infinite alternate;
}
/* Darkening/vignette so the texture reads as atmosphere behind the
   text, never competes with it -- strongest where .cg-box actually
   sits (center), lightest at the very top/bottom edges. */
#countdown-gate::after{
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 75% at 50% 45%, rgba(8,7,10,.35) 0%, rgba(8,7,10,.72) 70%, rgba(8,7,10,.88) 100%);
}
@keyframes cg-bg-drift{
  0%   { background-position: 50% 42%; }
  100% { background-position: 50% 58%; }
}
@media (prefers-reduced-motion: reduce){ #countdown-gate::before{ animation: none; } }

.cg-glow{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(560px 420px at 50% 38%, rgba(210,31,48,0.22), transparent 70%);
  animation: cg-pulse 5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .cg-glow{ animation: none; } }
@keyframes cg-pulse{
  0%, 100% { opacity: .7; }
  50% { opacity: 1; }
}

.cg-box{
  position: relative; z-index: 2;
  width: 100%; max-width: 480px;
  text-align: center;
}

/* Each piece of content settles in on its own beat instead of the
   whole block fading in at once -- same total motion budget, reads
   far more like a cinematic title card than a single UI reveal. */
.cg-logo, .cg-eyebrow, .cg-headline, .cg-subtitle:not([hidden]), .cg-timer, .cg-signup{
  opacity: 0; transform: translateY(10px);
  animation: cg-el-in .75s var(--ease-soft, cubic-bezier(.22,1,.36,1)) forwards;
}
.cg-logo{ animation-delay: .05s; }
.cg-eyebrow{ animation-delay: .16s; }
.cg-headline{ animation-delay: .26s; }
.cg-subtitle:not([hidden]){ animation-delay: .36s; }
.cg-timer{ animation-delay: .46s; }
.cg-signup{ animation-delay: .6s; }
@keyframes cg-el-in{ to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){
  .cg-logo, .cg-eyebrow, .cg-headline, .cg-subtitle:not([hidden]), .cg-timer, .cg-signup{
    opacity: 1; transform: none; animation: none;
  }
}

.cg-logo{
  width: 60px; margin: 0 auto 22px;
  animation-name: cg-el-in, cg-logo-breathe;
  animation-duration: .75s, 6s;
  animation-delay: .05s, 1.2s;
  animation-timing-function: var(--ease-soft, cubic-bezier(.22,1,.36,1)), ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards, none;
}
@keyframes cg-logo-breathe{ 0%, 100% { filter: brightness(1) drop-shadow(0 0 0 rgba(210,31,48,0)); } 50% { filter: brightness(1.15) drop-shadow(0 0 10px rgba(210,31,48,.25)); } }
@media (prefers-reduced-motion: reduce){ .cg-logo{ animation: none; opacity: 1; transform: none; } }

.cg-eyebrow{
  font-family: var(--f-grotesk); font-size: .68rem; font-weight: 600;
  letter-spacing: .32em; text-transform: uppercase; color: var(--bone-faint);
  margin-bottom: 14px;
}

.cg-headline{
  font-family: var(--f-display); text-transform: uppercase;
  font-size: clamp(2.2rem, 9vw, 3.6rem); line-height: 1.02;
  letter-spacing: .01em; color: var(--bone);
  text-shadow: 0 0 34px rgba(210,31,48,.45);
  margin-bottom: 12px; word-break: break-word;
}

.cg-subtitle{
  font-family: var(--f-grotesk); font-size: .82rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--bone-dim);
  margin-bottom: 8px;
}
.cg-subtitle[hidden]{ display: none; }

.cg-timer{
  display: flex; align-items: center; justify-content: center;
  gap: clamp(10px, 3vw, 22px);
  margin: 34px 0 40px;
}
.cg-unit{ display: flex; flex-direction: column; align-items: center; min-width: 52px; }
.cg-num{
  font-family: var(--f-display); font-variant-numeric: tabular-nums;
  font-size: clamp(1.7rem, 7vw, 2.7rem); line-height: 1;
  color: var(--bone);
  transition: transform .25s var(--ease-soft, cubic-bezier(.22,1,.36,1));
}
.cg-num.flip{ animation: cg-tick .35s var(--ease-soft, cubic-bezier(.22,1,.36,1)); }
@keyframes cg-tick{ 0%{ transform: translateY(-8px); opacity:.4; } 100%{ transform: translateY(0); opacity:1; } }
.cg-label{
  margin-top: 8px;
  font-family: var(--f-grotesk); font-size: .6rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--bone-faint);
}
.cg-sep{
  width: 1px; height: 30px; background: var(--line-strong);
  align-self: center; margin-top: -14px;
}

.cg-signup{ padding-top: 4px; border-top: 1px solid var(--line); }
.cg-signup-heading{
  font-family: var(--f-grotesk); font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim);
  margin: 24px 0 16px;
}
.cg-form{
  display: flex; gap: 10px; align-items: stretch;
  max-width: 380px; margin: 0 auto;
}
.cg-phone-field{
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 0 14px;
  background: var(--charcoal);
  transition: border-color .25s;
}
.cg-phone-field:focus-within{ border-color: var(--accent-bright); box-shadow: 0 0 0 3px rgba(210,31,48,.14); }
.cg-prefix{
  font-family: var(--f-grotesk); font-size: .85rem; font-weight: 600;
  color: var(--bone-dim); flex-shrink: 0;
}
.cg-phone-field input{
  flex: 1 1 auto; min-width: 0; width: 100%;
  background: transparent; border: none; outline: none;
  color: var(--bone); font-size: .95rem; letter-spacing: .02em;
  padding: 14px 0; font-variant-numeric: tabular-nums;
}
.cg-phone-field input::placeholder{ color: var(--bone-faint); }

.cg-submit{
  flex-shrink: 0;
  font-family: var(--f-grotesk); font-weight: 600;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bone); background: var(--accent-bright);
  padding: 0 22px; border-radius: 8px;
  box-shadow: 0 0 0 rgba(210,31,48,0);
  transition: background .25s, box-shadow .25s, transform .3s var(--ease-soft, cubic-bezier(.22,1,.36,1));
}
.cg-submit:hover{ background: var(--accent); box-shadow: 0 0 22px rgba(210,31,48,.5); transform: translateY(-1px); }
.cg-submit:active{ transform: translateY(0) scale(.97); box-shadow: 0 0 14px rgba(210,31,48,.4); }
.cg-submit:disabled{ opacity: .55; pointer-events: none; }

.cg-form-msg{
  min-height: 1.4em;
  margin-top: 14px;
  font-family: var(--f-grotesk); font-size: .72rem; letter-spacing: .03em;
  color: var(--bone-dim);
}
.cg-form-msg.error{ color: var(--accent-bright); }
.cg-form-msg.ok{ color: var(--bone); }

/* Released state: timer frozen at zero, headline swapped to the CEO's
   afterText -- signup stays available (matches the reference layout,
   which keeps its mailing-list block under "RELEASED!" too). */
#countdown-gate.cg-released .cg-headline{ text-shadow: 0 0 40px rgba(210,31,48,.6); }

@media (max-width: 380px){
  .cg-timer{ gap: 8px; }
  .cg-unit{ min-width: 44px; }
  .cg-form{ flex-direction: column; }
  .cg-submit{ padding: 14px 22px; }
}