/* The countdown: the courtyard's fountain, seen from the first-floor balcony (surface S).

   The picture covers the section, centred, whatever its shape (assets/countdown/countdown.css
   gives each shape's picture, and where its water, the date and the words go, in % of the
   picture). Everything is placed in the picture's own percentages, and sized by its height
   (--u, 1% of it), so it stays on the water and the brick however the picture is cropped:
   - .cd-fx: a canvas over the picture: the sun glinting on the water and up the jet, the little
     tiles in the basin's face glinting, and the ripples (drawn on the water only)
   - .cd-date: the Baraat's date, lying on the water in front of the lotus (once revealed);
     before that, .cd-hint there, and .cd-water, the button over the water
   - .cd-head: the heading, on the brick above the fountain, over a soft ivory veil
   - .cd-foot: the four glazed tiles (days, hours, minutes, seconds), each turning over as its
     number changes; then the line and Save the date. On a sideways tablet the heading and the
     tiles are both on the brick to the fountain's right.

   Before the date is revealed, the four tiles lie blank; .is-revealed (js/countdown.js) brings
   the date and turns them over. The day itself and after it: .is-today, .is-now, .is-married. */

.countdown {
  --tone-ink: var(--cobalt);            /* Save the date's icon (the events' button) */
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  container-type: size;
  isolation: isolate;
  background: #a9644a;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}

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

.cd-court,
.cd-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cd-court {
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* ------------------------------------------------------------ the water */

.cd-date,
.cd-hint {
  position: absolute;
  left: var(--dt-x);
  top: var(--dt-y);
  width: var(--dt-w);
  height: var(--dt-h);
  translate: -50% -50%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

/* the date lies on the water: seen from the balcony, a little foreshortened (sized by the water
   in front of the lotus, cqi here being .cd-date's width) */
.cd-date {
  container-type: inline-size;
  perspective: calc(var(--u) * 30);
  opacity: 0;
}

.cd-date > span {
  display: block;
  transform: rotateX(30deg);
  white-space: nowrap;
}

.cd-dmy {
  font: 700 min(calc(var(--u) * 3.3), 12cqi)/1.05 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .05em;
  color: #0e2462;
  text-shadow: 0 0 calc(var(--u) * .5) rgba(236, 252, 255, .95), 0 0 calc(var(--u) * 1.4) rgba(236, 252, 255, .6);
}

.cd-when {
  margin-top: calc(var(--u) * .3);
  font: 700 max(10px, min(calc(var(--u) * 1.4), 5cqi))/1.2 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .2em;
  padding-left: .2em;
  text-transform: uppercase;
  color: #0e2462;
  text-shadow: 0 0 calc(var(--u) * .45) rgba(236, 252, 255, .95);
}

.countdown.is-revealed .cd-date { opacity: 1; }

/* before: a word on the water, breathing */
.cd-hint {
  font: italic 600 max(14px, calc(var(--u) * 1.9))/1.2 "Cormorant Garamond", Georgia, serif;
  color: #fffaf0;
  text-shadow: 0 1px 2px rgba(10, 40, 50, .85), 0 0 calc(var(--u) * 1.2) rgba(10, 50, 60, .55);
  animation: cd-breathe 2.8s ease-in-out infinite;
  transition: opacity .6s ease;
}

.countdown.is-revealed .cd-hint { opacity: 0; animation: none; }

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

.cd-water {
  position: absolute;
  left: var(--wt-x);
  top: var(--wt-y);
  width: var(--wt-w);
  height: var(--wt-h);
  translate: -50% -50%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cd-water:focus-visible { outline: 2px solid #fffaf0; outline-offset: 3px; }
.countdown.is-revealed .cd-water { cursor: default; }

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

.cd-head {
  position: absolute;
  left: var(--hd-x);
  top: var(--hd-t);
  height: var(--hd-h);
  width: min(var(--hd-w), 100cqw - 24px);
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* a soft ivory veil behind the words, over the sunlit brick */
.cd-head::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100%, calc(var(--u) * 46));
  height: 125%;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(251, 244, 226, .86), rgba(251, 244, 226, .62) 55%, rgba(251, 244, 226, 0));
  pointer-events: none;
}

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

.cd-kicker {
  font: 700 max(11px, calc(var(--u) * 1.45))/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .26em;
  padding-left: .26em;
  text-transform: uppercase;
  color: var(--kick);
}

.cd-title {
  font: 400 calc(var(--u) * 6.3)/1.15 "Great Vibes", cursive;
  white-space: nowrap;
}

.cd-title .glaze {
  display: inline-block;
  padding: 0 .26em .06em;
}

/* ------------------------------------------------------------ the tiles, the line, Save the date */

.cd-foot {
  --tile: min(calc(var(--u) * 8.4), (100cqw - 64px) / 4.5, 100px);
  position: absolute;
  left: var(--ft-x);
  top: var(--ft-t);
  height: var(--ft-h);
  width: min(var(--ft-w), 100cqw - 16px);
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1.3);
  padding-bottom: calc(var(--seam-h) * .5);   /* the next section's seam lies across the foot */
  text-align: center;
}

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

.cd-count {
  position: relative;
  display: flex;
  gap: calc(var(--tile) * .17);
}

.cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--tile) * .09);
}

.cd-tile {
  display: block;
  width: var(--tile);
  aspect-ratio: 1;
  perspective: calc(var(--tile) * 4);
}

.cd-flip {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.cd-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-top: 3%;
  background: url(../assets/countdown/tile.webp) 0 0 / 100% 100% no-repeat;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  filter: drop-shadow(calc(var(--tile) * .03) calc(var(--tile) * .05) calc(var(--tile) * .05) rgba(60, 25, 10, .5));
  font: 600 calc(var(--tile) * .44)/1 "Cormorant Garamond", Georgia, serif;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}

.cd-back { transform: rotateX(180deg); }

/* the time left, in one sentence, for screen readers only */
.cd-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.cd-label {
  font: 700 max(9.5px, calc(var(--tile) * .145))/1.2 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .2em;
  padding-left: .2em;
  text-transform: uppercase;
  color: #fff7e6;
  text-shadow: 0 1px 2px rgba(40, 14, 4, .85), 0 0 6px rgba(40, 14, 4, .5);
}

.cd-line {
  font: italic 500 max(15px, calc(var(--u) * 1.95))/1.25 "Cormorant Garamond", Georgia, serif;
  color: #fff7e6;
  text-shadow: 0 1px 3px rgba(40, 14, 4, .9), 0 0 12px rgba(40, 14, 4, .55);
  text-wrap: balance;
}

.cd-save-wrap { position: relative; }

.cd-save {
  min-height: 38px;
  padding-inline: 18px;
  background: rgba(255, 251, 240, .92);
  box-shadow: 0 2px 6px rgba(40, 20, 5, .35);
}

/* Before the date is revealed: the tiles lie blank, their names, the line and the button wait. */
.cd-label,
.cd-line,
.cd-save-wrap { transition: opacity .9s ease, translate 1.1s cubic-bezier(.2, .7, .2, 1); }

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

.countdown.is-revealed .cd-line { transition-delay: 1.9s; }
.countdown.is-revealed .cd-save-wrap { transition-delay: 2.1s; }
.countdown.is-revealed .cd-label { transition-delay: 1.2s; }

/* The day, and after: no tiles (Today!, then Happily Married, in the heading), and no Save the
   date once it is over. */
.countdown.is-now .cd-count,
.countdown.is-married .cd-count { display: none; }
.countdown.is-married .cd-save-wrap { display: none; }

/* Sideways tablets: the heading and the tiles together on the brick to the fountain's right,
   a little larger. */
@media (min-aspect-ratio: 6/5) {
  html.is-tablet .cd-title { font-size: calc(var(--u) * 7.4); }
  html.is-tablet .cd-foot { --tile: min(calc(var(--u) * 9.4), (100cqw * .36) / 4.6, 100px); justify-content: flex-start; padding-top: calc(var(--u) * 1.5); }
}

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

@media (prefers-reduced-motion: reduce) {
  .cd-hint { animation: none; opacity: 1; }
  .cd-hint,
  .cd-label,
  .cd-line,
  .cd-save-wrap { transition: none; }
}