/* The hero: the night garden, seen from inside the small marble pavilion at the near end of the
   pool, through its cusped arch inlaid with mother-of-pearl: the jasmine toran across the top,
   the jasmine curtain drawn back and tied to the columns with silver cords, the long pool running
   away to the white marble baradari, and the full moon over the treetops to its right (the
   master picture, with the toran added and the moon moved).

   The garden covers the screen, whatever its shape, centred, exactly as the opening shows it
   when its curtain has been drawn aside (assets/hero/hero.css gives each shape's picture, and
   the calm night sky for the names: --w-l, --w-r, --w-t, --w-b, in % of the picture, with room
   under the toran). Everything on it is placed in the picture's own percentages:
   - .h-water: the pool, rippling (WebGL, js/hero.js), over its own picture
   - .h-glow: the diyas flickering and the stars twinkling (screen)
   - .h-petals: jasmine petals drifting down from the tied-back curtain
   - .h-words: the couple's names, written in moonlight (a line of moonlight writes each name,
     the moon-pearl filling in behind it), then a glint of moonlight over both */

@property --wipe {
  syntax: '<percentage>';
  inherits: true;
  initial-value: -20%;
}

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 420px;
  overflow: hidden;
  container-type: size;
  background: var(--night-deep);
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.h-scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, 100cqh * var(--hero-r));
  aspect-ratio: var(--hero-r);
  translate: -50% -50%;
  will-change: transform;      /* its own layer, as the opening's scene is: the same pixels */
}

.h-garden,
.h-glow,
.h-petals {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.h-garden {
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* the pool's box (js/hero.js places it on the water, in % of the picture) */
.h-water {
  position: absolute;
  pointer-events: none;
}

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

/* ------------------------------------------------------------ the names */

.h-words {
  position: absolute;
  left: var(--w-l);
  right: calc(100% - var(--w-r));
  top: var(--w-t);
  bottom: calc(100% - var(--w-b));
  container-type: size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* a faint deepening of the night behind the names, so the pearl reads on every part of the sky */
.h-words::before {
  content: "";
  position: absolute;
  inset: -6% -10% -8%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(8, 24, 40, .28), rgba(8, 24, 40, .12) 60%, transparent);
  pointer-events: none;
}

/* Only the couple's names, one above the other, sized by the words' own box (cqw, cqh) and by
   --fit, which js/hero.js lowers only if a long name or a short screen needs it. */
.h-names {
  margin: 0;
  font: 400 1em/.98 "Allura", cursive;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* One name: its moon-pearl (read by screen readers), and the line of moonlight that writes it
   (js/hero.js makes both from the name as typed). */
.h-name {
  position: relative;
  display: block;
  width: fit-content;
  padding: .06em .24em .14em;
  white-space: nowrap;
  font-size: calc(min(28cqw, 40cqh) * var(--fit, 1));
}

.h-name > span { display: block; }

.h-ink {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 12%), transparent var(--wipe));
          mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 12%), transparent var(--wipe));
}

/* the pen: a thin bright line of moonlight at the writing's front */
.h-pen {
  position: absolute;
  inset: 0;
  padding: inherit;
  background: linear-gradient(90deg, transparent calc(var(--wipe) - 9%), rgba(255, 255, 255, .95) calc(var(--wipe) - 2.5%), rgba(214, 232, 255, .7) calc(var(--wipe) - .5%), transparent var(--wipe));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 .12em rgba(220, 236, 255, .9)) drop-shadow(0 0 .3em rgba(170, 205, 240, .6));
  opacity: 0;
}

.h-amp {
  font-size: calc(min(13cqw, 18cqh) * var(--fit, 1));
  line-height: .8;
  padding: 0 .2em .08em;
  margin-block: -.3em -.24em;
}

/* Until the curtain opens, the names wait (the entrance writes them). */
html:not(.is-revealed) .h-words > * { opacity: 0; }

/* ------------------------------------------------------------ the water, for the keyboard */

/* A touch on the pool sends ripples across it. This button is the keyboard's and screen reader's
   way to do it: unseen until it has the focus. */
.h-ripple {
  position: absolute;
  left: 50%;
  bottom: calc(max(14px, 2.4cqh) + 40px);
  translate: -50% 0;
  padding: .66em 1.3em .6em;
  border: 0;
  border-radius: 99px;
  white-space: nowrap;
  font: 700 13px/1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  color: var(--pearl);
  background: rgba(10, 31, 48, .72);
  box-shadow: 0 0 0 1px rgba(220, 232, 240, .45);
  cursor: pointer;
  opacity: 0;
}

.h-ripple:focus-visible { opacity: 1; outline: 2px solid var(--pearl); outline-offset: 3px; }

/* ------------------------------------------------------------ scroll cue */

.h-scroll {
  position: absolute;
  left: 50%;
  bottom: max(14px, 2.4cqh);
  translate: -50% 0;
  margin: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .8s;
}

.h-scroll i {
  width: 11px;
  height: 11px;
  border-right: 1.6px solid var(--pearl);
  border-bottom: 1.6px solid var(--pearl);
  rotate: 45deg;
  filter: drop-shadow(0 0 3px rgba(8, 26, 42, .9));
  animation: h-bob 2.4s ease-in-out infinite;
}

.hero.is-ready .h-scroll { opacity: .85; }

@keyframes h-bob {
  0%, 100% { translate: 0 -3px; }
  50% { translate: 0 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .h-scroll i { animation: none; }
  .h-ripple { display: none; }
}