/* The closing, outside the hall at night (surface S): the hall from its garden terrace, the dark
   terrace below for the words.

   The picture is drawn three ways (assets/closing/closing.css, from build_closing.py) and lies
   across the section's full width from its top; below it the terrace is black, and the section
   goes on in black as far as the words need. --cl-line is where the terrace begins on the
   picture, --cl-dome where the top of the dome is.
     .cl-stage     the picture's box: the scene, the initials, the lanterns and the sky to touch
     .cl-words     on the terrace: the dua, the thank you, the sign-off, Replay, the credit
   Lanterns (js/closing.js) are placed in the stage's box, in fractions of it.
*/

.closing {
  --lw: clamp(22px, 6.6cqi, 46px);          /* a lantern's width, at the terrace */
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #020100;
  color: var(--ivory);
  text-align: center;
  container-type: inline-size;
  -webkit-tap-highlight-color: transparent;
}

.cl-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  aspect-ratio: var(--cl-r);
}

.cl-scene {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* the picture's foot melts into the black below it */
.cl-scene::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12%;
  background: linear-gradient(180deg, rgba(2, 1, 0, 0), #020100);
}

/* the sky and the hall, to touch: everything above the terrace */
.cl-sky {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 100%;
  height: calc(var(--cl-line) * 100%);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cl-sky:focus { outline: none; }
.cl-sky:focus-visible { outline: 2px solid rgba(240, 217, 156, .7); outline-offset: -8px; border-radius: 16px; }

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

.cl-lanterns {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* one lantern: placed by its middle; --s is how small it has grown with height */
.cl-lantern {
  position: absolute;
  width: var(--lw);
  aspect-ratio: var(--ln-r);
  translate: -50% -50%;
  transform: scale(var(--s, 1));
}

.cl-ln-bob {
  position: absolute;
  inset: 0;
  animation: cl-bob 6s ease-in-out var(--d, 0s) infinite paused;
}

.closing.is-visible .cl-ln-bob { animation-play-state: running; }

@keyframes cl-bob {
  0%, 100% { transform: translate(0, 0) rotate(-1.5deg); }
  50%      { transform: translate(0, -7%) rotate(1.5deg); }
}

.cl-ln-bob > i {
  position: absolute;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.cl-ln-art { inset: 0; }

/* its light on the night around it, breathing a little like a flame */
.cl-ln-glow {
  inset: -120% -170%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 196, 104, .5), rgba(255, 170, 70, .16) 50%, rgba(255, 160, 60, 0));
  animation: cl-flicker 2.6s ease-in-out var(--d, 0s) infinite paused;
}

.closing.is-visible .cl-ln-glow { animation-play-state: running; }

@keyframes cl-flicker {
  0%, 100% { opacity: 1; }
  30%      { opacity: .82; }
  55%      { opacity: .95; }
  75%      { opacity: .78; }
}

/* ------------------------------------------------------------ the finale: the initials */

.cl-mono {
  position: absolute;
  left: 50%;
  top: calc(var(--cl-dome) * 50%);
  z-index: 1;
  margin: 0;
  translate: -50% -50%;
  padding: 0 .2em .06em;
  white-space: nowrap;
  font: 600 clamp(34px, 11cqi, 72px) / 1 'Cormorant Garamond', Georgia, serif;
  letter-spacing: .06em;
  background: var(--gold-leaf);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(255, 196, 104, .55)) drop-shadow(0 0 26px rgba(255, 170, 70, .3));
  /* written in, left to right (--wipe, registered in hero.css) */
  --wipe: -2%;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 16%), transparent var(--wipe));
          mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 16%), transparent var(--wipe));
  pointer-events: none;
}

.cl-mono i { font-style: italic; font-weight: 500; margin: 0 .12em; }

.closing.is-finale .cl-mono { --wipe: 130%; }

/* ------------------------------------------------------------ the words, on the terrace */

.cl-words {
  position: relative;
  z-index: 4;
  padding:
    calc(100cqi / var(--cl-r) * (var(--cl-line) + .03)) 16px
    calc(clamp(26px, 7cqi, 52px) + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}

.cl-text {
  position: relative;
  max-width: 34em;
  margin: 0 auto;
  font-size: clamp(15px, 4.3cqi, 19px);
}

/* a soft darkness under the words, as the terrace still shines a little */
.cl-text::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -6% -14% -4%;
  background: radial-gradient(closest-side, rgba(2, 1, 0, .78), rgba(2, 1, 0, .5) 60%, rgba(2, 1, 0, 0));
}

.cl-text > * { margin: 0; text-shadow: 0 1px 6px rgba(0, 0, 0, .95); }
.cl-text button { pointer-events: auto; }

.cl-hint {
  margin-bottom: 1em !important;
  font: italic 500 1em / 1.3 'Cormorant Garamond', Georgia, serif;
  color: #f0d99c;
  animation: cl-breathe 3.2s ease-in-out infinite;
  transition: opacity .8s;
}

@keyframes cl-breathe { 50% { opacity: .45; } }

.closing.is-lit .cl-hint { opacity: 0; animation: none; }

.cl-dua {
  font: 400 1.45em / 1.95 'Amiri', serif;
  color: #f0d99c;
  text-wrap: balance;
}

.cl-dua-en {
  margin-top: .2em !important;
  font: italic 500 1em / 1.4 'Cormorant Garamond', Georgia, serif;
  color: var(--ivory);
  text-wrap: balance;
}

.cl-ref {
  margin-top: .45em !important;
  font: 600 .66em / 1.3 'Cormorant Garamond', Georgia, serif;
  letter-spacing: .22em;
  padding-left: .22em;
  text-transform: uppercase;
  color: var(--gold);
}

.cl-title {
  margin-top: .3em !important;
  font-size: clamp(50px, 14cqi, 88px);
}

.cl-title .gold-leaf { padding: 0 .2em .08em; }

.cl-line {
  font: italic 500 1.02em / 1.35 'Cormorant Garamond', Georgia, serif;
  color: var(--ivory);
  text-wrap: balance;
}

.cl-sign {
  margin-top: .9em !important;
  font: 600 .74em / 1.6 'Cormorant Garamond', Georgia, serif;
  letter-spacing: .22em;
  padding-left: .22em;
  text-transform: uppercase;
  color: #e6d3a4;
}

.cl-replay {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 1.2em;
  padding: 0 1.4em;
  border: 1px solid #b08a3e;
  border-radius: 999px;
  background: rgba(20, 16, 11, .72);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(240, 217, 156, .16);
  color: #f0d99c;
  font: 700 .9em / 1 'Cormorant Garamond', Georgia, serif;
  letter-spacing: .06em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cl-replay:hover { background: rgba(42, 35, 26, .85); }
.cl-replay:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.cl-credit {
  margin-top: 1.1em !important;
  font: italic 500 .74em / 1.3 'Cormorant Garamond', Georgia, serif;
  letter-spacing: .04em;
  color: #bfa877;
}

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

@media (min-aspect-ratio: 6/5) {
  html.is-tablet .closing { --lw: clamp(22px, 3.4cqi, 46px); }
  html.is-tablet .cl-text { font-size: clamp(15px, 1.55cqi, 19px); }
  html.is-tablet .cl-title { font-size: clamp(50px, 5.4cqi, 80px); }
  html.is-tablet .cl-mono { font-size: clamp(34px, 5cqi, 64px); }
}

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

@media (prefers-reduced-motion: reduce) {
  .cl-ln-bob, .cl-ln-glow, .cl-hint { animation: none; }
}