/* The countdown: the night garden's sky alone, soft clouds lit silver from behind by the full moon,
   drawn darker than the picture so the words read clearly.

   The sky covers the section, whatever its shape (assets/countdown/countdown.css gives each
   shape's pictures, the moon's place and size, and where each block of words goes, in % of the
   picture's height, all in its calm sky). Its layers, from the back:
   - .cd-sky: the clear sky, the moon and its ring, the stars (and .cd-stars: some of them
     twinkling, placed by js/countdown.js)
   - .cd-veil: the moon's light dimmed, while the clouds are over it
   - .cd-clouds: the clouds, as the light they add (screen), drifting a little once parted; and
     .cd-cover: two soft patches of the same clouds gathered over the moon at first, which drift
     apart to either side and thin away (js/countdown.js)
   - .cd-night: a deeper night over everything
   - .cd-moon: the moon itself, bright, over that night once the clouds have parted, and .cd-halo
     its glow
   - the words: the heading, the date, the time left (days, hours, minutes, seconds), a line, Save
     the date, each with a soft veil of night behind it.
   --u sizes the words: a hundredth of the phone's width, and in proportion on the other shapes. */

.countdown {
  --u: min(1cqw, .52cqh);
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
  container-type: size;
  isolation: isolate;
  background-color: var(--night-deep);
  color: var(--pearl);
  -webkit-tap-highlight-color: transparent;
}

@media (min-aspect-ratio: 5/8) {
  html:root .countdown { --u: min(.8cqw, .55cqh); }
}

@media (min-aspect-ratio: 6/5) {
  html.is-tablet .countdown { --u: min(.55cqw, .66cqh); }
}

.cd-scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, 100cqh * var(--cd-r, .5628));
  aspect-ratio: var(--cd-r, .5628);
  translate: -50% -50%;
  cursor: pointer;
}

.countdown.is-parted .cd-scene { cursor: default; }

.cd-sky,
.cd-stars,
.cd-veil,
.cd-clouds,
.cd-night,
.cd-moon,
.cd-halo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cd-sky,
.cd-clouds,
.cd-moon {
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* ------------------------------------------------------------ the stars that twinkle */

.cd-tw {
  position: absolute;
  width: calc(var(--u) * 1.6);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(214, 232, 250, .35) 40%, transparent);
  mix-blend-mode: screen;
  opacity: 0;
  animation: cd-twinkle var(--d, 4s) ease-in-out var(--delay, 0s) infinite;
}

@keyframes cd-twinkle {
  0%, 100% { opacity: 0; scale: .6; }
  45% { opacity: 1; scale: 1.2; }
  60% { opacity: .5; scale: .9; }
}

/* ------------------------------------------------------------ the clouds, and the moon behind them */

/* the moon's light, dimmed while the clouds are over it */
.cd-veil {
  background: radial-gradient(ellipse calc(var(--moon-rx) * 3.6) calc(var(--moon-ry) * 3.6) at var(--moon-x) var(--moon-y),
    rgba(6, 18, 30, .8) 30%, rgba(6, 18, 30, .42) 60%, transparent);
}

.cd-clouds,
.cd-cover { mix-blend-mode: screen; }

/* At first, more cloud is gathered over the moon: two soft patches of the same clouds, drawn in
   over it from either side. As the clouds part, they drift back out to either side and thin away.
   Each patch stays inside its own layer (which is moved by a quarter of the picture), so its soft
   edge is never cut. */
.cd-cover {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.cd-cover-l {
  transform: translateX(26%);
  -webkit-mask-image: radial-gradient(ellipse calc(var(--moon-rx) * 2.5) calc(var(--moon-ry) * 3.2) at calc(var(--moon-x) - 26%) var(--moon-y), #000 30%, transparent);
          mask-image: radial-gradient(ellipse calc(var(--moon-rx) * 2.5) calc(var(--moon-ry) * 3.2) at calc(var(--moon-x) - 26%) var(--moon-y), #000 30%, transparent);
}

.cd-cover-r {
  transform: translateX(-24%);
  -webkit-mask-image: radial-gradient(ellipse calc(var(--moon-rx) * 2.5) calc(var(--moon-ry) * 3.2) at calc(var(--moon-x) + 24%) calc(var(--moon-y) + 2%), #000 30%, transparent);
          mask-image: radial-gradient(ellipse calc(var(--moon-rx) * 2.5) calc(var(--moon-ry) * 3.2) at calc(var(--moon-x) + 24%) calc(var(--moon-y) + 2%), #000 30%, transparent);
}

.countdown.is-parted .cd-cover { visibility: hidden; }

/* parted, the clouds drift a little */
.countdown.is-parted .cd-clouds { animation: cd-drift 19s ease-in-out infinite alternate; }

@keyframes cd-drift {
  from { translate: -.8% 0; }
  to { translate: .8% 0; }
}

/* a deeper night over all of it */
.cd-night {
  background: linear-gradient(180deg, rgba(4, 14, 24, .4), rgba(4, 14, 24, .24) 34%, rgba(4, 14, 24, .3) 62%, rgba(4, 14, 24, .48));
}

/* the moon itself, bright over that night once the clouds have parted, and its glow */
.cd-moon {
  -webkit-mask-image: radial-gradient(ellipse calc(var(--moon-rx) * 1.5) calc(var(--moon-ry) * 1.5) at var(--moon-x) var(--moon-y), #000 64%, transparent);
          mask-image: radial-gradient(ellipse calc(var(--moon-rx) * 1.5) calc(var(--moon-ry) * 1.5) at var(--moon-x) var(--moon-y), #000 64%, transparent);
  opacity: 0;
}

.cd-halo {
  background: radial-gradient(ellipse calc(var(--moon-rx) * 4.2) calc(var(--moon-ry) * 4.2) at var(--moon-x) var(--moon-y),
    rgba(222, 236, 250, .34), rgba(170, 205, 235, .12) 42%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
}

.countdown.is-parted .cd-veil { opacity: 0; }
.countdown.is-parted .cd-moon,
.countdown.is-parted .cd-halo { opacity: 1; }

/* ------------------------------------------------------------ the words */

.cd-block {
  position: absolute;
  z-index: 2;
  left: 50%;
  width: min(100cqw - 28px, calc(var(--u) * 94));
  translate: -50% 0;
  margin: 0;
  text-align: center;
  isolation: isolate;
}

/* a soft veil of night behind each */
.cd-block::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -22% 4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(5, 16, 27, .8), rgba(5, 16, 27, .5) 58%, transparent);
  pointer-events: none;
}

.cd-head { top: var(--w-head); }
.cd-date { top: var(--w-date); }
.cd-count,
.cd-after { top: var(--w-nums); }
.cd-line { top: var(--w-line); }
.cd-save { top: var(--w-btn); }

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

.cd-kicker {
  font: 700 calc(var(--u) * 3.2)/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .28em;
  padding-left: .28em;
  text-transform: uppercase;
  color: var(--moon);
  text-shadow: 0 1px 3px rgba(4, 14, 24, .9);
}

.cd-title { font: 400 calc(var(--u) * 12.8)/1.15 "Allura", cursive; }

.cd-title .pearl,
.cd-wed .pearl {
  display: inline-block;
  padding: 0 .28em .06em;
}

.cd-date {
  font: 600 calc(var(--u) * 4.1)/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .05em;
  text-shadow: 0 1px 3px rgba(4, 14, 24, .95), 0 0 10px rgba(4, 14, 24, .8);
}

.cd-count {
  display: flex;
  justify-content: center;
  gap: calc(var(--u) * 3.2);
}

.cd-n {
  width: calc(var(--u) * 18.5);
  text-align: center;
}

.cd-n b {
  display: block;
  font: 600 calc(var(--u) * 10.5)/1.05 "Cormorant Garamond", Georgia, serif;
  font-variant-numeric: lining-nums tabular-nums;
}

.cd-n small {
  display: block;
  margin-top: calc(var(--u) * 1.2);
  font: 700 calc(var(--u) * 2.6)/1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .24em;
  padding-left: .24em;
  text-transform: uppercase;
  color: var(--moon);
  text-shadow: 0 1px 3px rgba(4, 14, 24, .9);
}

.cd-after[hidden],
.cd-count[hidden],
.cd-save[hidden] { display: none; }

.cd-after > * { margin: 0; }
.cd-wed { font: 400 calc(var(--u) * 11)/1.15 "Allura", cursive; }

.cd-since,
.cd-line {
  font: italic 500 calc(var(--u) * 4.4)/1.3 "Cormorant Garamond", Georgia, serif;
  text-shadow: 0 1px 3px rgba(4, 14, 24, .95), 0 0 12px rgba(4, 14, 24, .85);
}

.cd-btn {
  padding: calc(var(--u) * 2.6) calc(var(--u) * 5.2) calc(var(--u) * 2.3);
  border: 1px solid rgba(214, 226, 236, .7);
  border-radius: 999px;
  background: rgba(10, 31, 48, .6);
  color: var(--pearl);
  font: 700 max(11px, calc(var(--u) * 3.1))/1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  box-shadow: 0 0 14px rgba(175, 208, 235, .25);
  cursor: pointer;
}

.cd-btn:hover { background: rgba(20, 50, 74, .7); }
.cd-btn:focus-visible,
.cd-part:focus-visible { outline: 2px solid var(--moon); outline-offset: 3px; }
.cd-cal { position: relative; display: inline-block; }
.cd-save::before { display: none; }

/* until the clouds part: only the heading, and a hint where the time will be */
.countdown:not(.is-parting):not(.is-parted) :is(.cd-date, .cd-count, .cd-after, .cd-line, .cd-save) {
  opacity: 0;
  visibility: hidden;
}

.cd-hint {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: var(--w-nums);
  margin: 0;
  text-align: center;
  font: italic 500 calc(var(--u) * 5.2)/1.3 "Cormorant Garamond", Georgia, serif;
  color: var(--pearl);
  text-shadow: 0 0 10px rgba(4, 14, 24, 1), 0 0 22px rgba(4, 14, 24, .9), 0 1px 3px rgba(4, 14, 24, .9);
  pointer-events: none;
  animation: cd-hint 2.8s ease-in-out infinite;
}

.countdown:is(.is-parting, .is-parted) .cd-hint { visibility: hidden; animation: none; }

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

/* for screen readers: the time left, in one sentence, each minute */
.cd-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* the keyboard's way to part the clouds: unseen until it has the focus */
.cd-part {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 18px;
  translate: -50% 0;
  padding: 10px 18px;
  border: 1px solid rgba(214, 226, 236, .7);
  border-radius: 999px;
  background: rgba(10, 31, 48, .8);
  color: var(--pearl);
  font: 700 12px/1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
}

.cd-part:focus-visible { opacity: 1; pointer-events: auto; }
.countdown.is-parted .cd-part { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cd-tw,
  .cd-hint,
  .countdown.is-parted .cd-clouds { animation: none; }
}