:root {
  --sand: #efd19b;
  --aqua: #20e2e8;
  --deep-aqua: #0796a8;
  --ink: #061318;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #061318; }
body { font-family: "Montserrat", system-ui, sans-serif; color: white; }

.scene { position: relative; width: 100vw; height: 100svh; min-height: 520px; isolation: isolate; overflow: hidden; }
.bg {
  position: absolute; inset: -2.2%; z-index: -6;
  background: url('./assets/background.png') center center / cover no-repeat;
  transform: scale(1.035);
  filter: saturate(1.06) contrast(1.02) brightness(.68);
}
.cinematic-vignette {
  position: absolute; inset: 0; z-index: -5; pointer-events: none;
  background:
    radial-gradient(circle at 50% 40%, transparent 0 31%, rgba(3,10,12,.08) 58%, rgba(1,8,10,.63) 100%),
    linear-gradient(to bottom, rgba(0,13,20,.08) 0%, rgba(0,12,14,.06) 52%, rgba(1,9,11,.42) 100%);
}
.sun-glow {
  position: absolute; right: -8vw; top: -16vh; width: 46vw; height: 70vh; z-index: -4; pointer-events: none;
  background: radial-gradient(ellipse, rgba(255,219,143,.24), rgba(255,191,86,.08) 42%, transparent 72%);
  filter: blur(20px);
}
#sandCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }

.hero {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(18px, 2.4vw, 42px) 24px 18px;
  transform: translateY(-0.5vh);
}
.eyebrow-wrap { display: flex; align-items: center; gap: 15px; margin-bottom: clamp(10px, 1.7vh, 22px); }
.eyebrow-wrap h1 {
  margin: 0; color: #f3d8a3; font-family: "Anton", Impact, sans-serif;
  font-size: clamp(26px, 2.25vw, 46px); line-height: 1; letter-spacing: .04em; font-weight: 400;
  text-shadow: 0 4px 0 rgba(77,45,24,.58), 0 8px 20px rgba(0,0,0,.45);
}
.twig { color: #e7c786; opacity: .92; font-size: clamp(20px,1.8vw,34px); transform: rotate(-12deg); }
.twig.flipped { transform: rotate(168deg); }

.timer-stage {
  position: relative;
  width: min(84vw, 1320px);
  aspect-ratio: 1415 / 415;
  flex: 0 0 auto;
  filter: drop-shadow(0 24px 20px rgba(0,0,0,.42));
}
.panel-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; pointer-events: none; }
.timer-number {
  position: absolute; top: 46%; transform: translate(-50%, -50%);
  font-family: "Anton", Impact, sans-serif; font-size: clamp(78px, 7.35vw, 138px); line-height: .9; letter-spacing: .015em;
  color: #fff8e8;
  text-shadow: 0 5px 0 #382414, 0 8px 1px rgba(0,0,0,.4), 0 12px 18px rgba(0,0,0,.4);
  font-variant-numeric: tabular-nums;
}
.timer-number.hours { left: 15.8%; }
.timer-number.minutes { left: 49.9%; }
.timer-number.seconds { left: 84.2%; }

.launch-board {
  position: relative;
  width: min(650px, 56vw);
  aspect-ratio: 1418 / 449;
  margin-top: clamp(2px, .45vh, 7px);
  z-index: 3;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.40));
}
.launch-board-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}
.launch-copy {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(9px, .85vw, 16px);
  width: 80%;
  margin-top: 1.5%;
  white-space: nowrap;
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(16px, 1.55vw, 29px);
  line-height: 1;
  letter-spacing: .035em;
  text-align: center;
}
.launch-part {
  cursor: default;
  user-select: none;
  transition: color .20s ease, text-shadow .20s ease, transform .20s ease;
  transform: translateZ(0) scale(1);
  outline: none;
}
.launch-part:hover,
.launch-part:focus-visible {
  transform: scale(1.025);
}
.launch-part.is-blue {
  color: #20e2e8;
  text-shadow: 0 3px 0 #075762, 0 0 13px rgba(32,226,232,.26), 0 5px 10px rgba(0,0,0,.42);
}
.launch-part.is-white {
  color: #fff7e7;
  text-shadow: 0 3px 0 rgba(72,43,24,.72), 0 5px 10px rgba(0,0,0,.45);
}
.launch-copy.is-ended .launch-part {
  color: #20e2e8;
  text-shadow: 0 3px 0 #075762, 0 0 13px rgba(32,226,232,.26), 0 5px 10px rgba(0,0,0,.42);
}
.subline { margin: 14px 0 0; font-size: clamp(10px, .84vw, 15px); letter-spacing: .22em; font-weight: 900; text-shadow: 0 3px 9px #000; opacity: .94; }

.corner { position: absolute; bottom: -22px; width: 31vw; height: 23vh; z-index: 1; pointer-events: none; filter: blur(.2px); opacity: .7; }
.corner-left { left: -8vw; background: radial-gradient(ellipse at bottom left, rgba(0,23,8,.65), transparent 68%); }
.corner-right { right: -8vw; background: radial-gradient(ellipse at bottom right, rgba(0,24,10,.58), transparent 68%); }

@media (max-width: 900px) {
  .hero { justify-content: center; transform: translateY(0); }
  .logo { width: min(84vw, 620px); }
  .timer-stage { width: min(90vw, 1120px); }
  .timer-number { font-size: clamp(54px, 8.2vw, 98px); }
  .launch-board { width: min(650px, 66vw); margin-top: 2px; }
}

@media (max-width: 620px) {
  .scene { min-height: 600px; }
  .hero { padding-inline: 8px; }
  .logo { width: 94vw; }
  .eyebrow-wrap { gap: 6px; margin-top: 2px; }
  .eyebrow-wrap h1 { font-size: clamp(20px, 6.2vw, 30px); }
  .twig { display: none; }
  .timer-stage { width: 106vw; max-height: none; }
  .timer-number { font-size: clamp(43px, 10.8vw, 70px); top: 46%; }
  .launch-board { width: 82vw; margin-top: 1px; }
  .launch-copy { width: 82%; gap: 5px; font-size: clamp(11px, 3.55vw, 17px); }
  .subline { text-align: center; font-size: 8px; max-width: 85vw; line-height: 1.5; }
}



.social-footer {
  position: absolute;
  right: clamp(14px, 1.35vw, 26px);
  bottom: clamp(16px, 2.2vh, 28px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(7px, .65vh, 10px);
}
.social-footer a {
  display: grid;
  place-items: center;
  width: clamp(27px, 2vw, 36px);
  height: clamp(27px, 2vw, 36px);
  border-radius: 50%;
  transform: translateZ(0) scale(1);
  transform-origin: center;
  transition: transform .18s ease, filter .18s ease;
  filter: drop-shadow(0 4px 7px rgba(0,0,0,.40));
}
.social-footer a:hover {
  transform: scale(1.18);
  filter: drop-shadow(0 7px 11px rgba(0,0,0,.54)) brightness(1.08);
}
.social-footer a:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 3px;
  transform: scale(1.12);
}
.social-footer img { width: 100%; height: 100%; object-fit: contain; display: block; }

@media (max-height: 760px) and (min-width: 621px) {
  .hero { transform: translateY(-1.5vh); }
  .social-footer { right: 12px; bottom: 12px; gap: 6px; }
  .social-footer a { width: 28px; height: 28px; }
}
@media (max-width: 900px) {
  .timer-number { font-size: clamp(60px, 8.8vw, 108px); }
  .launch-board { width: min(650px, 66vw); }
}
@media (max-width: 620px) {
  .social-footer { right: 9px; bottom: 10px; gap: 6px; }
  .social-footer a { width: 27px; height: 27px; }
  .launch-board { width: 82vw; }
  .launch-copy { width: 82%; gap: 5px; font-size: clamp(11px, 3.55vw, 17px); }
  .timer-number { font-size: clamp(47px, 11.6vw, 76px); }
}