/* The hero: the hall of mirrors the doors open onto.

   The hall covers the screen, whatever its shape, and everything on it is
   placed in the hall's own percentages (assets/hero/hall.css says where the
   arch's plain emerald inside is, for each of the three drawings). The words
   sit in the arch. The guest's finger, or the tilt of the phone, is a candle:
   a pool of its light on the mirror-work (.h-glow, masked to the mirrors), a
   warmth on the room (.h-warm), and the glints of the mirror pieces that catch
   it, all over the hall (.h-glints, drawn by js/hero.js). */

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

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

.h-scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, 100cqh * var(--hall-r));
  height: max(100cqh, 100cqw / var(--hall-r));
  translate: -50% -50%;
  /* the view settles into the hall from the doorway, towards the arch */
  transform-origin: 50% calc(var(--arch-t) / 2 + var(--arch-b) / 2);
}

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

.h-hall {
  background-color: var(--emerald-deep);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* The candle, where it is (--cx, --cy and its reach --cr are set by hero.js). */
.h-warm {
  background: radial-gradient(circle calc(var(--cr, 30vmax) * 1.7) at var(--cx, 50%) var(--cy, 42%),
    rgba(255, 190, 110, .26), rgba(255, 170, 90, .09) 42%, transparent 72%);
  mix-blend-mode: screen;
}

.h-glow {
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  background: radial-gradient(circle var(--cr, 30vmax) at var(--cx, 50%) var(--cy, 42%),
    rgb(255, 250, 236), rgba(255, 232, 180, .62) 24%, rgba(255, 212, 150, .18) 55%, transparent 80%);
  mix-blend-mode: screen;
}

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

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

.h-words {
  position: absolute;
  left: var(--arch-l);
  right: calc(100% - var(--arch-r));
  /* from just below the arch's tip to just above its foot */
  top: calc(var(--arch-t) + (var(--arch-s) - var(--arch-t)) * .2);
  bottom: calc(100% - var(--arch-b) + (var(--arch-b) - var(--arch-s)) * .08);
  container-type: size;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

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

/* Amiri draws ﷽ as one long line of calligraphy, about 11.4em wide, so it is
   sized by the width it should span: most of the arch's head. */
.h-bism {
  --bism-w: min(62cqw, 40cqh);
  font-family: "Amiri", serif;
  font-size: calc(var(--bism-w) / 11.4);
  line-height: 1.7;
  white-space: nowrap;
  padding: 0 .3em;
  background: linear-gradient(180deg, #f6e2ac 0%, #d8b56c 50%, #a8823f 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5));
}

.h-kicker {
  margin-top: auto !important;
  font: 600 min(3.6cqw, 2.7cqh)/1.35 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .2em;
  padding-left: .2em;
  text-transform: uppercase;
  color: var(--gold-soft);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.h-names {
  margin: min(3cqw, 2.2cqh) 0 min(2cqw, 1.4cqh) !important;
  font: 400 1em/.94 "Alex Brush", cursive;
  width: 100%;
}

/* Each name is written in gold leaf: the leaf, a little light from above and
   shade below, and the candle's own highlight wherever it is (--hx, --hy). The
   entrance writes each one in from the left (--wipe). */
.h-name,
.h-amp {
  display: block;
  width: fit-content;
  max-width: none;
  margin-inline: auto;
  padding: .06em .3em .14em;
  background:
    radial-gradient(circle var(--hr, 1.15em) at var(--hx, 50%) var(--hy, -300%),
      #fff, rgba(255, 250, 228, .85) 18%, rgba(255, 236, 188, .3) 48%, transparent 76%),
    linear-gradient(180deg, rgba(255, 244, 214, .3), transparent 36%, transparent 60%, rgba(60, 34, 6, .34)),
    url(../assets/hero/gold.webp) 0 0 / 4.5em 4.5em;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 18%), transparent var(--wipe));
          mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 18%), transparent var(--wipe));
  filter: drop-shadow(0 .03em .025em rgba(0, 0, 0, .55));
  white-space: nowrap;
}

.h-name { font-size: calc(min(27cqw, 16cqh) * var(--fit, 1)); }

/* a long name of two or more words, on two lines (js/hero.js decides) */
.h-name.is-wrapped {
  white-space: normal;
  max-width: 100%;
  text-wrap: balance;
}

.h-amp {
  font-size: min(16cqw, 9cqh);
  margin-block: -.14em -.1em;
}

.h-line {
  margin-bottom: auto !important;
  max-width: 86cqw;
  font: italic 500 min(6.6cqw, 4.7cqh)/1.3 "Cormorant Garamond", Georgia, serif;
  color: rgba(245, 239, 226, .9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  text-wrap: balance;
}

/* Until the doors open, the words wait (the entrance brings them in). */
html:not(.is-revealed) .h-words > * { opacity: 0; }

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

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

.h-scroll i {
  width: 11px;
  height: 11px;
  border-right: 1.5px solid var(--gold-soft);
  border-bottom: 1.5px solid var(--gold-soft);
  rotate: 45deg;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
  animation: h-bob 2.4s ease-in-out infinite;
}

html.is-open .h-scroll {
  opacity: .85;
  transition: opacity 1.2s 2.2s;
}

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

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