/* The hero: the garden pavilion the gates open onto.

   The pavilion covers the screen, whatever its shape, and everything on it is placed in the
   picture's own percentages (assets/hero/hero.css says where the arch's plain inside is, for
   each of the three pictures). The words sit in the arch. Roses open on the garland around it
   (.h-roses, placed and opened by js/hero.js): a wave of them as it comes in, then wherever
   the guest touches. A few petals still drift down from the opening. */

@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(--pearl);
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.h-scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, 100cqh * var(--pav-r));
  height: max(100cqh, 100cqw / var(--pav-r));
  translate: -50% -50%;
  /* the view settles in front of the pavilion from the path, towards the arch */
  transform-origin: 50% calc(var(--arch-t) / 2 + var(--arch-b) / 2);
  touch-action: manipulation;
}

.h-pav,
.h-roses,
.h-petals {
  position: absolute;
  inset: 0;
}

.h-pav {
  background-color: var(--pearl);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* the morning light, a slow soft breath of it over the garden */
.h-pav::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 42% at 50% 18%, rgba(255, 252, 244, .55), transparent 70%);
  mix-blend-mode: soft-light;
  animation: h-breathe 9s ease-in-out infinite alternate;
}

@keyframes h-breathe {
  from { opacity: .4; }
  to { opacity: 1; }
}

.h-roses,
.h-petals { pointer-events: none; }

/* A rose: its five stages stacked (the head in the same place in each), one fading into the
   next as it opens. Placed by its head's middle. */
.h-rose {
  position: absolute;
  width: var(--rose-w);
  aspect-ratio: 1;
  translate: -50% -42%;
  /* into the picture's soft morning haze; the stem fades into the garland */
  filter: saturate(.78) brightness(1.04) sepia(.08) drop-shadow(0 2px 3px rgba(110, 60, 55, .2));
  -webkit-mask-image: linear-gradient(#000 58%, transparent 76%);
          mask-image: linear-gradient(#000 58%, transparent 76%);
}

.h-rose img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.h-rose img:first-child { opacity: 1; }

.h-petal {
  position: absolute;
  left: 0;
  top: 0;
  perspective: 300px;
}

.h-petal b { display: block; transform-style: preserve-3d; }
.h-petal img { width: 100%; height: auto; filter: drop-shadow(0 2px 3px rgba(120, 70, 70, .16)); }

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

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

.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(82cqw, 44cqh);
  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, #c98a86 0%, #a8646a 55%, #8c4f55 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.h-kicker {
  margin-top: auto !important;
  padding-top: .5em;                 /* never tight under the Bismillah, however long the names */
  font: 600 min(6.2cqw, 3.4cqh)/1.35 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .2em;
  padding-left: .2em;
  text-transform: uppercase;
  color: var(--sage-deep);
}

.h-names {
  margin: min(3cqw, 1.8cqh) 0 min(2cqw, 1.2cqh) !important;
  font: 700 1em/.9 "Corinthia", cursive;
  width: 100%;
}

/* Each name in rose-gold leaf, a little light from above and shade below. 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: .08em .3em .16em;
  background:
    linear-gradient(180deg, rgba(255, 246, 238, .28), transparent 38%, transparent 58%, rgba(80, 30, 34, .3)),
    url(../assets/hero/foil.webp) 0 0 / 3.4em 3.4em;
  -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 .02em .02em rgba(90, 40, 40, .35));
  white-space: nowrap;
}

.h-name { font-size: calc(min(46cqw, 21cqh) * 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(22cqw, 10cqh);
  margin-block: -.2em -.16em;
}

.h-line {
  margin-bottom: auto !important;
  max-width: 94cqw;
  font: italic 500 min(8.6cqw, 4.8cqh)/1.3 "Cormorant Garamond", Georgia, serif;
  color: var(--ink);
  text-wrap: balance;
}

/* Until the gates 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(--rose);
  border-bottom: 1.5px solid var(--rose);
  rotate: 45deg;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .8));
  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, .h-pav::after { animation: none; }
}