/* countdown: the ink clepsydra. Geometry and motion live in js/modules/countdown.js. */
#countdown { margin-top: clamp(20px, 3.4vh, 38px); }

.cd {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 34px);
  transition: opacity .9s var(--ease-out);
}
.cd.is-pre { opacity: 0; }

.cd__jar {
  position: relative;
  flex: none;
  width: clamp(156px, 12.6vw, 186px);
  aspect-ratio: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.cd__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* everything on the glass is drawn twice: ink on the glass, cream where the tide covers it */
.cd__face--ink { fill: var(--ink); }
.cd__face--cream { fill: var(--cream); }
.cd__liquid, .cd__rim, .cd__hang, .cd__plumes path, .cd__marks path { fill: var(--ink); }
.cd__glint, .cd__bubble { fill: var(--cream); }

.cd__label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15.5px;
  letter-spacing: .005em;
  font-variation-settings: "opsz" 18, "wght" 430, "SOFT" 100, "WONK" 1;
  transition: opacity .55s var(--ease-out), transform .7s var(--ease-jelly);
}
.cd__label.is-out { opacity: 0; transform: translateY(3px); transition: opacity .3s var(--ease-sink), transform .3s var(--ease-sink); }
.cd__dg, .cd__colon {
  font-family: var(--serif);
  font-size: 46px;
  letter-spacing: -.01em;
  font-variation-settings: "opsz" 144, "wght" 560, "SOFT" 60, "WONK" 1;
}
.cd__colon { font-size: 40px; }
/* before the first brain the glass says when it comes instead of counting */
.cd__soon {
  font-family: var(--serif);
  font-size: 27px;
  letter-spacing: -.01em;
  font-variation-settings: "opsz" 144, "wght" 560, "SOFT" 60, "WONK" 1;
}
.cd__ver {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0;
  transition: opacity 1.1s var(--ease-out);
}

/* Turri's one line beside the jar */
.cd__side { min-width: 0; max-width: 17.5em; display: grid; gap: 12px; justify-items: start; }
.cd__say {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.24;
  letter-spacing: -.005em;
  font-variation-settings: "opsz" 30, "wght" 400, "SOFT" 100, "WONK" 1;
  text-wrap: pretty;
}
.cd__w {
  display: inline-block;
  opacity: 0;
  transform: translateY(.42em) rotate(-2deg);
  font-variation-settings: "opsz" 30, "wght" 250, "SOFT" 100, "WONK" 1;
  transition:
    opacity .7s var(--ease-out) calc(var(--i) * 60ms + 80ms),
    transform 1s var(--ease-jelly) calc(var(--i) * 60ms + 80ms),
    font-variation-settings 1.2s var(--ease-out) calc(var(--i) * 60ms + 80ms);
}
.cd__say.is-in .cd__w { opacity: 1; transform: none; font-variation-settings: "opsz" 30, "wght" 400, "SOFT" 100, "WONK" 1; }
.cd__say.is-leaving .cd__w {
  opacity: 0;
  transform: translateY(.3em);
  transition: opacity .32s var(--ease-sink), transform .36s var(--ease-sink);
}

/* ?demo only */
.cd__swap {
  position: relative;
  appearance: none;
  border: 0;
  background: none;
  padding: 2px 0 9px;
  color: inherit;
  font-family: var(--mono);
  font-size: 12.5px;
  cursor: pointer;
  opacity: .85;
  transition: opacity .4s var(--ease-out), transform .5s var(--ease-jelly);
}
.cd__swap svg { display: none; }   /* no brush underline (owner, 20 Oct 2026) */
.cd__swap path { fill: var(--ink); transform-origin: left center; transition: transform .6s var(--ease-jelly); }
.cd__swap:hover { opacity: 1; transform: translateY(-1px); }
.cd__swap:hover path { transform: scaleX(1.06) scaleY(1.4); }
.cd__swap:disabled { opacity: .3; cursor: default; transform: none; }
.cd__swap:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }

@media (max-width: 480px) {
  .cd { gap: 14px; }
  .cd__jar { width: 150px; }
  .cd__say { font-size: 17px; }
}