/* The closing: the palace at night, across its pool.

   The stage is one grid cell holding the scene (the palace and the pool, a picture whose sky
   fades into the stage's own) at the bottom and the words at the top, in the sky. The words
   keep clear of the palace: their bottom margin is the part of the picture below the tips of
   its minarets (--reach, from assets/closing/closing.css). If they need more room, the
   stage grows and there is more sky.

   The pictures: phones and narrow columns get the 9:16 one, wider columns (upright tablets,
   the laptop column) the 3:4 one, sideways tablets the 16:9 one. js/closing.js reads
   --variant to know which pool it is floating diyas on.

   In the scene: a canvas of glints on the palace's mirror-work, and the diyas (each placed
   and drifted by js/closing.js, with its own flame glow, its light on the water and its
   reflection). Over the water, the button that floats one. Below, the footer: replay and the
   maker's name. */

.closing {
  position: relative;
  overflow: hidden;
  background: var(--emerald-night);
  color: var(--ivory);
  text-align: center;
  container: closing / inline-size;
  -webkit-tap-highlight-color: transparent;
}

.cl-stage,
.cl-foot {
  --variant: phone;
  --scene: url(../assets/closing/scene.webp);
  --scene-r: var(--scene-r-phone);
  --reach: var(--reach-phone);
  --sky-top: var(--sky-top-phone);
  --water-foot: var(--water-foot-phone);
}

@container closing (min-width: 560px) {
  .cl-stage,
  .cl-foot {
    --variant: tab;
    --scene: url(../assets/closing/scene-tab.webp);
    --scene-r: var(--scene-r-tab);
    --reach: var(--reach-tab);
    --sky-top: var(--sky-top-tab);
    --water-foot: var(--water-foot-tab);
  }
}

.cl-stage {
  position: relative;
  display: grid;
  grid-template: 1fr / 100%;
  background: var(--sky-top);
}

.cl-stage > * { grid-area: 1 / 1; }

.cl-moon {
  position: absolute;
  z-index: 1;
  top: clamp(12px, 3.5cqi, 26px);
  right: 9%;
  width: clamp(40px, 11cqi, 64px);
  filter: drop-shadow(0 0 12px rgba(255, 240, 205, .35));
  pointer-events: none;
}

/* ------------------------------------------------------------ the scene */

.cl-scene {
  align-self: end;
  position: relative;
  width: 100%;
  aspect-ratio: var(--scene-r);
  background: var(--scene) center / 100% 100% no-repeat;
  -webkit-mask: linear-gradient(transparent, #000 6%, #000 95%, transparent);
          mask: linear-gradient(transparent, #000 6%, #000 95%, transparent);
  overflow: hidden;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.cl-glints {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  pointer-events: none;
}

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

/* A diya. Its box is the picture's; (left, top) and the size are set so the middle of its
   waterline (--wl) is where it floats, and it turns and scales about that point. --fx and --fy
   are its flame. */
.cl-diya {
  position: absolute;
  display: block;
  transform-origin: 50% var(--wl);
}

.cl-diya img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cl-land,
.cl-bob,
.cl-refl {
  position: absolute;
  inset: 0;
  transform-origin: 50% var(--wl);
}

.cl-bob { animation: cl-bob var(--bt, 3.4s) ease-in-out var(--bd, 0s) infinite alternate; }

@keyframes cl-bob {
  from { transform: translateY(0) rotate(-1.6deg); }
  to { transform: translateY(-2.2%) rotate(1.6deg); }
}

/* the flame's glow, flickering */
.cl-halo {
  position: absolute;
  left: var(--fx);
  top: var(--fy);
  width: 170%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(255, 226, 160, .62), rgba(255, 190, 100, .2) 42%, transparent);
  mix-blend-mode: screen;
  animation: cl-flicker var(--ft, 1.3s) ease-in-out var(--fd, 0s) infinite alternate;
}

@keyframes cl-flicker {
  0% { opacity: .78; scale: .94; }
  45% { opacity: 1; scale: 1.04; }
  70% { opacity: .86; scale: .98; }
  100% { opacity: .96; scale: 1.02; }
}

/* its reflection: the picture turned over at the waterline, darker, fading down */
.cl-refl {
  transform: scaleY(-.8);
  opacity: .4;
  filter: brightness(.72) blur(.5px);
  -webkit-mask: linear-gradient(transparent 8%, rgba(0, 0, 0, .9) 72%);
          mask: linear-gradient(transparent 8%, rgba(0, 0, 0, .9) 72%);
}

.cl-refl img { animation: cl-wobble var(--bt, 3.4s) ease-in-out var(--bd, 0s) infinite alternate; }

@keyframes cl-wobble {
  from { transform: skewX(-3deg) scaleX(1.02); }
  to { transform: skewX(3deg) scaleX(.98); }
}

/* its flame's light lying on the water */
.cl-glade {
  position: absolute;
  left: var(--fx);
  top: var(--wl);
  width: 46%;
  height: 190%;
  translate: -50% -4%;
  transform-origin: 50% 0;
  background: radial-gradient(ellipse 50% 50% at 50% 8%, rgba(255, 214, 140, .62), rgba(255, 190, 100, .2) 55%, transparent);
  mix-blend-mode: screen;
  animation: cl-glade var(--ft, 1.3s) ease-in-out var(--fd, 0s) infinite alternate;
}

@keyframes cl-glade {
  0% { transform: scale(.78, .92); opacity: .75; }
  50% { transform: scale(1.08, 1.04); opacity: 1; }
  100% { transform: scale(.9, 1); opacity: .85; }
}

/* the rings a diya sends out as it is set down */
.cl-ripple {
  position: absolute;
  border: 1.5px solid rgba(255, 228, 175, .55);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 214, 140, .25);
  pointer-events: none;
}

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

.cl-words {
  align-self: start;
  position: relative;
  z-index: 1;
  padding: clamp(66px, 18cqi, 96px) 20px 0;
  margin-bottom: calc(100cqi / var(--scene-r) * (1 - var(--reach)) + clamp(12px, 3cqi, 26px));
}

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

.cl-dua {
  font: 400 clamp(19px, 5.5cqi, 34px)/1.9 "Amiri", serif;
  text-wrap: balance;
  color: var(--gold-soft);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}

.cl-dua-en {
  max-width: 30em;
  margin-inline: auto !important;
  font: italic 500 clamp(15px, 4.4cqi, 20px)/1.4 "Cormorant Garamond", Georgia, serif;
  color: rgba(245, 239, 226, .88);
  text-wrap: balance;
}

/* two gold lines and a small mirror between them */
.cl-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(240px, 62%);
  margin: clamp(14px, 4cqi, 22px) auto !important;
}

.cl-divider::before,
.cl-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.cl-divider::after { background: linear-gradient(90deg, var(--gold), transparent); }

.cl-divider i {
  width: 9px;
  height: 9px;
  rotate: 45deg;
  border: 1px solid var(--gold);
  background: linear-gradient(135deg, #fffaf0, #b9c8c2 45%, #eef3f0 60%, #8fa39b);
  box-shadow: 0 0 8px rgba(255, 244, 214, .6);
}

.cl-thanks {
  max-width: 22em;
  margin-inline: auto !important;
  font: 500 clamp(17px, 5cqi, 23px)/1.4 "Cormorant Garamond", Georgia, serif;
  color: var(--ivory);
  text-wrap: balance;
}

.cl-sign {
  margin-top: clamp(16px, 4.6cqi, 26px) !important;
  font-weight: 400;
}

.cl-with {
  display: block;
  font: italic 500 clamp(15px, 4.2cqi, 19px)/1.3 "Cormorant Garamond", Georgia, serif;
  color: var(--gold);
  letter-spacing: .02em;
}

.cl-fam {
  display: block;
  padding: .04em .3em .1em;
  font: 400 clamp(32px, 8.4cqi, 50px)/1.2 "Alex Brush", cursive;
  background: url(../assets/hero/gold.webp) 0 0 / 4em 4em;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 .03em .03em rgba(0, 0, 0, .6));
  text-wrap: balance;
}

/* ------------------------------------------------------------ floating one */

.cl-float {
  align-self: end;
  justify-self: center;
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: 42px;
  margin-bottom: clamp(18px, 6cqi, 40px);
  padding: 5px 16px 5px 8px;
  border: 1px solid rgba(230, 207, 152, .5);
  border-radius: 999px;
  background: rgba(3, 23, 15, .55);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
  color: var(--gold-soft);
  font: italic 600 clamp(14.5px, 4.1cqi, 17px)/1.1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* without the script there is nothing to float */
.closing:not(.is-ready) .cl-float { display: none; }

.cl-float img { width: 30px; height: auto; }
.cl-float:hover { border-color: var(--gold-soft); background: rgba(6, 42, 33, .7); }
.cl-float:focus-visible,
.cl-replay:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }

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

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

.cl-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 10px 16px calc(34px + env(safe-area-inset-bottom));
  background: var(--water-foot);
}

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

.cl-replay {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 40px;
  padding: 6px 18px;
  border: 1px solid rgba(230, 207, 152, .6);
  border-radius: 999px;
  background: rgba(6, 42, 33, .7);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  color: var(--gold-soft);
  font: 700 clamp(13px, 3.8cqi, 15px)/1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .06em;
  cursor: pointer;
}

.cl-replay:hover { background: rgba(11, 74, 59, .85); border-color: var(--gold-soft); }

.cl-replay svg {
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cl-credit {
  font: 600 11px/1.4 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .26em;
  padding-left: .26em;
  text-transform: uppercase;
  color: rgba(201, 164, 92, .72);
}

.cl-credit span {
  font: italic 600 1.35em/1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--gold-soft);
}

/* ------------------------------------------------------------ coming in (js/closing.js) */

/* Hidden at once when the script is ready (.is-ready); the transitions belong to .is-seen, so
   only coming in is animated. */
.closing.is-ready:not(.is-seen) .cl-scene { filter: brightness(.42) saturate(.75); }
.closing.is-ready:not(.is-seen) .cl-dua { clip-path: inset(-20% 0 -20% 100%); }
.closing.is-ready:not(.is-seen) .cl-fam { clip-path: inset(-30% 100% -30% -10%); }
.closing.is-ready:not(.is-seen) :is(.cl-dua-en, .cl-thanks, .cl-with, .cl-float) { opacity: 0; translate: 0 10px; }
.closing.is-ready:not(.is-seen) .cl-divider { opacity: 0; scale: .2 1; }
.closing.is-ready:not(.is-seen) .cl-moon { opacity: 0; }

.closing.is-seen .cl-scene { transition: filter 2.6s ease .15s; }
.closing.is-seen .cl-moon { transition: opacity 2s ease .3s; }
.closing.is-seen .cl-dua { clip-path: inset(-20% 0 -20% 0); transition: clip-path 1.8s cubic-bezier(.4, .1, .3, 1) .5s; }
.closing.is-seen :is(.cl-dua-en, .cl-thanks, .cl-with, .cl-float) {
  transition: opacity 1.1s ease, translate 1.3s cubic-bezier(.2, .7, .2, 1);
}
.closing.is-seen .cl-dua-en { transition-delay: 1.6s; }
.closing.is-seen .cl-divider { transition: opacity .8s ease 2s, scale 1.2s cubic-bezier(.3, .7, .2, 1) 2s; }
.closing.is-seen .cl-thanks { transition-delay: 2.4s; }
.closing.is-seen .cl-with { transition-delay: 2.9s; }
.closing.is-seen .cl-fam { clip-path: inset(-30% -10% -30% -10%); transition: clip-path 1.7s cubic-bezier(.4, .1, .3, 1) 3.1s; }
.closing.is-seen .cl-float { transition-delay: 4.4s; }

@media (prefers-reduced-motion: reduce) {
  .closing.is-seen :is(.cl-scene, .cl-dua, .cl-dua-en, .cl-divider, .cl-thanks, .cl-with, .cl-fam, .cl-float, .cl-moon) { transition: none; }
  .cl-bob,
  .cl-refl img,
  .cl-halo,
  .cl-glade { animation: none; }
}

/* ------------------------------------------------------------ tablets */

/* Upright or sideways, the palace and the words fill the screen; the foot comes after. */
html.is-tablet .cl-stage { min-height: 100svh; }

@media (min-aspect-ratio: 6/5) {
  html.is-tablet .cl-stage,
  html.is-tablet .cl-foot {
    --variant: land;
    --scene: url(../assets/closing/scene-land.webp);
    --scene-r: var(--scene-r-land);
    --reach: var(--reach-land);
    --sky-top: var(--sky-top-land);
    --water-foot: var(--water-foot-land);
  }

  html.is-tablet .cl-words {
    padding-top: clamp(24px, 3.2svh, 48px);
    margin-bottom: calc(100cqi / var(--scene-r) * (1 - var(--reach)) + 6px);
  }
  html.is-tablet .cl-dua { font-size: clamp(24px, 3.9svh, 34px); line-height: 1.7; }
  html.is-tablet .cl-dua-en { max-width: 44em; font-size: clamp(15px, 2.3svh, 19px); }
  html.is-tablet .cl-divider { margin: clamp(8px, 1.6svh, 16px) auto !important; }
  html.is-tablet .cl-thanks { max-width: 40em; font-size: clamp(16px, 2.5svh, 21px); }
  html.is-tablet .cl-sign { margin-top: clamp(8px, 1.8svh, 18px) !important; }
  /* the names on one line with "With love and duas," */
  html.is-tablet .cl-with { display: inline-block; margin-right: .5em; }
  html.is-tablet .cl-fam { display: inline-block; font-size: clamp(32px, 5.6svh, 50px); }
  html.is-tablet .cl-moon { right: 6%; }
}