/* The opening: the jasmine curtain, let down and closed in the pavilion's marble arch.

   The scene covers the screen (on a laptop, the 3:4 column on the table), in its own
   percentages, exactly as the hero shows the garden (assets/cover/cover.css gives each shape's
   pictures). Its layers, from the back:
   - .c-garden: the hero's own picture, the garden with the curtain tied back
   - .c-curtain: the curtain itself (strings, bells and organza), drawn on a mesh by js/cover.js,
     so it can sway in the breeze and be drawn aside to the columns
   - .c-still: the closed curtain as a picture, shown until the mesh is ready (and instead of it,
     with reduced motion or no WebGL)
   - .c-frame: the hero's picture again, masked to the marble arch and the jasmine toran, so the
     curtain hangs behind them and slips behind the jambs as it is drawn aside
   - .c-flame: the two diyas' flames flickering on the threshold
   - .c-shine and .c-sparks: a pool of moonlight that follows the tilt or a finger, the glints of
     the mother-of-pearl and the silver bells under it, and buds dropping from the strings
   - .c-hint: "Touch the jasmine to enter", which is also the keyboard's way in

   A touch anywhere draws the curtain aside from that spot. When it has gone, the gate is the hero
   to the pixel, and it simply goes. */

html.is-shut,
html.is-shut body { overflow: hidden; }

/* Until the curtain is ready, nothing shows but the table. */
html.is-loading .card,
html.is-loading .gate-stage { opacity: 0; }

.gate {
  position: fixed;
  inset: 0;
  z-index: 50;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
          user-select: none;
}

.gate[hidden] { display: none; }

/* The screen, or the column on a laptop: the same box as the hero, centred the same way as the
   card (by its margins, not a translate, so the two land on the same pixels). */
.gate-stage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: var(--card-w);
  height: 100vh;
  height: 100svh;
  min-height: 420px;
  overflow: hidden;
  container-type: size;
  cursor: pointer;
  background: var(--night-deep);
  transition: opacity .9s ease;
}

/* The pictures, covering the stage, centred, as the hero's garden does. */
.c-scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, 100cqh * var(--pic-r));
  aspect-ratio: var(--pic-r);
  translate: -50% -50%;
  will-change: transform;      /* drawn as its own layer, as the hero's garden is: the same pixels */
}

.c-garden,
.c-still,
.c-frame,
.c-curtain,
.c-shine,
.c-sparks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.c-garden,
.c-still,
.c-frame { background-position: center; background-size: 100% 100%; background-repeat: no-repeat; }

.c-frame {
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

/* From the reveal on, the gate's own garden steps aside: the hero under it is the same picture to
   the pixel, so nothing changes, except that the hero's names (being written in moonlight) and
   its life show through the parted curtain before the gate goes. */
html.is-revealed .gate-stage { background: transparent; }
html.is-revealed .c-garden { visibility: hidden; }

/* Once the mesh is drawing, the still makes way for it. */
.gate.is-live .c-still { visibility: hidden; }

.c-cloth[hidden] { display: none; }

/* The diyas: a warm glow over each small flame, breathing and flickering, and its light on the
   marble. Placed on each flame by assets/cover/cover.css. */
.c-flame {
  position: absolute;
  width: 8%;
  aspect-ratio: 1;
  translate: -50% -56%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 226, 160, .7) 0%, rgba(255, 186, 90, .3) 26%, rgba(255, 160, 60, .1) 50%, transparent 72%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: mr-flicker 2.3s ease-in-out infinite;
}

.c-flame:nth-of-type(2) { animation-duration: 1.9s; animation-delay: -.8s; }

@keyframes mr-flicker {
  0%, 100% { opacity: .82; scale: 1; }
  12% { opacity: .98; scale: 1.06; }
  23% { opacity: .74; scale: .95; }
  41% { opacity: .92; scale: 1.03; }
  58% { opacity: .7; scale: .96; }
  71% { opacity: 1; scale: 1.07; }
  86% { opacity: .8; scale: .98; }
}

/* The pool of moonlight on the whites (js/cover.js moves --gx, --gy). */
.c-shine {
  background:
    radial-gradient(circle calc(var(--gr, 30cqmax) * .45) at var(--gx, 50%) var(--gy, 40%),
      rgba(236, 244, 255, .3), rgba(220, 234, 252, .12) 45%, transparent 100%),
    radial-gradient(circle var(--gr, 30cqmax) at var(--gx, 50%) var(--gy, 40%),
      rgba(214, 230, 250, .14), transparent 100%);
  mix-blend-mode: soft-light;
}

.c-sparks { mix-blend-mode: normal; }

/* The hint: a soft line of words over a soft shade, breathing. The keyboard's way in. */
.c-hint {
  position: absolute;
  left: 50%;
  top: var(--hint-y, 49%);
  translate: -50% -50%;
  margin: 0;
  padding: 1.5em 3.2em;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(8, 26, 42, .62), rgba(8, 26, 42, .34) 58%, transparent);
  white-space: nowrap;
  font: 700 clamp(10.5px, min(3.1cqw, 1.8cqh), 15px)/1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
  color: #fbfaf3;
  text-shadow: 0 0 8px rgba(8, 26, 42, .9), 0 0 2px rgba(8, 26, 42, .9);
  cursor: pointer;
  animation: mr-hint 3.2s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}

.c-hint:focus-visible { outline: 1.5px solid rgba(244, 241, 232, .9); outline-offset: -.6em; }

@keyframes mr-hint {
  0%, 100% { opacity: .7; }
  50% { opacity: 1; }
}

/* A touch that turns into a slide only moves the light; the hint answers with a quicker breath. */
.gate.is-sliding .c-hint { animation-duration: 1.3s; }

.sound-toggle {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: calc((100% - var(--card-w)) / 2 + 14px);   /* the column's corner on a laptop */
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 31, 48, .5);
  box-shadow: 0 0 0 1px rgba(220, 232, 240, .45);
  cursor: pointer;
}

.sound-toggle svg { width: 22px; margin: 9px; fill: none; stroke: #f4f1e8; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sound-toggle .mute { display: none; }
.sound-toggle[aria-pressed="false"] .wave { display: none; }
.sound-toggle[aria-pressed="false"] .mute { display: inline; }

/* Arriving: the arch comes up out of the night. */
html.is-arriving .gate-stage { animation: mr-arrive 1.2s ease-out both; }

@keyframes mr-arrive {
  from { opacity: 0; scale: 1.025; }
  to { opacity: 1; scale: 1; }
}

.gate.is-opening .gate-stage { cursor: default; }
.gate.is-opening .c-hint { pointer-events: none; }
.gate.is-faded .c-shine,
.gate.is-faded .c-hint { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .c-flame,
  .c-hint { animation: none; }
}