/* The closing: the night garden later that night, every diya lit.

   The hero's view through the jasmine arch, the moon sunk behind the baradari. The garden covers
   the screen, whatever its shape, centred (assets/closing/closing.css gives each shape's picture:
   the garden with its diyas unlit, their light in ten steps, and the calm places for the words, in
   % of the picture). Everything on it is placed in the picture's own percentages:
   - .cl-veil: a soft deepening of the night over the water, under the words (and under the light)
   - .cl-lights: the diyas' light, drawn with `screen` over the unlit garden; js/closing.js lights
     the steps one after another (the threshold, then down the pool), and they flicker after
   - .cl-fx: a shooting star now and then, jasmine drifting down from the curtain
   - .cl-sky: the wedding dua, in the calm sky under the toran
   - .cl-water: once the diyas are lit, over the near water: the Urdu line, both families and the
     couple's names
   - .cl-foot: Replay the invitation, on the threshold between its two diyas */

.closing {
  --cl-r: .5628;
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 420px;
  overflow: hidden;
  container-type: size;
  background: var(--night-deep);
  isolation: isolate;
  color: var(--pearl);
  -webkit-tap-highlight-color: transparent;
}

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

.closing.is-lit .cl-scene { cursor: default; }

.cl-garden,
.cl-lights,
.cl-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cl-garden {
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* ------------------------------------------------------------ the diyas' light */

/* each step is drawn with `screen` on its own: their boxes overlap, and blended as one group the
   black round one step's flames would hide the light of the steps under it */
.cl-l {
  position: absolute;
  display: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
}

.closing.is-lit .cl-l {
  opacity: 1;
  animation: cl-flicker var(--d, 3.1s) ease-in-out var(--delay, 0s) infinite alternate;
}

.closing.is-away .cl-l { animation-play-state: paused; }

/* each step's flames breathe a little, out of step with the others */
.cl-l1 { --d: 2.7s; --delay: -.4s; }
.cl-l2 { --d: 3.4s; --delay: -1.3s; }
.cl-l3 { --d: 2.9s; --delay: -2.1s; }
.cl-l4 { --d: 3.7s; --delay: -.9s; }
.cl-l5 { --d: 3.2s; --delay: -1.7s; }
.cl-l6 { --d: 2.6s; --delay: -.2s; }
.cl-l7 { --d: 3.5s; --delay: -2.6s; }
.cl-l8 { --d: 3s; --delay: -1.1s; }
.cl-l9 { --d: 2.8s; --delay: -1.9s; }

@keyframes cl-flicker {
  0% { opacity: 1; }
  40% { opacity: .86; }
  55% { opacity: .97; }
  100% { opacity: .9; }
}

/* ------------------------------------------------------------ a shooting star, the jasmine */

.cl-star {
  position: absolute;
  width: 16%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(236, 246, 255, 0), rgba(236, 246, 255, .55) 70%, #fff);
  box-shadow: 0 0 6px rgba(214, 232, 250, .7);
  transform-origin: 100% 50%;
  opacity: 0;
}

.cl-petal {
  position: absolute;
  background-image: url(../assets/cover/petals.webp);
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 2px rgba(4, 16, 28, .35));
  opacity: 0;
}

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

.cl-block {
  position: absolute;
  container-type: size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  --u: calc(min(1cqw, 1.9cqh) * var(--fit, 1));
}

.cl-block > * { margin: 0; }

.cl-sky {
  left: var(--sky-l);
  right: calc(100% - var(--sky-r));
  top: var(--sky-t);
  bottom: calc(100% - var(--sky-b));
}

.cl-water {
  left: var(--wat-l);
  right: calc(100% - var(--wat-r));
  top: var(--wat-t);
  bottom: calc(100% - var(--wat-b));
}

/* a faint deepening of the night behind the words, so the pearl reads over the stars and the
   water's reflections */
.cl-block::before {
  content: "";
  position: absolute;
  inset: -6% -12% -8%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(8, 24, 40, .34), rgba(8, 24, 40, .16) 60%, transparent);
}

/* over the water it is deeper, and under the diyas' light, so the flames still glow through it */
.cl-water::before { display: none; }

.cl-veil {
  position: absolute;
  left: calc(var(--wat-l) - (var(--wat-r) - var(--wat-l)) * .08);
  right: calc(100% - var(--wat-r) - (var(--wat-r) - var(--wat-l)) * .08);
  top: calc(var(--wat-t) - (var(--wat-b) - var(--wat-t)) * .04);
  bottom: calc(100% - var(--wat-b) - (var(--wat-b) - var(--wat-t)) * .04);
  background: radial-gradient(closest-side, rgba(8, 26, 40, .72), rgba(8, 26, 40, .48) 62%, transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.closing.is-told .cl-veil { opacity: 1; }

.cl-dua {
  font: 400 calc(var(--u) * 6.8)/1.75 "Amiri", serif;
  text-wrap: balance;
  text-shadow: 0 0 12px rgba(180, 212, 238, .4), 0 1px 2px rgba(4, 16, 28, .8);
}

.cl-dua-en {
  margin-top: calc(var(--u) * .8) !important;
  font: italic 500 calc(var(--u) * 4.9)/1.35 "Cormorant Garamond", Georgia, serif;
  color: rgba(244, 241, 232, .94);
  text-wrap: balance;
  text-shadow: 0 1px 2px rgba(4, 16, 28, .9);
}

.cl-dua-ref,
.cl-kicker,
.cl-date {
  font: 700 calc(var(--u) * 3.2)/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .24em;
  padding-left: .24em;
  text-transform: uppercase;
  color: #c3d6e4;
  text-shadow: 0 1px 3px rgba(4, 16, 28, .95);
}

.cl-dua-ref { margin-top: calc(var(--u) * 1.6) !important; }

.cl-water { --u: calc(min(1cqw, 1.55cqh) * var(--fit, 1)); }

.cl-urdu {
  font: 400 calc(var(--u) * 4.7)/2.05 "Noto Nastaliq Urdu", serif;
  text-shadow: 0 1px 3px rgba(4, 16, 28, .95);
}

.cl-kicker { margin-top: calc(var(--u) * 1.2) !important; letter-spacing: .28em; padding-left: .28em; }

.cl-families {
  font: 500 calc(var(--u) * 4.4)/1.3 "Cormorant Garamond", Georgia, serif;
  text-shadow: 0 1px 3px rgba(4, 16, 28, .95);
}

.cl-names {
  margin-top: calc(var(--u) * 1.4) !important;
  font: 400 calc(var(--u) * 12.5)/1.05 "Allura", cursive;
  white-space: nowrap;
}

.cl-names .pearl {
  display: inline-block;
  padding: 0 .25em .08em;
}

.cl-date { margin-top: calc(var(--u) * .6) !important; }

/* until the diyas are lit: the hint where the words will be */
.closing:not(.is-told) .cl-water { visibility: hidden; }

.cl-hint {
  position: absolute;
  left: var(--wat-l);
  right: calc(100% - var(--wat-r));
  top: calc((var(--wat-t) + var(--wat-b)) / 2);
  translate: 0 -50%;
  margin: 0;
  text-align: center;
  font: italic 500 clamp(15px, 4.6cqmin, 22px)/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: cl-hint 2.8s ease-in-out infinite;
}

.closing.is-lighting .cl-hint,
.closing.is-lit .cl-hint { visibility: hidden; animation: none; }

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

/* ------------------------------------------------------------ Replay, and the credit */

.cl-foot {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--step-y);
  translate: 0 -50%;
  margin: 0;
  text-align: center;
}

.closing:not(.is-told) .cl-foot { visibility: hidden; }

.cl-replay {
  padding: 10px 18px 9px;
  border: 1px solid rgba(236, 244, 250, .55);
  border-radius: 999px;
  background: rgba(10, 30, 46, .62);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  color: var(--pearl);
  font: 700 clamp(10.5px, 3cqmin, 13px)/1.1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}

.cl-replay:hover { background: rgba(14, 40, 60, .75); }
.cl-replay:focus-visible { outline: 2px solid var(--moon); outline-offset: 3px; }

.cl-by {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  margin: 0;
  text-align: center;
  font: 700 clamp(8px, 2.2cqmin, 10px)/1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .24em;
  padding-left: .24em;
  text-transform: uppercase;
  color: rgba(34, 64, 86, .78);
  pointer-events: none;
}

/* the keyboard's way to light them: unseen until it has the focus */
.cl-light {
  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;
}

.cl-light:focus-visible { opacity: 1; pointer-events: auto; outline: 2px solid var(--moon); outline-offset: 3px; }
.closing.is-lit .cl-light { display: none; }

@media (prefers-reduced-motion: reduce) {
  .closing.is-lit .cl-l { animation: none; }
  .cl-hint { animation: none; }
}