:root {
  --display:"Rampart One", Georgia, serif;
  --count:"Bitcount Grid Single", ui-monospace, monospace;
  --label:"Special Elite", ui-monospace, monospace;
  --navy:#061634;
  --cream:#fff4d2;
  --red:#d92f3d;
  --blue:#1d5fbf;
  --gold:#f7c84b;
}

body.july-fourth { overflow:hidden; }

#audio {
  position:absolute;
  right:14px;
  bottom:44px;
  z-index:20;
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 14px;
  border:2px solid rgba(255,244,210,.76);
  border-radius:999px;
  background:rgba(6,18,42,.64);
  box-shadow:0 0 18px rgba(247,200,75,.34);
  backdrop-filter:blur(4px);
}

#audioBtn {
  cursor:pointer;
  border:0;
  padding:0;
  color:var(--cream);
  background:none;
  font:400 clamp(14px,2vw,20px)/1 var(--label);
  letter-spacing:0;
}

#audioBtn:hover { color:#fff; }
#vol { width:clamp(70px,15vw,130px); accent-color:var(--red); cursor:pointer; }
#audio.no-volume-control #vol { display:none; }
@media (hover:none) and (pointer:coarse) {
  #vol { display:none; }
}

#independenceStage {
  position:relative;
  min-height:100dvh;
  overflow:hidden;
  isolation:isolate;
  background:var(--navy);
}

.town-scene,
.town-scene img,
#fireworks,
.horizon-cover {
  position:absolute;
  inset:0;
}

.town-scene { z-index:1; }
.town-scene img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  filter:saturate(1.08) contrast(1.03);
}

#fireworks {
  z-index:2;
  pointer-events:none;
  overflow:hidden;
  mix-blend-mode:screen;
}

.horizon-cover {
  z-index:3;
  pointer-events:none;
  background:
    linear-gradient(180deg, transparent 0 42%, rgba(6,16,37,.12) 48%, rgba(6,16,37,.38) 54%, transparent 64%);
  opacity:.75;
}

.countdown-panel {
  position:relative;
  z-index:5;
  width:min(920px, calc(100% - 32px));
  min-height:100dvh;
  margin:0 auto;
  padding:86px 0 54px;
  display:grid;
  align-content:start;
  justify-items:center;
  text-align:center;
  color:var(--cream);
  text-shadow:0 3px 16px rgba(0,0,0,.82), 0 0 30px rgba(10,28,62,.72);
}

.kicker {
  margin-top:clamp(18px,4vh,38px);
  padding:8px 18px 7px;
  border:2px solid rgba(255,244,210,.82);
  border-radius:999px;
  color:var(--cream);
  background:linear-gradient(90deg, rgba(217,47,61,.78), rgba(13,59,126,.78));
  font:400 clamp(16px,2.2vw,24px)/1 var(--label);
  letter-spacing:0;
  box-shadow:0 10px 28px rgba(0,0,0,.24);
}

h1 {
  margin-top:14px;
  font:400 clamp(56px,10vw,132px)/.9 var(--display);
  letter-spacing:0;
  color:var(--cream);
  text-wrap:balance;
}

#countdown {
  width:min(840px,100%);
  margin-top:clamp(18px,4vh,44px);
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:10px;
}

.time-cell {
  position:relative;
  min-height:118px;
  display:grid;
  place-items:center;
  padding:15px 8px 13px;
  border:3px solid rgba(255,244,210,.86);
  border-radius:8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04)),
    linear-gradient(135deg, rgba(13,59,126,.82), rgba(6,20,52,.82) 52%, rgba(217,47,61,.78));
  box-shadow:
    0 12px 28px rgba(0,0,0,.3),
    inset 0 0 0 3px rgba(255,255,255,.12),
    inset 0 -12px 24px rgba(0,0,0,.2);
}

.time-cell::before {
  content:"";
  position:absolute;
  inset:7px;
  border:1px dashed rgba(255,244,210,.42);
  border-radius:5px;
  pointer-events:none;
}

.time-cell b {
  font:400 clamp(40px,6.5vw,78px)/.9 var(--count);
  color:#fff;
}

.time-cell span {
  font:400 clamp(12px,1.8vw,18px)/1 var(--label);
  color:var(--gold);
  text-transform:uppercase;
}

.rocket {
  --x:50%;
  --delay:0s;
  position:absolute;
  left:var(--x);
  top:51%;
  width:3px;
  height:90px;
  border-radius:999px;
  opacity:0;
  background:linear-gradient(0deg, transparent, rgba(255,244,210,.95), transparent);
  filter:drop-shadow(0 0 8px rgba(255,255,255,.9));
  transform-origin:50% 100%;
  animation:rocketRise 4.8s var(--delay) infinite cubic-bezier(.22,.62,.18,1);
}

.r1 { --x:28%; --delay:.25s; --tilt:-8deg; --rise:-31vh; }
.r2 { --x:56%; --delay:1.8s; --tilt:5deg; --rise:-38vh; }
.r3 { --x:78%; --delay:3.15s; --tilt:9deg; --rise:-28vh; }

.burst,
.sparkle {
  --x:50%;
  --y:28%;
  --delay:0s;
  --size:10px;
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  opacity:0;
  transform:translate(-50%,-50%) scale(.05);
  background:currentColor;
  box-shadow:
    -8px -154px 0 -2px currentColor,
    31px -139px 0 -1px currentColor,
    76px -116px 0 -2px currentColor,
    126px -92px 0 -1px currentColor,
    151px -48px 0 -3px currentColor,
    139px 8px 0 -2px currentColor,
    117px 58px 0 -1px currentColor,
    84px 103px 0 -2px currentColor,
    36px 139px 0 -3px currentColor,
    -18px 128px 0 -1px currentColor,
    -63px 113px 0 -3px currentColor,
    -111px 82px 0 -1px currentColor,
    -146px 31px 0 -2px currentColor,
    -132px -22px 0 -3px currentColor,
    -104px -74px 0 -1px currentColor,
    -58px -123px 0 -2px currentColor,
    9px -102px 0 -4px currentColor,
    52px -83px 0 -3px currentColor,
    96px -39px 0 -4px currentColor,
    88px 26px 0 -3px currentColor,
    46px 75px 0 -4px currentColor,
    -5px 91px 0 -3px currentColor,
    -54px 74px 0 -4px currentColor,
    -91px 24px 0 -3px currentColor,
    -79px -31px 0 -4px currentColor,
    -38px -86px 0 -3px currentColor,
    22px -48px 0 -4px currentColor,
    55px -9px 0 -4px currentColor,
    25px 39px 0 -4px currentColor,
    -34px 31px 0 -4px currentColor,
    -47px -17px 0 -4px currentColor;
  filter:
    drop-shadow(0 0 8px currentColor)
    drop-shadow(0 0 22px currentColor)
    drop-shadow(0 0 36px currentColor);
  animation:burstBloom 5.2s var(--delay) infinite cubic-bezier(.12,.68,.2,1);
}

.burst::before,
.burst::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  opacity:0;
  pointer-events:none;
}

.burst::before {
  width:5px;
  height:5px;
  background:currentColor;
  box-shadow:
    -19px -118px 0 -2px currentColor,
    18px -111px 0 -2px currentColor,
    64px -94px 0 -2px currentColor,
    105px -55px 0 -2px currentColor,
    112px -8px 0 -3px currentColor,
    91px 42px 0 -2px currentColor,
    57px 88px 0 -3px currentColor,
    7px 112px 0 -2px currentColor,
    -41px 94px 0 -3px currentColor,
    -86px 58px 0 -2px currentColor,
    -116px 10px 0 -3px currentColor,
    -94px -41px 0 -2px currentColor,
    -49px -91px 0 -3px currentColor,
    33px -61px 0 -3px currentColor,
    67px 13px 0 -3px currentColor,
    -11px 68px 0 -3px currentColor,
    -69px -7px 0 -3px currentColor;
  filter:drop-shadow(0 0 12px currentColor);
  animation:secondarySpray 5.2s var(--delay) infinite ease-out;
}

.burst::after {
  width:18px;
  height:18px;
  border:2px solid currentColor;
  box-shadow:0 0 24px currentColor, inset 0 0 18px currentColor;
  animation:smokeRing 5.2s var(--delay) infinite ease-out;
}

.b1 { --x:24%; --y:24%; --delay:-1.15s; color:#2f8cff; }
.b2 { --x:54%; --y:15%; --delay:-3.05s; color:#ff3349; }
.b3 { --x:80%; --y:25%; --delay:-.25s; color:#f7c84b; }
.b4 { --x:40%; --y:32%; --delay:-4.1s; color:#20d872; }
.b5 { --x:68%; --y:20%; --delay:-2.2s; color:#9d6cff; }

.sparkle {
  width:4px;
  height:4px;
  box-shadow:
    -5px -62px 0 -2px currentColor,
    31px -46px 0 -2px currentColor,
    55px -9px 0 -2px currentColor,
    43px 35px 0 -2px currentColor,
    2px 57px 0 -2px currentColor,
    -39px 39px 0 -2px currentColor,
    -58px -6px 0 -2px currentColor,
    -31px -49px 0 -2px currentColor,
    16px -29px 0 -2px currentColor,
    28px 11px 0 -2px currentColor,
    -11px 31px 0 -2px currentColor,
    -32px -14px 0 -2px currentColor;
  animation-duration:4.2s;
}

.s1 { --x:18%; --y:31%; --delay:-.65s; color:#fff16d; }
.s2 { --x:88%; --y:16%; --delay:-2.75s; color:#ffd95b; }
.s3 { --x:49%; --y:24%; --delay:-3.55s; color:#fffdf1; }

@keyframes rocketRise {
  0%, 10% { opacity:0; transform:translate(-50%,0) rotate(var(--tilt,0deg)) scaleY(.3); }
  18% { opacity:.95; }
  44% { opacity:.75; transform:translate(-50%, var(--rise,-32vh)) rotate(var(--tilt,0deg)) scaleY(1); }
  52%, 100% { opacity:0; transform:translate(-50%, var(--rise,-32vh)) rotate(var(--tilt,0deg)) scaleY(.45); }
}

@keyframes burstBloom {
  0%, 20% { opacity:0; transform:translate(-50%,-50%) scale(.04) rotate(-7deg); }
  27% { opacity:1; transform:translate(-50%,-50%) scale(.42) rotate(2deg); }
  50% { opacity:1; transform:translate(-50%,-50%) scale(1.08) rotate(9deg); }
  78% { opacity:.34; transform:translate(-50%,-42%) scale(1.42) rotate(17deg); }
  100% { opacity:0; transform:translate(-50%,-31%) scale(1.62) rotate(25deg); }
}

@keyframes secondarySpray {
  0%, 23% { opacity:0; transform:translate(-50%,-50%) scale(.04) rotate(24deg); }
  39% { opacity:.95; transform:translate(-50%,-50%) scale(.72) rotate(50deg); }
  74% { opacity:.38; transform:translate(-45%,-43%) scale(1.28) rotate(72deg); }
  100% { opacity:0; transform:translate(-38%,-35%) scale(1.52) rotate(86deg); }
}

@keyframes smokeRing {
  0%, 46% { opacity:0; transform:translate(-50%,-50%) scale(.2); }
  64% { opacity:.2; transform:translate(-50%,-50%) scale(7.5); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(12); }
}

@media (max-width:760px) {
  .town-scene img { object-position:center bottom; }
  #audio {
    right:12px;
    bottom:calc(34px + env(safe-area-inset-bottom));
    padding:7px 12px;
  }
  #vol { display:none; }
  .countdown-panel {
    width:min(100% - 22px, 540px);
    padding-top:72px;
  }
  .kicker { margin-top:6px; }
  h1 { font-size:clamp(48px,14vw,82px); }
  #countdown {
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:8px;
  }
  .time-cell {
    min-height:96px;
    padding:13px 6px 11px;
  }
  .burst { transform-origin:center; }
  .b4, .b5, .s3 { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .rocket, .burst, .burst::before, .burst::after, .sparkle { animation:none; opacity:.58; }
}