/* The closing: the hero's courtyard at dusk (surface S).

   The picture covers the section, whatever its shape (assets/closing/closing.css gives each
   shape's picture and where the words go, in % of the picture). On a sideways tablet it is held
   by its floor, so the words on the floor stay in view. Everything is placed in the picture's
   own percentages and sized by its height (--u, 1% of it):
   - .cl-glow: a canvas over the picture: the lamps and diyas flickering, the fountain glinting
     (added light, screen-blended)
   - .cl-sky: a canvas of what is in the sky: the moon, the stars coming out, the pigeons going
     home and the kites, cut to the sky inside the arch (js/closing.js), so the arch, the
     minarets, the domes and the rooftops stay in front of them
   - .cl-dua: the wedding dua in the sky, in Arabic and English, in ivory; under it .cl-fly, the
     hint, "Touch the sky to fly a kite", which is also the keyboard's way to send one up
   - .cl-foot: on the floor, the thank you, the families, Replay the invitation, the credit

   The words are ivory and brass here, as on the families' brick: cobalt glaze would be lost at
   dusk. They come in as the section is seen (.is-seen, set by js/closing.js). */

.closing {
  --cl-ivory: #f4e9d2;
  --cl-brass: #dcb46a;
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  container-type: size;
  isolation: isolate;
  background: #2b1d33;
  color: var(--cl-ivory);
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

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

.cl-court,
.cl-glow,
.cl-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

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

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

/* ------------------------------------------------------------ the dua, in the sky */

.cl-dua {
  position: absolute;
  left: 50%;
  top: var(--sky-t);
  width: var(--sky-w);
  translate: -50% 0;
  pointer-events: none;
}

.cl-dua > *,
.cl-foot > * { margin: 0; }

/* (as wide as the sky is where its first line is: the arch's cusps close in near its top) */
.cl-ar {
  width: var(--ar-w);
  margin-inline: auto !important;
  text-wrap: balance;
  font: 400 clamp(16px, calc(var(--u) * 2.6), 40px)/1.75 "Amiri", serif;
  text-shadow: 0 1px 2px rgba(12, 10, 40, .6), 0 0 18px rgba(24, 20, 70, .45);
}

.cl-en {
  width: 86%;
  margin: calc(var(--u) * .5) auto 0;
  font: italic 500 clamp(12px, calc(var(--u) * 1.72), 24px)/1.35 "Cormorant Garamond", Georgia, serif;
  text-wrap: balance;
  text-shadow: 0 1px 2px rgba(12, 10, 40, .7), 0 0 14px rgba(24, 20, 70, .5);
}

.cl-ref {
  margin-top: calc(var(--u) * .5);
  font: 700 clamp(9px, calc(var(--u) * 1.05), 14px)/1.2 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .22em;
  padding-left: .22em;
  text-transform: uppercase;
  color: var(--cl-brass);
  text-shadow: 0 1px 2px rgba(12, 10, 40, .75);
}

/* ------------------------------------------------------------ the hint, and the keyboard's kite */

.cl-fly {
  display: inline-block;
  margin-top: calc(var(--u) * .5);
  padding: .3em .9em;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--cl-ivory);
  font: italic 500 clamp(13px, calc(var(--u) * 1.5), 20px)/1.2 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .03em;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(12, 10, 40, .8), 0 0 12px rgba(24, 20, 70, .6);
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 1s ease;
}

.cl-fly-t { display: inline-block; animation: cl-breathe 3.4s ease-in-out infinite; }

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

.closing.is-seen .cl-fly { opacity: 1; transition-delay: 2.6s; }
.closing.is-seen.is-flown .cl-fly { opacity: 0; transition-delay: 0s; }
.closing .cl-fly:focus-visible { opacity: 1; outline: 2px solid var(--cl-brass); outline-offset: 2px; background: rgba(16, 29, 60, .45); }

/* ------------------------------------------------------------ the thank you, on the floor */

.cl-foot {
  position: absolute;
  left: 50%;
  bottom: var(--floor-b);
  width: var(--floor-w);
  translate: -50% 0;
  pointer-events: none;
}

/* a soft shade under the words, so they read on the lamplit brick */
.cl-foot::before {
  content: "";
  position: absolute;
  inset: -34% -16% -12%;
  z-index: -1;
  background: radial-gradient(ellipse 58% 58% at 50% 60%, rgba(26, 12, 8, .62), rgba(26, 12, 8, .3) 55%, transparent 74%);
  pointer-events: none;
}

.cl-thanks {
  font: italic 500 clamp(15px, calc(var(--u) * 1.9), 26px)/1.3 "Cormorant Garamond", Georgia, serif;
  text-wrap: balance;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}

.cl-with {
  margin-top: calc(var(--u) * .7) !important;
  font: 700 clamp(9px, calc(var(--u) * 1.05), 14px)/1.2 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .22em;
  padding-left: .22em;
  text-transform: uppercase;
  color: var(--cl-brass);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}

/* the families, in ivory glaze (as on the families' brick) */
.cl-fam {
  font: 400 clamp(26px, calc(var(--u) * 3.3), 46px)/1.15 "Great Vibes", cursive;
}

.cl-fam-g {
  display: inline-block;
  padding: 0 .28em .08em;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, 0) 62%, rgba(120, 70, 20, .35)),
    linear-gradient(90deg, #f6ecd6, #e9d6b0 30%, #fbf3e2 55%, #e2cda4 82%, #f6ecd6);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 .03em .02em rgba(20, 8, 4, .8)) drop-shadow(0 0 .25em rgba(0, 0, 0, .4));
}

.cl-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * .9);
  margin-top: calc(var(--u) * 1.1) !important;
}

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

.cl-replay {
  min-height: 40px;
  padding: .55em 1.4em;
  border: 1.5px solid rgba(220, 180, 106, .9);
  border-radius: 999px;
  background: rgba(16, 29, 60, .58);
  box-shadow: 0 2px 0 rgba(255, 255, 255, .12) inset, 0 6px 14px -4px rgba(0, 0, 0, .55);
  color: var(--cl-ivory);
  font: 700 clamp(13px, calc(var(--u) * 1.6), 19px)/1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .06em;
  cursor: pointer;
  pointer-events: auto;
}

.cl-replay:hover { background: rgba(29, 58, 130, .7); }
.cl-replay:focus-visible { outline: 2px solid var(--cl-brass); outline-offset: 3px; }

.cl-by {
  font: 600 clamp(9px, calc(var(--u) * 1.05), 13px)/1.2 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .2em;
  padding-left: .2em;
  text-transform: uppercase;
  color: rgba(244, 233, 210, .72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}

/* sideways tablets: less floor, so Replay and the credit side by side */
@media (min-aspect-ratio: 6/5) {
  html.is-tablet .cl-end {
    flex-direction: row;
    justify-content: center;
    gap: calc(var(--u) * 2.2);
  }
  html.is-tablet .cl-with { margin-top: calc(var(--u) * .4) !important; }
  html.is-tablet .cl-end { margin-top: calc(var(--u) * .8) !important; }
}

/* ------------------------------------------------------------ arriving */

.cl-dua > *,
.cl-foot > * { transition: opacity 1.4s ease, translate 1.6s cubic-bezier(.2, .7, .2, 1); }
.cl-dua > :nth-child(2) { transition-delay: .5s; }
.cl-dua > :nth-child(3) { transition-delay: .8s; }
.cl-dua > .cl-fly { transition: opacity 1s ease; translate: none !important; }
.cl-foot > :nth-child(1) { transition-delay: 1.1s; }
.cl-foot > :nth-child(2) { transition-delay: 1.4s; }
.cl-foot > :nth-child(3) { transition-delay: 1.6s; }
.cl-foot > :nth-child(4) { transition-delay: 2s; }

.closing.is-ready:not(.is-seen) .cl-dua > *,
.closing.is-ready:not(.is-seen) .cl-foot > * { opacity: 0; translate: 0 10px; }

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

@media (prefers-reduced-motion: reduce) {
  .cl-fly-t { animation: none; }
  .cl-fly,
  .cl-dua > *,
  .cl-foot > * { transition: none; }
}