/* Local-only countdown concept. Activated by countdown-preview.js with
   ?countdown=preview on localhost; inert and hidden everywhere else. */

.launch-clock[hidden]{display:none!important}

.launch-clock{
  --clock-gold:#d2aa55;
  --clock-green:#78b77b;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin:1.35rem 0 1.15rem;
  padding:clamp(1.15rem,2.5vw,1.7rem) clamp(1rem,3vw,2rem);
  border:1px solid color-mix(in srgb,var(--clock-gold) 58%,transparent);
  background:
    radial-gradient(80% 120% at 3% 0%,rgba(210,170,85,.18),transparent 62%),
    radial-gradient(70% 110% at 100% 100%,rgba(120,183,123,.13),transparent 66%),
    linear-gradient(145deg,#0d0d10 0%,#08090a 68%,#0b0e0c 100%);
  box-shadow:0 24px 55px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.035);
}

.launch-clock::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:linear-gradient(90deg,var(--clock-gold) 0 49.6%,rgba(255,255,255,.24) 49.6% 50.4%,var(--clock-green) 50.4% 100%);
}

.launch-clock::after{
  content:"PUBLIC / PRIVATE";
  position:absolute;
  right:-1.2rem;
  top:3.6rem;
  z-index:-1;
  color:rgba(255,255,255,.015);
  font:800 clamp(2rem,4.5vw,4rem)/1 Archivo,system-ui,sans-serif;
  letter-spacing:-.055em;
  transform:rotate(-90deg);
  transform-origin:center;
  pointer-events:none;
}

.launch-clock__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:clamp(1.35rem,2.8vw,2rem);
  font-family:Archivo,system-ui,sans-serif;
  text-transform:uppercase;
}

.launch-clock__eyebrow{
  color:var(--clock-gold);
  font-size:.68rem;
  font-weight:780;
  letter-spacing:.19em;
}

.launch-clock__date{
  color:#d9d4c6;
  font-size:.64rem;
  font-weight:650;
  letter-spacing:.12em;
  white-space:nowrap;
}

.launch-clock__face{
  display:grid;
  grid-template-columns:minmax(0,1fr) .38em minmax(0,1fr) .38em minmax(0,1fr) .38em minmax(0,1fr);
  align-items:start;
  gap:clamp(.12rem,.65vw,.38rem);
  width:100%;
}

.launch-clock__face>i{
  padding-top:.22em;
  color:rgba(210,170,85,.44);
  font:300 clamp(1.35rem,3vw,2.2rem)/.9 Archivo,system-ui,sans-serif;
  font-style:normal;
}

.launch-clock__unit{
  min-width:0;
  padding:.68rem .18rem .52rem;
  border-top:1px solid rgba(210,170,85,.3);
  border-bottom:1px solid rgba(210,170,85,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
  text-align:center;
}

.launch-clock__unit strong{
  display:block;
  color:#f3eedf;
  font:720 clamp(1.75rem,4vw,3.05rem)/.9 Archivo,system-ui,sans-serif;
  font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:-.045em;
  text-shadow:0 0 28px rgba(210,170,85,.1);
}

.launch-clock__unit span{
  display:block;
  margin-top:.7rem;
  color:#aaa496;
  font:650 clamp(.44rem,.65vw,.56rem)/1 Archivo,system-ui,sans-serif;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.launch-clock__unit--seconds{
  border-color:rgba(120,183,123,.34);
  background:linear-gradient(180deg,rgba(120,183,123,.085),rgba(120,183,123,.015));
}

.launch-clock__unit--seconds strong{color:#a8d3aa;text-shadow:0 0 30px rgba(120,183,123,.18)}
.launch-clock__unit--seconds span{color:#8fbd92}

.launch-clock__note{
  max-width:42rem;
  margin:1.25rem 0 1rem;
  color:#b8b2a4;
  font:430 clamp(.72rem,1.2vw,.82rem)/1.5 Archivo,system-ui,sans-serif;
}

.launch-clock__rule{
  height:2px;
  overflow:hidden;
  background:rgba(255,255,255,.07);
}

.launch-clock__rule span{
  display:block;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,var(--clock-gold),#ece5d3 50%,var(--clock-green));
  transform:scaleX(var(--clock-progress,.02));
  transform-origin:left;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}

html[data-countdown-open] .launch-clock__eyebrow{color:var(--clock-green)}
html[data-countdown-open] .launch-clock__note{color:#c4d8c5}
html[data-countdown-open] .launch-clock__rule span{--clock-progress:1}

@media (max-width:560px){
  .launch-clock{margin-inline:0;padding:1rem .72rem}
  .launch-clock__head{align-items:flex-start;flex-direction:column;gap:.35rem}
  .launch-clock__face{grid-template-columns:minmax(0,1fr) .25em minmax(0,1fr) .25em minmax(0,1fr) .25em minmax(0,1fr);gap:.08rem}
  .launch-clock__face>i{font-size:1.1rem;padding-top:.4em}
  .launch-clock__unit{padding:.5rem .12rem .42rem}
  .launch-clock__unit strong{font-size:clamp(1.45rem,8.5vw,2.15rem)}
  .launch-clock__unit span{font-size:.5rem;letter-spacing:.07em}
  .launch-clock::after{display:none}
}

@media (prefers-reduced-motion:reduce){.launch-clock__rule span{transition:none}}