/* ── Arc Mainnet countdown ───────────────────────────────────────────── */

:root {
  --shell:        #47469b;
  --shell-light:  #5453a4;
  --shell-dark:   #3a3a8c;
  --screen-top:   #0e1541;
  --screen-bot:   #090e2e;
  --cream:        #f2ecde;
  --orange:       #f2a03c;
  --label:        #ebe8f4;
  /* Unlit segments are invisible on the reference panel. Raise the alpha to
     ~0.03 if you want faint LCD ghosts behind the digits. */
  --ghost:        transparent;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: ui-monospace, "SF Mono", "Roboto Mono", "DejaVu Sans Mono",
               Menlo, Consolas, "Courier New", monospace;
  background: #06092b;
  color: var(--label);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Background ──────────────────────────────────────────────────────── */

.backdrop {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(85% 55% at 56% 4%, rgba(66, 96, 205, .30), rgba(66, 96, 205, 0) 62%),
    linear-gradient(180deg,
      #060a2e   0%,
      #0a1152  25%,
      #1a1f7a  48%,
      #35349a  66%,
      #6355ae  80%,
      #9a76b6  92%,
      #bd8bb0 100%);
}

.backdrop .dash {
  position: absolute;
  height: 0.42vw;
  min-height: 4px;
  border-radius: 999px;
  background: #ffffff;
  filter: blur(0.5px);
  will-change: transform, opacity;
  /* --o (base opacity), --dx/--dy (drift vector) and the timings are all
     seeded per-dash in countdown.js. */
  animation: drift var(--dur, 26s) ease-in-out var(--delay, 0s) infinite alternate;
}

/* ── Stage ───────────────────────────────────────────────────────────── */

.stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: 4vmin;
}

/* Every dimension below is expressed in `em`, so the whole panel scales
   from this single font-size. */
.device {
  position: relative;
  width: min(1460px, 93vw);
  font-size: calc(min(1460px, 93vw) / 60);
  padding: 0.55em;
  border-radius: 1.5em;
  background: linear-gradient(180deg, var(--shell-light), var(--shell-dark));
  box-shadow:
    0 0.15em 0 rgba(255, 255, 255, .10) inset,
    0 2.2em 4em rgba(4, 6, 32, .45);
}

/* The little clip / handle on the top-right edge */
.device__tab {
  position: absolute;
  top: -1.15em;
  right: 2.4em;
  width: 3.6em;
  height: 1.9em;
  border-radius: 0.5em 0.5em 0 0;
  background: linear-gradient(180deg, var(--shell-light), var(--shell));
  box-shadow: 0 0.1em 0 rgba(255, 255, 255, .12) inset;
}

.screen {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.4em;
  padding: 1.55em 2em;
  border-radius: 1.1em;
  background:
    radial-gradient(120% 160% at 50% -20%, rgba(80, 100, 220, .16), transparent 70%),
    linear-gradient(180deg, var(--screen-top), var(--screen-bot));
  box-shadow: 0 0 0 0.06em rgba(0, 0, 0, .45) inset;
  overflow: hidden;
}

/* Specular sweep across the glass. Clipped by the screen's overflow. */
.screen::after {
  content: "";
  position: absolute;
  inset: -30% -70%;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 44%,
    rgba(150, 175, 255, .085) 50%,
    transparent 56%);
  animation: sweep 11s ease-in-out 2.2s infinite;
}

/* ── Brand block ─────────────────────────────────────────────────────── */

.brand {
  flex: 0 0 auto;
  width: 8.5em;            /* just wide enough for "ARC MAINNET" */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28em;
}

.brand__title,
.brand__date {
  font-size: 1.05em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand__title { color: var(--cream); }
.brand__date  { color: var(--orange); }

/* The traced mark is near-square, so size it by height to sit level with
   the two text lines above it. `currentColor` drives the path fill. */
.brand__mark {
  height: 2.5em;
  width: auto;
  margin-top: 0.5em;
  color: var(--cream);
  overflow: visible;
}

.divider {
  flex: 0 0 auto;
  width: 0.08em;
  align-self: stretch;
  margin: 0.35em 0;
  background: var(--orange);
  opacity: .9;
}

/* ── Timer ───────────────────────────────────────────────────────────── */

.timer {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.unit {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.unit__label {
  font-size: 1.1em;
  letter-spacing: 0.2em;
  text-indent: 0.2em;          /* balances the trailing letter-space */
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 0.5em;
}

.unit__digits {
  display: flex;
  gap: 0.34em;
}

.digit {
  width: 3.4em;
  height: 5.1em;
  display: block;
  /* Standing bloom, so the lit segments sit on the glass rather than in it. */
  filter: drop-shadow(0 0 0.14em rgba(242, 236, 222, .30));
}

.digit polygon {
  fill: var(--ghost);
  transition: fill 60ms linear;
}

.digit polygon.on {
  fill: var(--cream);
}

/* Applied for one beat whenever a glyph changes — an LCD refresh flare. */
.digit.is-flash { animation: digitFlash 460ms ease-out; }

/* ── Colon ───────────────────────────────────────────────────────────── */

.colon {
  display: flex;
  flex-direction: column;
  gap: 1.1em;
  margin-top: 1.7em;           /* pushes it below the label row */
}

.colon i {
  width: 0.52em;
  height: 0.52em;
  border-radius: 32%;
  background: var(--orange);
  opacity: .62;
}

/* countdown.js re-arms this class on every tick, so the beat stays locked to
   the real second rather than drifting like a free-running CSS loop. */
.colon.is-beat i { animation: colonBeat 950ms cubic-bezier(.16, .8, .3, 1); }
.colon.is-beat i:nth-child(2) { animation-delay: 70ms; }

/* ── Motion ──────────────────────────────────────────────────────────── */

/* Entrance: backdrop first, then the panel, then its contents left-to-right.
   All of it is `both`-filled so nothing flashes at its final position on the
   first frame. */
.backdrop { animation: fade 1400ms ease both; }

.device {
  animation: panelIn 1000ms cubic-bezier(.2, .85, .25, 1) both;
}

.brand__title { animation: rise 720ms cubic-bezier(.22, .85, .3, 1) 300ms both; }
.brand__date  { animation: rise 720ms cubic-bezier(.22, .85, .3, 1) 380ms both; }
.brand__mark  {
  animation:
    rise 720ms cubic-bezier(.22, .85, .3, 1) 460ms both,
    markGlow 6s ease-in-out 1.4s infinite;
}

.divider { animation: growY 760ms cubic-bezier(.3, .9, .3, 1) 420ms both; }

/* Seven children: unit, colon, unit, colon, unit, colon, unit. */
.timer > * { animation: rise 700ms cubic-bezier(.22, .85, .3, 1) both; }
.timer > *:nth-child(1) { animation-delay: 480ms; }
.timer > *:nth-child(2) { animation-delay: 540ms; }
.timer > *:nth-child(3) { animation-delay: 580ms; }
.timer > *:nth-child(4) { animation-delay: 640ms; }
.timer > *:nth-child(5) { animation-delay: 680ms; }
.timer > *:nth-child(6) { animation-delay: 740ms; }
.timer > *:nth-child(7) { animation-delay: 780ms; }

@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes panelIn {
  from { opacity: 0; transform: translateY(2.2em) scale(.965); }
  to   { opacity: 1; transform: none; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(.9em); }
  to   { opacity: 1; transform: none; }
}

@keyframes growY {
  from { opacity: 0; transform: scaleY(.2); }
  to   { opacity: .9; transform: none; }
}

/* Peak is deliberately restrained — the seconds column fires this every tick,
   and anything hotter blooms the segments into a single haze. */
@keyframes digitFlash {
  0%   { filter: drop-shadow(0 0 .34em rgba(242, 236, 222, .60)); transform: scale(1.025); }
  100% { filter: drop-shadow(0 0 .14em rgba(242, 236, 222, .30)); transform: none; }
}

@keyframes colonBeat {
  0%   { opacity: 1; transform: scale(1.16); }
  100% { opacity: .62; transform: none; }
}

@keyframes markGlow {
  0%, 100% { filter: drop-shadow(0 0 .16em rgba(242, 236, 222, .20)); }
  50%      { filter: drop-shadow(0 0 .55em rgba(242, 236, 222, .42)); }
}

@keyframes sweep {
  0%, 12%   { transform: translateX(-58%); }
  55%, 100% { transform: translateX(58%); }
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0);              opacity: calc(var(--o, .06) * .55); }
  to   { transform: translate3d(var(--dx, 3vw), var(--dy, -1vh), 0); opacity: var(--o, .06); }
}

@keyframes livePulse {
  0%, 100% {
    box-shadow:
      0 0.15em 0 rgba(255, 255, 255, .10) inset,
      0 2.2em 4em rgba(4, 6, 32, .45),
      0 0 0 rgba(242, 160, 60, 0);
  }
  50% {
    box-shadow:
      0 0.15em 0 rgba(255, 255, 255, .16) inset,
      0 2.2em 4em rgba(4, 6, 32, .45),
      0 0 3.5em rgba(242, 160, 60, .38);
  }
}

/* ── Launched state ──────────────────────────────────────────────────── */

/* Re-declares the entrance so a page loaded *after* launch still animates in;
   the two run together because they touch different properties. */
.device.is-live {
  animation:
    panelIn 1000ms cubic-bezier(.2, .85, .25, 1) both,
    livePulse 2.6s ease-in-out 1s infinite;
}
.device.is-live .brand__date { color: var(--cream); }
.device.is-live .digit polygon.on { fill: var(--orange); }
.device.is-live .digit { filter: drop-shadow(0 0 .2em rgba(242, 160, 60, .45)); }

/* ── Accessibility ───────────────────────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Everything above is decoration — strip all of it, keep the layout intact. */
@media (prefers-reduced-motion: reduce) {
  .digit polygon { transition: none; }
  .backdrop,
  .backdrop .dash,
  .device,
  .device.is-live,
  .screen::after,
  .brand__title,
  .brand__date,
  .brand__mark,
  .divider,
  .timer > *,
  .digit.is-flash,
  .colon.is-beat i {
    animation: none;
  }
  .screen::after { display: none; }
  .divider { opacity: .9; }
  .colon i { opacity: .62; }
}

/* ── Narrow screens: stack the brand above the timer ─────────────────── */

@media (max-aspect-ratio: 1/1) and (max-width: 820px) {
  .device {
    width: min(560px, 94vw);
    font-size: calc(min(560px, 94vw) / 26);
  }
  .screen {
    flex-direction: column;
    gap: 1em;
    padding: 1.4em 1.1em 1.2em;
  }
  .brand { width: auto; flex-direction: row; align-items: center; gap: 0.7em; }
  .brand__title, .brand__date { font-size: 0.95em; }
  .brand__mark { height: 1.8em; width: auto; margin-top: 0; }
  .divider { align-self: center; width: 60%; height: 0.08em; margin: 0; }
  .timer { width: 100%; }
  /* At this scale "SECONDS" is wider than the digit pair beneath it and
     would push the row past the panel, so the labels shrink hardest. */
  .unit__label {
    font-size: 0.62em;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    margin-bottom: 0.6em;
  }
  .unit__digits { gap: 0.26em; }
  .digit { width: 2.2em; height: 3.4em; }
  .colon { gap: 0.75em; margin-top: 1em; }
  .colon i { width: 0.36em; height: 0.36em; }
}