/* The closing: the hero's palace again, at dusk, and the last words.

   One screen, like the hero: the evening paper sky (a gold crescent moon near
   the top), the palace with its windows lit and diyas along the pool, the
   hero's roses in the corners, and paper sky lanterns rising (js/closing.js)
   from behind the palace, with any the guest releases rising in front of it.
   Over the sky: a dua for the couple, in Arabic and English, and the
   families' sign-off, with a button to release a lantern. Below the scene, a
   way back to the sealed envelope, and who made the invitation.

   Sized in --u, as the hero is, by the stage's shape (container queries):
     phone      narrower than 5:8: --u is 1cqw, or less on a short phone, so
                the palace and the words share the height
     upright    5:8 to 6:5 (tablets upright, the laptop column): the larger
                sky and palace, the words sized to the 3:4 box that fits
     sideways   6:5 and wider (tablets sideways): the wide sky, the palace with
                its garden walls, the words on fewer lines
*/

.closing {
  position: relative;
  background: var(--paper);
  container: ksec / inline-size;
}

.closing-stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  container: kstage / size;
}

.closing img { user-select: none; -webkit-user-drag: none; }

/* The measurements the layout hangs on (phone). The palace is as wide as the
   stage allows while it stays under 44% of the height. */
.closing-stage > * {
  --u: min(1cqw, .52cqh);
  --pal-r: 1.0152;
  --pal-w: min(94cqw, calc(41cqh * var(--pal-r)));
  --words-top: 17cqh;
  --lan: 1.2;                    /* lantern size, in --u, is 5-9 times this */
}

/* A short phone (wider than 1:1.9): a smaller palace and words, so the
   button stays clear of the dome. */
@container kstage (min-aspect-ratio: 10 / 19) {
  .closing-stage > * {
    --u: min(1cqw, .48cqh);
    --pal-w: min(94cqw, calc(36cqh * var(--pal-r)));
    --words-top: 16cqh;
  }
}

/* ------------------------------------------------------------ back to front */

.k-sky {
  position: absolute;
  inset: 0;
  background: var(--paper) url(../assets/closing/sky.webp) 50% 0 / cover no-repeat;
}

.k-lanterns {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.k-palace {
  position: absolute;
  left: calc(50cqw - var(--pal-w) / 2);
  bottom: -1cqw;
  width: var(--pal-w);
  aspect-ratio: var(--pal-r);
  background: url(../assets/closing/palace.webp) 50% 100% / 100% 100% no-repeat;
  transform-origin: 50% 100%;
}

.k-roses {
  position: absolute;
  bottom: -3cqw;
  width: 44cqw;
  pointer-events: none;
}

.k-roses img { width: 100%; }
.k-roses-l { left: -5cqw; transform-origin: 0 100%; }
.k-roses-r { right: -5cqw; transform-origin: 100% 100%; }

/* ------------------------------------------------------------ the lanterns */

.k-lantern {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform, opacity;
}

.k-drift {
  position: relative;
  display: block;
  animation: k-drift var(--dt, 7s) ease-in-out var(--dd, 0s) infinite alternate;
}

.k-lantern img {
  position: relative;
  width: 100%;
  transform-origin: 50% 15%;
  animation: k-sway var(--st, 5s) ease-in-out var(--sd, 0s) infinite alternate;
}

/* its light, which flickers */
.k-glow {
  position: absolute;
  left: -70%;
  right: -70%;
  top: -35%;
  bottom: -55%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 190, 96, .62), rgba(255, 196, 110, .22) 55%, rgba(255, 196, 110, 0));
  animation: k-flicker var(--ft, 2.6s) ease-in-out var(--fd, 0s) infinite;
}

@keyframes k-drift {
  from { transform: translateX(calc(var(--dx, 2cqw) * -1)); }
  to   { transform: translateX(var(--dx, 2cqw)); }
}

@keyframes k-sway {
  from { rotate: -3.5deg; }
  to   { rotate: 3.5deg; }
}

@keyframes k-flicker {
  0%, 100% { opacity: .82; }
  30%      { opacity: 1; }
  48%      { opacity: .7; }
  66%      { opacity: .95; }
  80%      { opacity: .78; }
}

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

.k-words {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--words-top);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 calc(7 * var(--u));
  text-align: center;
  color: var(--ink);
  pointer-events: none;
}

.k-words > * { margin: 0; pointer-events: auto; }

.k-dua {
  max-width: calc(84 * var(--u));
  font: 400 calc(6.4 * var(--u))/1.85 "Amiri", "Amiri Quran", serif;
  color: var(--ink);
  text-shadow: 0 0 .5em rgba(252, 243, 228, .9);
  text-wrap: balance;
}

.k-dua-en {
  max-width: calc(76 * var(--u));
  margin-top: calc(1 * var(--u)) !important;
  font: italic 500 calc(3.9 * var(--u))/1.45 "Cormorant Garamond", Georgia, serif;
  color: var(--ink-soft);
  text-shadow: 0 0 .6em rgba(252, 243, 228, .95);
  text-wrap: balance;
}

.k-divider {
  width: calc(40 * var(--u));
  margin-top: calc(3.2 * var(--u)) !important;
}

.k-sign {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(2.6 * var(--u)) !important;
  font-weight: 400;
  text-shadow: 0 0 .5em rgba(252, 243, 228, .9);
}

.k-with {
  font: italic 500 calc(4.4 * var(--u))/1.3 "Cormorant Garamond", Georgia, serif;
  color: var(--ink-soft);
}

.k-fam {
  max-width: calc(80 * var(--u));
  font: 400 calc(9 * var(--u))/1.12 "Pinyon Script", cursive;
  color: var(--ink);
  text-wrap: balance;
}

.k-release {
  display: inline-flex;
  align-items: center;
  gap: calc(1.4 * var(--u));
  min-height: 40px;
  margin-top: calc(3.6 * var(--u));
  padding: calc(.8 * var(--u)) calc(3.4 * var(--u)) calc(.8 * var(--u)) calc(2.4 * var(--u));
  border: 1px solid rgba(169, 128, 63, .7);
  border-radius: 999px;
  background: rgba(255, 250, 240, .66);
  color: var(--ink);
  font: 600 max(12px, calc(3.4 * var(--u)))/1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .04em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s;
}

.k-release:hover { background: rgba(255, 250, 240, .95); }

.k-release img {
  width: calc(3.6 * var(--u));
  min-width: 14px;
  filter: drop-shadow(0 0 .3em rgba(255, 176, 70, .7));
}

.k-release:focus-visible,
.k-replay:focus-visible {
  outline: 2px solid #a9803f;
  outline-offset: 3px;
}

.k-sr,
.k-probe {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* for the script: how wide 100 --u is */
.k-probe { width: calc(100 * var(--u)); height: 0; visibility: hidden; clip-path: none; }

/* ------------------------------------------------------------ the foot */

.k-foot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 30px 24px max(34px, env(safe-area-inset-bottom));
  background: var(--paper) url(../assets/cover/liner.webp) 50% 0 / cover;
  box-shadow: inset 0 1px 0 rgba(169, 128, 63, .45);
  text-align: center;
}

.k-replay {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 24px 0 20px;
  border: 1px solid rgba(94, 20, 36, .55);
  border-radius: 999px;
  background: rgba(255, 250, 240, .7);
  color: var(--ink);
  font: 600 17px/1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .03em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s, color .2s;
}

.k-replay:hover { background: #5e1424; color: #f4ead9; }

.k-replay svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.k-credit {
  margin: 0;
  font: 600 11px/1.4 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: .8;
}

.k-credit span { color: var(--ink); }

/* ------------------------------------------------------------ upright tablet, laptop */

@container kstage (min-aspect-ratio: 5 / 8) {
  .closing-stage > * {
    --u: min(1cqw, .75cqh);
    --pal-w: min(66cqw, calc(44cqh * var(--pal-r)));
    --words-top: 21cqh;
    --lan: 1;
  }
  /* the sky is cut by width here, so it is lifted to keep the moon above the words */
  .k-sky { background-image: url(../assets/closing/sky-lg.webp); background-position: 50% 14%; }
  .k-palace { background-image: url(../assets/closing/palace-lg.webp); }
  .k-roses { width: 36cqw; bottom: -2cqw; }
  .k-dua { max-width: calc(76 * var(--u)); font-size: calc(4 * var(--u)); }
  .k-dua-en { max-width: calc(64 * var(--u)); font-size: calc(2.5 * var(--u)); }
  .k-divider { width: calc(30 * var(--u)); margin-top: calc(2.4 * var(--u)) !important; }
  .k-sign { margin-top: calc(2 * var(--u)) !important; }
  .k-with { font-size: calc(2.8 * var(--u)); }
  .k-fam { max-width: none; font-size: calc(6 * var(--u)); }
  .k-release { margin-top: calc(2.6 * var(--u)); font-size: calc(2.2 * var(--u)); }
  .k-release img { width: calc(2.4 * var(--u)); }
}

/* ------------------------------------------------------------ sideways tablet */

@container kstage (min-aspect-ratio: 6 / 5) {
  .closing-stage > * {
    --u: min(1cqw, 1.3333cqh);
    --pal-r: 2.5552;
    --pal-w: min(84cqw, calc(47cqh * var(--pal-r)));
    --words-top: 11cqh;
    --lan: .8;
  }
  .k-sky { background-image: url(../assets/closing/sky-wide.webp); background-position: 0 0; }
  .k-palace { background-image: url(../assets/closing/palace-wide.webp); bottom: -.6cqw; }
  .k-roses { width: 25cqw; }
  .k-dua { max-width: calc(80 * var(--u)); font-size: calc(3.1 * var(--u)); }
  .k-dua-en { max-width: calc(54 * var(--u)); font-size: calc(1.75 * var(--u)); margin-top: calc(.4 * var(--u)) !important; }
  .k-divider { width: calc(22 * var(--u)); margin-top: calc(1.6 * var(--u)) !important; }
  .k-sign { margin-top: calc(1.2 * var(--u)) !important; }
  .k-with { font-size: calc(1.9 * var(--u)); }
  .k-fam { font-size: calc(4.4 * var(--u)); }
  .k-release { margin-top: calc(1.8 * var(--u)); font-size: calc(1.55 * var(--u)); padding: calc(.6 * var(--u)) calc(2.2 * var(--u)) calc(.6 * var(--u)) calc(1.6 * var(--u)); }
  .k-release img { width: calc(1.7 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  .k-drift, .k-lantern img, .k-glow { animation: none; }
}