/* The hero: the courtyard, seen from the shaded entrance passage through its brick arch framed
   in kashi tiles (the master picture); the fountain in the middle, the mosque's domes and
   minarets over the far roofline, pigeons on the parapet.

   The courtyard covers the screen, whatever its shape, centred, as the opening's tiles show it
   on their backs (assets/hero/hero.css gives each shape's picture, and its calm sky for the
   words: --w-l, --w-r, --w-t, --w-b, in % of the picture). Everything on it is placed in the
   picture's own percentages:
   - .h-sparks: the sun glinting on the arch's tiles, and the fountain sparkling (js/hero.js)
   - .h-birds: the pigeons, perched and flying, drawn only inside the arch's opening (masked
     by assets/hero/opening*.webp), so they pass behind the arch
   - .h-words: the words, in the morning sky inside the arch, over a faint haze

   The couple's names are fired: each is first pale, unglazed clay, then the cobalt glaze floods
   through it from left to right, with a wet shine at its front, and a glint of sun runs over
   both (js/hero.js builds the three layers from the name as typed; --glint is base.css's). */

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

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 420px;
  overflow: hidden;
  container-type: size;
  background: var(--cobalt-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%;
}

.h-court,
.h-sparks,
.h-birds {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

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

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

.h-birds {
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

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

.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 soft morning haze behind the names, so the cobalt reads on every part of the sky */
.h-words::before {
  content: "";
  position: absolute;
  inset: -4% -8% -6%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 249, 238, .66), rgba(255, 247, 234, .4) 55%, rgba(255, 246, 232, .12) 82%, transparent);
  pointer-events: none;
}

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

/* Only the couple's names. They are 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: about 72px on a
   phone, 95px on an iPad. */

.h-names {
  margin: 0 !important;
  font: 400 1em/.95 "Great Vibes", cursive;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* One name: its clay, its glaze and the glaze's wet front, one over another (js/hero.js). */
.h-name {
  position: relative;
  display: block;
  width: fit-content;
  padding: .02em .22em .12em;
  white-space: nowrap;
  font-size: calc(min(25cqw, 40cqh) * var(--fit, 1));
}

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

.h-clay {
  color: #e9d8bc;
  text-shadow: 0 .015em 0 rgba(255, 255, 255, .75), 0 .03em .04em rgba(110, 70, 36, .45);
}

.h-glz,
.h-wet {
  position: absolute;
  inset: 0;
  padding: inherit;
  -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));
}

/* the wet shine at the glaze's front, as it floods through the clay */
.h-wet {
  background: linear-gradient(90deg, transparent calc(var(--wipe) - 13%), rgba(255, 255, 255, .85) calc(var(--wipe) - 5%), rgba(220, 235, 255, .4) calc(var(--wipe) - 1%), transparent var(--wipe));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  opacity: 0;
}

.h-amp {
  font-size: calc(min(10.5cqw, 17cqh) * var(--fit, 1));
  line-height: .8;
  padding: 0 .2em .08em;
  margin-block: -.34em -.28em;
}

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

/* ------------------------------------------------------------ flying the pigeons */

/* A touch anywhere on the courtyard sends the pigeons up. This button is the keyboard's and
   screen reader's way to do it: unseen until it has the focus. */
.h-fly {
  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: #fff6e2;
  background: rgba(14, 30, 70, .7);
  box-shadow: 0 0 0 1px rgba(255, 220, 150, .45);
  cursor: pointer;
  opacity: 0;
}

.h-fly:focus-visible { opacity: 1; outline: 2px solid #fff3d6; outline-offset: 3px; }

.h-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------ 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(--cobalt);
  border-bottom: 1.6px solid var(--cobalt);
  rotate: 45deg;
  filter: drop-shadow(0 0 3px rgba(255, 248, 236, .9));
  animation: h-bob 2.4s ease-in-out infinite;
}

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

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

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