/* The countdown: a sundial in the rose garden, at golden hour.

   Seen from above: warm marble paving with roses spilling in at the corners, the shade of leaves
   moving on it, and in the middle a marble sundial inlaid with roses. The time left until the
   Baraat is carved into the plain middle of its face, below the gnomon, where its shadow never
   falls (the low sun is in the south-west, so the shadow lies to the north-east).

   The shadow is drawn here: the triangle between the gnomon (up the middle, from the boss to
   the ring of hours) and where the sun throws its top (--sun, the angle from north). js/
   countdown.js swings it round as the section arrives, then lets it creep on.
   assets/countdown/countdown.css has the pictures and where on the dial things are. */

@property --sun {
  syntax: "<angle>";
  inherits: true;
  initial-value: 64deg;
}

.countdown {
  /* the dial's size, for each shape; the words are sized from it */
  --d: min(90cqw, 56cqh);
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: #e6c9a2;
  color: var(--ink);
  container-type: size;
}

.countdown p { margin: 0; }

.cd-pave {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
}

/* the leaves of a tree we cannot see, moving on the paving, and the warmth of the low sun */
.cd-pave::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 8% 96%, rgba(255, 214, 150, .32), rgba(255, 214, 150, 0) 70%),
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(255, 246, 230, .16), rgba(255, 246, 230, 0) 70%);
}

.cd-shade {
  position: absolute;
  right: -14cqw;
  top: -8cqh;
  width: max(110cqw, 80cqh);
  aspect-ratio: 1;
  background: url(../assets/letter/shade.webp) 0 0 / 100% 100% no-repeat;
  scale: -1 1;
  opacity: .22;
  mix-blend-mode: multiply;
  transform-origin: 100% 0;
  animation: cd-sway 9s ease-in-out infinite alternate;
}

@keyframes cd-sway {
  0%   { transform: rotate(-1deg) translate(-.8%, .3%) skewX(.8deg); }
  50%  { transform: rotate(.6deg) translate(.6%, -.3%) skewX(-.4deg); }
  100% { transform: rotate(1.2deg) translate(1%, .5%) skewX(-1deg); }
}

.cd-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--d) * .045);
  padding: 4cqh 5cqw;
  text-align: center;
}

/* a soft light behind the words, so they read on the paving */
.cd-head,
.cd-foot {
  position: relative;
  padding: .3em 1.4em;
}

.cd-head::before,
.cd-foot::before {
  content: "";
  position: absolute;
  inset: -20% -8%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 249, 240, .84), rgba(255, 249, 240, .5) 58%, rgba(255, 249, 240, 0));
}

.cd-head > *,
.cd-foot > p { text-shadow: 0 0 12px rgba(255, 250, 242, .95), 0 0 3px rgba(255, 250, 242, .9); }

.cd-kicker {
  font: 600 max(11px, calc(var(--d) * .036))/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .3em;
  padding-left: .3em;
  text-transform: uppercase;
  color: var(--sage-deep);
}

.cd-title {
  margin: 0;
  font: 700 calc(var(--d) * .128)/1.05 "Corinthia", cursive;
  padding: 0 .2em .04em;
  white-space: nowrap;
  color: var(--rose);
  --wipe: 130%;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 18%), transparent var(--wipe));
          mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 18%), transparent var(--wipe));
}

/* ------------------------------------------------------------ the sundial */

.cd-dial {
  position: relative;
  flex: none;
  width: var(--d);
  aspect-ratio: 1;
  container-type: inline-size;
}

.cd-dial-art {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: 100% 100%;
  border-radius: 50%;
}

/* set into the paving: a soft dark line round it, and the low sun's warmth on the far side */
.cd-dial-art:not(.cd-gnomon) {
  box-shadow: 0 0 0 .25cqw rgba(120, 82, 44, .25), 1.2cqw -1cqw 3cqw rgba(110, 70, 30, .28), inset 0 0 6cqw rgba(255, 226, 180, .18);
}

/* the gnomon's shadow: from the boss, between the gnomon and where its top falls */
.cd-shadow {
  --len: 44%;
  position: absolute;
  inset: 0;
  display: none;
  opacity: .42;
  filter: blur(.7cqw);
  mix-blend-mode: multiply;
  pointer-events: none;
}

@supports (width: calc(sin(1deg) * 1px)) {
  .cd-shadow { display: block; }
}

.cd-shadow i {
  position: absolute;
  inset: 0;
  /* darkest by the gnomon, softening and fading as it reaches the ring of hours */
  background: radial-gradient(circle closest-side at var(--gx) var(--gy), rgb(92, 56, 26), rgba(92, 56, 26, .82) 55%, rgba(92, 56, 26, .4) 80%, rgba(92, 56, 26, 0) 94%);
  -webkit-clip-path: polygon(var(--gx) var(--gy), var(--gx) var(--gt), calc(var(--gx) + sin(var(--sun)) * var(--len)) calc(var(--gy) - cos(var(--sun)) * var(--len)));
          clip-path: polygon(var(--gx) var(--gy), var(--gx) var(--gt), calc(var(--gx) + sin(var(--sun)) * var(--len)) calc(var(--gy) - cos(var(--sun)) * var(--len)));
}

/* the gnomon itself, above its shadow (the same picture, only the bronze) */
.cd-gnomon {
  -webkit-clip-path: polygon(49.4% 9.6%, 51.4% 9.6%, 51.7% 45%, 52.9% 45.8%, 52.9% 50.6%, 47.9% 50.6%, 47.9% 45.8%, 49.1% 45%);
          clip-path: polygon(49.4% 9.6%, 51.4% 9.6%, 51.7% 45%, 52.9% 45.8%, 52.9% 50.6%, 47.9% 50.6%, 47.9% 45.8%, 49.1% 45%);
  filter: drop-shadow(.3cqw -.2cqw .3cqw rgba(70, 40, 10, .3));
}

/* the time left, carved into the face below the boss */
.cd-count {
  position: absolute;
  left: 50%;
  top: 54.5%;
  translate: -50% 0;
  display: flex;
  align-items: flex-start;
  gap: 2.2cqw;
}

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

.cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cd-num {
  display: flex;
  font: 600 11.5cqw/1 "Cormorant Garamond", Georgia, serif;
  font-variant-numeric: lining-nums tabular-nums;
  color: #5a3a34;
  /* cut into the stone: dark above, a catch of light below */
  text-shadow: 0 .12cqw 0 rgba(255, 248, 236, .85), 0 -.1cqw .1cqw rgba(60, 30, 20, .35);
}

.cd-dg {
  display: block;
  height: 1em;
  overflow: hidden;
}

.cd-strip {
  display: flex;
  flex-direction: column;
}

.cd-strip b {
  display: block;
  height: 1em;
  font-weight: inherit;
  text-align: center;
}

.cd-label {
  margin-top: .7cqw;
  font: 700 max(8.5px, 2.5cqw)/1.2 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .22em;
  padding-left: .22em;
  text-transform: uppercase;
  color: var(--sage-deep);
}

.cd-sep {
  width: 1cqw;
  aspect-ratio: 1;
  margin-top: 5cqw;
  border-radius: 50%;
  background: var(--rose);
  opacity: .7;
}

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

/* on the day, and after it: words in place of the numbers */
.cd-day-words {
  position: absolute;
  left: 22%;
  right: 22%;
  top: 53%;
  font: 700 12cqw/1 "Corinthia", cursive;
  color: var(--rose);
  text-shadow: 0 .12cqw 0 rgba(255, 248, 236, .85);
  text-wrap: balance;
}

.cd-day-words[hidden] { display: none; }
.countdown.is-married .cd-day-words { font-size: 10cqw; top: 52%; }

/* on the day itself there are no days left to count */
.countdown.is-today .cd-days,
.countdown.is-today .cd-sep-d { display: none; }

/* ------------------------------------------------------------ below */

.cd-date {
  font: 600 max(14px, calc(var(--d) * .05))/1.3 "Cormorant Garamond", Georgia, serif;
  color: var(--ink);
}

.cd-date span { display: block; }
.cd-when { font-style: italic; font-weight: 500; color: var(--rose); font-size: .92em; }

.cd-line {
  margin-top: .45em !important;
  font: italic 500 max(14px, calc(var(--d) * .05))/1.3 "Cormorant Garamond", Georgia, serif;
  color: rgba(91, 60, 64, .9);
}

.cd-save-wrap {
  position: relative;
  display: inline-block;
  margin-top: calc(var(--d) * .04);
}

.cd-save {
  min-height: 40px;
  padding: 8px 20px;
  font-size: max(14px, calc(var(--d) * .042));
}

.countdown.is-now .cd-save-wrap,
.countdown.is-married .cd-save-wrap { display: none; }

/* Waiting for the sun (js/countdown.js). */
.countdown.is-armed:not(.is-lit) .cd-head > *,
.countdown.is-armed:not(.is-lit) .cd-count,
.countdown.is-armed:not(.is-lit) .cd-day-words,
.countdown.is-armed:not(.is-lit) .cd-foot > *,
.countdown.is-armed:not(.is-lit) .cd-shadow { opacity: 0; }

/* ------------------------------------------------------------ the shapes */

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

/* a sideways tablet: the dial in the middle, a little smaller */
@media (min-aspect-ratio: 6/5) {
  html.is-tablet .countdown { --d: min(46cqw, 55cqh); }
  html.is-tablet .cd-inner { gap: calc(var(--d) * .03); padding-block: 2.5cqh; }
  html.is-tablet .cd-title { font-size: calc(var(--d) * .14); }
}

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

@media (prefers-reduced-motion: reduce) {
  .cd-shade { animation: none; }
}