/* The countdown, back in the hall (surface S): a gold hourglass on a black marble plinth.

   The hall is drawn three ways (assets/countdown/countdown.css, from build_countdown.py), each
   with a bare plinth; the picture covers the section from its foot, and js/countdown.js works out
   where the plinth has come to, stands the hourglass on it (.cd-glass: its left, top and height)
   and sets the words below it (--foot-top).
     .cd-hall    the hall
     .cd-glass   the hourglass: two faces, turned together end over end
       .cd-a       at rest: the hourglass, and the sand in the mound below
       .cd-b       running: the hourglass, the sand above (drained from its surface down, --lvl),
                   the stream, and the mound growing (scaleY from its foot)
     .cd-foot    the hint, then the time left, the line and Save the date
   Phone, iPad upright and the laptop column: the words above and below the plinth. iPad
   sideways: the hourglass to the left, the words in the right half.
*/

@property --lvl {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.countdown {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background-color: #080605;
  color: var(--ivory);
  text-align: center;
  container-type: inline-size;
  -webkit-tap-highlight-color: transparent;
}

.cd-hall {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% 100%;
  background-repeat: no-repeat;
}

/* the top: into the dark of the hall, under the events' band */
.cd-hall::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 6, 5, .72), rgba(8, 6, 5, 0) 26%),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(8, 6, 5, .5), transparent 80%);
}

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

.cd-head {
  position: relative;
  z-index: 2;
  padding: calc(clamp(22px, 6.4cqi, 40px) / 2 + clamp(30px, 8cqi, 56px)) 16px 0;
}

.cd-kicker { font-size: clamp(11.5px, 3.3cqi, 15px); }

.cd-title { font-size: clamp(50px, 14cqi, 88px); }

.cd-gold { padding: 0 .24em .1em; }

.cd-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: .35em 0 0;
  font: 600 clamp(12px, 3.5cqi, 16px) / 1.4 'Cormorant Garamond', serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #f0d99c;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
}

.cd-date i { font-style: normal; color: var(--gold); }

.cd-time {
  font-size: .86em;
  letter-spacing: .18em;
  text-transform: none;
  font-style: italic;
  color: #e6d3a4;
}

/* ------------------------------------------------------------ the hourglass */

.cd-glass {
  position: absolute;
  z-index: 1;
  left: var(--glass-x, 50%);
  top: var(--glass-y, 30%);
  height: var(--glass-h, 40%);
  aspect-ratio: var(--hg-r);
  translate: -50% 0;
}

.cd-face,
.cd-face > i {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cd-face { transform-origin: calc(var(--hg-neck-x) * 100%) calc(var(--hg-neck) * 100%); }

.cd-face > i {
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* its shadow on the plinth */
.cd-shadow {
  position: absolute;
  left: 2%;
  right: 2%;
  top: calc(var(--hg-feet) * 100% - 4%);
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .75), rgba(0, 0, 0, .3) 60%, transparent);
  pointer-events: none;
}

/* the sand above, drained from its surface down */
.cd-top {
  --lvl: 0%;
  -webkit-mask-image: linear-gradient(180deg, transparent var(--lvl), #000 calc(var(--lvl) + .5%));
          mask-image: linear-gradient(180deg, transparent var(--lvl), #000 calc(var(--lvl) + .5%));
}

/* the mound, grown up from its foot */
.cd-b .cd-pile {
  transform-origin: 50% calc(var(--hg-pile-foot) * 100%);
  transform: scaleY(0);
}

/* the stream: from the neck down to the mound, a thread of falling grains */
.cd-face > i.cd-stream {
  left: calc(var(--hg-neck-x) * 100% - .45%);
  right: auto;
  width: .9%;
  top: calc(var(--hg-neck) * 100% - .5%);
  bottom: auto;
  height: calc((var(--hg-pile-foot) - var(--hg-neck)) * 100%);
  border-radius: 1px;
  background:
    repeating-linear-gradient(180deg, rgba(255, 238, 180, .95) 0 2px, rgba(214, 160, 60, .7) 2px 4px, rgba(255, 226, 150, .9) 4px 7px);
  background-size: 100% 14px;
  transform-origin: 50% 0;
  opacity: 0;
  animation: cd-grains .45s linear infinite paused;
}

.countdown.is-visible .cd-stream { animation-play-state: running; }

@keyframes cd-grains {
  to { background-position: 0 14px; }
}

/* at rest, or running: which face (js/countdown.js turns between them) */
.cd-b { visibility: hidden; }
.countdown.is-running .cd-a { visibility: hidden; }
.countdown.is-running .cd-b { visibility: visible; }

/* the whole hourglass, to touch */
.cd-turn {
  position: absolute;
  inset: 0 -6% 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cd-turn:focus { outline: none; }
.cd-turn:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* ------------------------------------------------------------ the time left */

.cd-foot {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: var(--foot-top, 72%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px;
}

/* a soft darkness behind the words, as the polished floor is busy with light */
.cd-foot::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 44%;
  width: min(118%, 640px);
  height: 150%;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(6, 5, 4, .78), rgba(6, 5, 4, .5) 55%, transparent);
  pointer-events: none;
}

.cd-hint {
  position: absolute;
  top: .6em;
  left: 0;
  right: 0;
  margin: 0;
  font: italic 500 clamp(15px, 4.2cqi, 19px) / 1.3 'Cormorant Garamond', serif;
  color: #f0d99c;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
  animation: cd-breathe 3.2s ease-in-out infinite;
}

@keyframes cd-breathe {
  50% { opacity: .45; }
}

.cd-count {
  display: flex;
  justify-content: center;
  gap: clamp(6px, 2.4cqi, 18px);
}

.cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: clamp(58px, 17cqi, 92px);
}

/* each number between two fine gold rules */
.cd-num {
  display: block;
  padding: .02em 0 .06em;
  border-block: 1px solid rgba(201, 162, 75, .55);
  width: 100%;
  font: 500 clamp(34px, 10.5cqi, 58px) / 1.05 'Cormorant Garamond', serif;
  font-variant-numeric: lining-nums tabular-nums;
  background: var(--gold-leaf);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .9));
}

.cd-label {
  margin-top: .4em;
  font: 600 clamp(10px, 2.9cqi, 12.5px) / 1 'Cormorant Garamond', serif;
  letter-spacing: .24em;
  padding-left: .24em;
  text-transform: uppercase;
  color: #e6d3a4;
}

.cd-line {
  margin: clamp(10px, 3cqi, 18px) 0 0;
  font: italic 500 clamp(16px, 4.6cqi, 21px) / 1.3 'Cormorant Garamond', serif;
  color: var(--ivory);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
}

.cd-save-wrap {
  position: relative;
  margin-top: clamp(10px, 3cqi, 18px);
}

.cd-save { --fs: 16px; min-width: 190px; }

/* before it is turned: the hint where the time will be */
.countdown:not(.is-turned) .cd-date,
.countdown:not(.is-turned) .cd-count,
.countdown:not(.is-turned) .cd-line,
.countdown:not(.is-turned) .cd-save-wrap { visibility: hidden; }
.countdown.is-turned .cd-hint { visibility: hidden; }

/* on the day, from its start, and after: no numbers */
.countdown.is-now .cd-count,
.countdown.is-married .cd-count { display: none; }

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

/* The hourglass to the left, on its plinth; the words in the right half, one block. */
@media (min-aspect-ratio: 6/5) {
  html.is-tablet .countdown {
    display: grid;
    grid-template-columns: 52% 44%;
    align-content: center;
    min-height: 100svh;
  }
  html.is-tablet .cd-head,
  html.is-tablet .cd-foot {
    grid-column: 2;
    position: relative;
    top: auto;
    padding: 0;
  }
  html.is-tablet .cd-head { padding-top: calc(clamp(22px, 6.4cqi, 40px) / 2); }
  html.is-tablet .cd-title { font-size: clamp(50px, 7cqi, 88px); }
  html.is-tablet .cd-foot { margin-top: clamp(18px, 3vh, 34px); min-height: 190px; }
  html.is-tablet .cd-hint { top: 3em; }
  html.is-tablet .cd-unit { min-width: clamp(58px, 7.5cqi, 92px); }
  html.is-tablet .cd-num { font-size: clamp(34px, 4.6cqi, 58px); }
  html.is-tablet .cd-date,
  html.is-tablet .cd-line,
  html.is-tablet .cd-hint { font-size: clamp(15px, 1.7cqi, 20px); }
}

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

@media (prefers-reduced-motion: reduce) {
  .cd-hint { animation: none; }
  .cd-face > i.cd-stream { animation: none; }
}