/* The countdown: written in the stars.

   Under an emerald ceiling of tiny mirrors (a candle's light drifting across
   it, .cd-sky), a jewelled astrolabe: its frame (the rim and the throne,
   which stay), three ivory rings engraved by js/countdown.js with the
   weekdays, the days and the months, and the star map (rete) in the middle.
   All are one canvas (assets/countdown/geometry.css says where each layer and
   the centre are). A finger turns it on .cd-dial; the index (.cd-index) is
   where the date lines up.

   Found (.is-found), the marks under the index are picked out and the rest
   fall back, and it glows; then (.is-revealed) the date, the countdown in
   mirror tiles (a canvas a unit), a line and "Save the date" come in.

   Phones, upright tablets and laptop columns: one column. Sideways tablets:
   the astrolabe on the left, the rest beside it. Without the script, the date
   is shown and the countdown is not. */

.countdown {
  --gold-deep: #86662a;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 56px 16px 60px;
  overflow: hidden;
  background: url(../assets/countdown/ceiling.webp) center / cover, var(--emerald-night);
  color: var(--ivory);
  text-align: center;
  container: countdown / inline-size;
  -webkit-tap-highlight-color: transparent;
}

/* the ceiling, dim but for a candle's light going slowly over it */
.countdown::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 85% 70% at 50% 42%, rgba(3, 23, 15, .38), rgba(3, 23, 15, .88));
  pointer-events: none;
}

.cd-sky {
  position: absolute;
  inset: 0;
  -webkit-mask: url(../assets/countdown/ceiling-mirrors.webp) center / cover;
          mask: url(../assets/countdown/ceiling-mirrors.webp) center / cover;
  background: radial-gradient(closest-side, rgba(255, 238, 196, .95), rgba(255, 214, 150, .3) 45%, transparent) 20% 20% / 75% 55% no-repeat;
  mix-blend-mode: screen;
  opacity: .75;
  animation: cd-candle 26s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cd-candle {
  0%, 100% { background-position: 15% 12%; }
  30% { background-position: 85% 38%; }
  62% { background-position: 30% 88%; }
  82% { background-position: 75% 70%; }
}

.countdown > :not(.cd-sky) { position: relative; }

/* ------------------------------------------------------------ heading */

.cd-head { grid-area: head; }
.cd-head > * { margin: 0; }

.cd-kicker {
  font: 600 clamp(11px, 3cqi, 14px)/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .28em;
  padding-left: .28em;
  text-transform: uppercase;
  color: var(--gold);
}

.cd-title {
  font: 400 clamp(40px, 11cqi, 64px)/1.15 "Alex Brush", cursive;
  padding: 0 .3em .06em;
  background: url(../assets/hero/gold.webp) 0 0 / 4em 4em;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 .03em .03em rgba(0, 0, 0, .6));
}

/* ------------------------------------------------------------ the astrolabe */

.cd-stage {
  grid-area: astro;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.cd-astro {
  position: relative;
  width: min(100%, 470px, calc(52svh * var(--astro-r)));
  aspect-ratio: var(--astro-r);
  margin-top: 8px;
  outline: none;
}

.cd-astro > * { position: absolute; }

.cd-glow {
  left: calc(var(--ax) - 60%);
  top: calc(var(--ay) - 44%);
  width: 120%;
  height: 88%;
  background: radial-gradient(closest-side, rgba(255, 222, 150, .5), rgba(255, 200, 120, .16) 55%, transparent);
  opacity: 0;
  pointer-events: none;
}

.cd-frame {
  inset: 0;
  background: url(../assets/countdown/frame.webp) 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .55));
}

.cd-ring,
.cd-rete {
  aspect-ratio: 1;
  background: center / 100% 100% no-repeat;
  will-change: transform;
}

.cd-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-variant-numeric: lining-nums;
  fill: #123f32;
}

.cd-ring .cd-dot { fill: #9a7a3a; }
.cd-ring text { transition: opacity .8s ease, fill .8s ease; }

.cd-ring1 { left: var(--ring1-l); top: var(--ring1-t); width: var(--ring1-w); background-image: url(../assets/countdown/ring1.webp); }
.cd-ring2 { left: var(--ring2-l); top: var(--ring2-t); width: var(--ring2-w); background-image: url(../assets/countdown/ring2.webp); }
.cd-ring3 { left: var(--ring3-l); top: var(--ring3-t); width: var(--ring3-w); background-image: url(../assets/countdown/ring3.webp); }
.cd-rete  { left: var(--rete-l); top: var(--rete-t); width: var(--rete-w); background-image: url(../assets/countdown/rete.webp); }

/* the order they lie in: the outer ring lowest, the star map on top */
.cd-ring3 { z-index: 1; }
.cd-ring2 { z-index: 2; }
.cd-ring1 { z-index: 3; }
.cd-rete { z-index: 4; }

/* the index: a lens of glass in gold, over the rings at the top */
.cd-index {
  z-index: 5;
  left: calc(var(--ax) - 11%);
  top: var(--index-t);
  width: 22%;
  height: var(--index-h);
  border: 1.5px solid rgba(236, 212, 150, .95);
  border-radius: 14px 14px 22px 22px;
  background: linear-gradient(180deg, rgba(255, 250, 232, .2), rgba(255, 250, 232, .05) 60%, rgba(255, 250, 232, .12));
  box-shadow: 0 0 0 1px rgba(70, 48, 12, .45), 0 3px 10px rgba(0, 0, 0, .35), inset 0 0 10px rgba(255, 240, 200, .35);
  pointer-events: none;
}

.cd-index::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -7px;
  width: 11px;
  height: 11px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d9ffe9, #1f8a66 40%, #06402d);
  box-shadow: 0 0 0 1.5px #c9a45c, 0 1px 3px rgba(0, 0, 0, .5);
}

/* where a finger turns it */
.cd-dial {
  z-index: 6;
  left: var(--dial-l);
  top: var(--dial-t);
  width: var(--dial-w);
  height: var(--dial-h);
  border-radius: 50%;
  touch-action: none;
  cursor: grab;
}

.cd-dial:active { cursor: grabbing; }
.cd-astro:focus-visible .cd-dial { outline: 2px solid var(--gold-soft); outline-offset: 5px; }
.countdown.is-found .cd-dial { touch-action: auto; cursor: default; pointer-events: none; }

/* found: the marks under the index picked out, the rest fall back */
.countdown.is-found .cd-ring text:not(.cd-mark) { opacity: .28; }
.countdown.is-found .cd-ring .cd-mark { fill: #0b4a3b; }
.countdown.is-found .cd-glow { opacity: .75; }

.cd-hint {
  margin: 14px 0 0;
  font: italic 500 clamp(15px, 4.4cqi, 19px)/1.3 "Cormorant Garamond", Georgia, serif;
  color: var(--gold-soft);
  animation: cd-hint 2.8s ease-in-out infinite;
  transition: opacity .6s ease;
}

@keyframes cd-hint {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}

.countdown:not(.is-ready) .cd-hint,
.countdown.is-found .cd-hint { opacity: 0 !important; animation: none; visibility: hidden; }

/* ------------------------------------------------------------ the date, and the time to it */

.cd-found {
  grid-area: found;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 820px;
  container-type: inline-size;
}

.cd-found > * { margin: 0; }

.cd-date {
  margin-top: 10px !important;
  font-variant-numeric: lining-nums;
}

.cd-date > span { display: block; }

.cd-day {
  font: 600 clamp(11px, 3.2cqi, 14px)/1.4 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .28em;
  padding-left: .28em;
  text-transform: uppercase;
  color: var(--gold);
}

.cd-dmy {
  font: 600 clamp(28px, 8.4cqi, 42px)/1.15 "Cormorant Garamond", Georgia, serif;
  background: linear-gradient(180deg, rgba(255, 246, 220, .35), transparent 50%), url(../assets/hero/gold.webp) 0 0 / 4em 4em;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
}

.cd-time {
  font: italic 500 clamp(15px, 4.4cqi, 19px)/1.3 "Cormorant Garamond", Georgia, serif;
  color: var(--gold-soft);
}

/* the tiles: a pitch set by the space; each unit as wide as its digits need (--cols, set by
   js/countdown.js) */
.cd-count {
  --pitch: min(3.5cqi, 17px);
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  column-gap: calc(var(--pitch) * 3);
  row-gap: 16px;
  margin-top: 22px !important;
}

@container (min-width: 640px) {
  .cd-count { --pitch: min(1.75cqi, 17px); grid-template-columns: repeat(4, auto); }
}

.cd-unit {
  --cols: 11;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.cd-unit canvas {
  display: block;
  width: calc(var(--pitch) * var(--cols));
  height: calc(var(--pitch) * 7);
}

.cd-label {
  font: 600 clamp(10px, 2.8cqi, 13px)/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .24em;
  padding-left: .24em;
  text-transform: uppercase;
  color: var(--gold);
}

.cd-line {
  margin-top: 22px !important;
  max-width: 24em;
  font: italic 500 clamp(16px, 4.6cqi, 21px)/1.4 "Cormorant Garamond", Georgia, serif;
  color: rgba(245, 239, 226, .9);
  text-wrap: balance;
}

.cd-save-wrap {
  position: relative;
  margin-top: 18px !important;
}

/* the events' button, in emerald and gold */
.cd-save.ev-btn {
  --tone-ink: var(--gold-soft);
  min-width: 190px;
  border-color: rgba(230, 207, 152, .6);
  background: rgba(6, 42, 33, .7);
  color: var(--gold-soft);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

.cd-save.ev-btn:hover { background: rgba(11, 74, 59, .85); border-color: var(--gold-soft); }

.cd-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* before the date is found: its place kept, empty; then it comes in, a piece at a time */
.cd-date,
.cd-line,
.cd-save-wrap {
  transition: opacity 1s ease, translate 1.2s cubic-bezier(.2, .7, .2, 1), visibility 0s;
}

.cd-line { transition-delay: .9s; }
.cd-save-wrap { transition-delay: 1.15s; }

.countdown.is-ready:not(.is-revealed) .cd-date,
.countdown.is-ready:not(.is-revealed) .cd-line,
.countdown.is-ready:not(.is-revealed) .cd-save-wrap { opacity: 0; translate: 0 10px; visibility: hidden; }

.countdown:not(.is-ready) .cd-count,
.countdown:not(.is-ready) .cd-dial { display: none; }

/* arriving */
.cd-head,
.cd-stage { transition: opacity 1s ease, translate 1.4s cubic-bezier(.2, .7, .2, 1); }
.cd-stage { transition-delay: .15s; }
.countdown.is-ready:not(.is-seen) .cd-head { opacity: 0; }
.countdown.is-ready:not(.is-seen) .cd-stage { opacity: 0; translate: 0 26px; }

/* ------------------------------------------------------------ sideways tablets */

@media (min-aspect-ratio: 6/5) {
  html.is-tablet .countdown {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    grid-template-areas: "astro head" "astro found";
    grid-template-rows: auto 1fr;
    align-content: center;
    align-items: start;
    column-gap: clamp(20px, 4cqi, 60px);
    padding: 36px clamp(20px, 4cqi, 56px) 40px;
  }
  html.is-tablet .cd-head { align-self: end; }
  html.is-tablet .cd-stage { align-self: center; }
  html.is-tablet .cd-astro { width: min(46cqi, calc(84svh * var(--astro-r))); }
  html.is-tablet .cd-found { max-width: none; }
}

/* ------------------------------------------------------------ calm */

@media (prefers-reduced-motion: reduce) {
  .cd-sky,
  .cd-hint { animation: none; }
  .cd-head,
  .cd-stage,
  .cd-date,
  .cd-line,
  .cd-save-wrap { transition: none; }
}