/* The closing: the rose arch at night.

   The invitation's day ends here: the gates in the morning, golden hour at the sundial, sunset
   at the water channel, and now night. An arch of climbing roses frames the misty garden and the
   pavilion under a full moon; the thank you and the closing dua sit in the calm sky inside it.

   The picture covers the section, whatever its shape (assets/closing/closing.css says where the
   moon, the calm sky, the lanterns and the pavilion are on each). The moon is its own layer, laid
   over the night with "screen", so it can rise; the lanterns' and the pavilion's light flicker;
   the fireflies and the petals are made by js/closing.js. On a sideways tablet the dua stands
   beside the thank you. */

.closing {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: #0e1531;
  color: #f6ece6;
  container-type: size;
  -webkit-tap-highlight-color: transparent;
}

.cl-scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, 100cqh * var(--pic-r));
  aspect-ratio: var(--pic-r);
  translate: -50% -50%;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  container-type: size;
}

.cl-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cl-art > * { position: absolute; }

/* the moon: its light alone, on black */
.cl-moon {
  left: var(--moon-l);
  top: var(--moon-t);
  width: var(--moon-w);
  aspect-ratio: 1;
  background-size: 100% 100%;
  mix-blend-mode: screen;
}

/* the lanterns' and the pavilion's warm light, breathing */
.cl-glow {
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 196, 120, .5), rgba(255, 170, 90, .18) 45%, rgba(255, 160, 80, 0));
  mix-blend-mode: screen;
  animation: cl-flicker 3.1s ease-in-out infinite alternate;
}

.cl-lamp1 { left: var(--lamp1-x); top: var(--lamp1-y); width: 16cqw; }
.cl-lamp2 { left: var(--lamp2-x); top: var(--lamp2-y); width: 16cqw; animation-duration: 2.6s; animation-delay: -1.2s; }
.cl-pav { left: var(--pav-x); top: var(--pav-y); width: 24cqw; aspect-ratio: 1.6; animation-duration: 4.4s; opacity: .8; }

@keyframes cl-flicker {
  0%   { opacity: .55; scale: .96; }
  30%  { opacity: .85; scale: 1.02; }
  55%  { opacity: .68; scale: .99; }
  80%  { opacity: .95; scale: 1.04; }
  100% { opacity: .72; scale: 1; }
}

/* a soft shade behind the words, so they read on the clouds */
.cl-veil {
  inset: 0;
  background: radial-gradient(ellipse calc((var(--in-r) - var(--in-l)) * .62) calc((var(--in-b) - var(--in-t)) * .62)
    at 50% calc((var(--in-t) + var(--in-b)) / 2), rgba(10, 14, 38, .5), rgba(10, 14, 38, .28) 60%, rgba(10, 14, 38, 0));
}

.cl-flies,
.cl-petals { inset: 0; }

.cl-flies { mix-blend-mode: screen; }

.cl-fly {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--fly, .8cqw);
  aspect-ratio: 1;
}

.cl-fly b {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, #fffbe0 0, #ffe9a0 35%, rgba(255, 214, 110, 0) 72%);
  box-shadow: 0 0 calc(var(--fly, .8cqw) * 2) calc(var(--fly, .8cqw) * .7) rgba(255, 214, 120, .62), 0 0 calc(var(--fly, .8cqw) * 5) calc(var(--fly, .8cqw) * .6) rgba(255, 200, 100, .22);
}

.cl-petal {
  position: absolute;
  left: 0;
  top: 0;
  perspective: 300px;
}

.cl-petal b { display: block; transform-style: preserve-3d; }
.cl-petal img { width: 100%; height: auto; filter: brightness(.72) saturate(.9) drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }

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

/* In the calm sky inside the arch. Sized by that space (--u), and made smaller still (--fit, by
   js/closing.js) if they would not fit. */
.cl-words {
  --iw: calc((var(--in-r-n) - var(--in-l-n)) * 100cqw);
  --ih: calc((var(--in-b-n) - var(--in-t-n)) * 100cqh);
  --u: calc(min(var(--iw), var(--ih) * .9) * var(--fit, 1));
  position: absolute;
  left: var(--in-l);
  right: calc(100% - var(--in-r));
  top: var(--in-t);
  bottom: calc(100% - var(--in-b));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * .06);
  text-align: center;
}

.cl-words p { margin: 0; }
.cl-words * { text-shadow: 0 0 14px rgba(8, 10, 32, .9), 0 0 3px rgba(8, 10, 32, .75); }

.cl-thanks,
.cl-dua {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cl-kicker {
  font: 600 max(10.5px, var(--u) * .036)/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .3em;
  padding-left: .3em;
  text-transform: uppercase;
  color: #cdd8c0;
}

.cl-title {
  margin: 0 0 calc(var(--u) * .01);
  font: 700 calc(var(--u) * .2)/1.05 "Corinthia", cursive;
  padding: 0 .2em .04em;
  white-space: nowrap;
  color: #f2cdbf;
  --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));
}

.cl-msg {
  max-width: 30em;
  font: italic 500 max(14px, var(--u) * .052)/1.4 "Cormorant Garamond", Georgia, serif;
  color: rgba(246, 236, 230, .95);
  text-wrap: balance;
}

.cl-sign {
  margin-top: .55em !important;
  font: 600 max(15px, var(--u) * .062)/1.2 "Cormorant Garamond", Georgia, serif;
  color: #f6ece6;
}

.cl-fams { font: italic 500 max(12.5px, var(--u) * .042)/1.3 "Cormorant Garamond", Georgia, serif; color: rgba(246, 236, 230, .85); }

.cl-dua { gap: calc(var(--u) * .012); }

.cl-dua-ar {
  font: 400 max(17px, var(--u) * .062)/1.95 "Amiri Quran", "Amiri", serif;
  color: #f0c9bb;
  text-wrap: balance;
}

.cl-dua-en {
  max-width: 30em;
  font: italic 500 max(13px, var(--u) * .045)/1.4 "Cormorant Garamond", Georgia, serif;
  color: rgba(246, 236, 230, .92);
  text-wrap: balance;
}

.cl-dua-ref {
  margin-top: .3em !important;
  font: 600 max(9.5px, var(--u) * .031)/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #cdd8c0;
}

.cl-credit {
  margin-top: 1.6em !important;
  font: 500 max(10px, var(--u) * .03)/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .14em;
  color: rgba(240, 232, 226, .55);
}

/* Waiting for the moon (js/closing.js). */
.closing.is-armed:not(.is-played) .cl-anim,
.closing.is-armed:not(.is-played) .cl-moon { opacity: 0; }

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

/* A sideways tablet: the calm sky is wide and short, so the dua stands beside the thank you. */
@media (min-aspect-ratio: 6/5) {
  html.is-tablet .cl-words {
    --u: calc(min(var(--iw) * .62, var(--ih) * 1.2) * var(--fit, 1));
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: calc(var(--u) * .12);
  }
  html.is-tablet .cl-thanks { grid-column: 1; }
  html.is-tablet .cl-dua { grid-column: 2; }
}

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

@media (prefers-reduced-motion: reduce) {
  .cl-glow { animation: none; opacity: .75; }
  .closing.is-armed:not(.is-played) .cl-anim,
  .closing.is-armed:not(.is-played) .cl-moon { opacity: 1; }
}