/* The hero: the domed hall the envelope opens onto (the master picture of the product).

   The hall covers the screen, whatever its shape, and everything on it is placed in the
   picture's own percentages (assets/hero/hall.css, measured by assets-src/hero/build_hero.py for
   each of the three drawings). The words sit in the framed black panel.

   Layers, bottom up:
     .h-dark     the hall with nothing lit
     .h-light    the lit hall seen only around one group of floor lamps and candles; the groups
                 catch one after another (--step, outermost first)
     .h-lit      the whole lit hall (the dome, the walls, the far lanterns): when the great lamp glows
     .h-flame    small flickering glows on the flames and their reflections
     .h-throw    the pattern of light the great lamp's pierced brass throws on the hall (screened
                 on), swung with the lamp
     .h-sway     the great lamp, cut out; it hangs from the top of its chain (--swing-x/y) and sways, and a finger
                 or the phone's tilt swings it (.h-push), the light sweeping further (.h-stars-push)
     .h-words    the Bismillah, the families, the names in gold leaf, the invitation, a line in Urdu
*/

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

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

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  container-type: size;
  background: var(--onyx);
  isolation: isolate;
  /* a sideways drag swings the lamp; up and down still scrolls the page */
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.h-scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, 100cqh * var(--pic-r));
  height: max(100cqh, 100cqw / var(--pic-r));
  translate: -50% -50%;
}

.h-dark,
.h-lit,
.h-light,
.h-lights,
.h-flames,
.h-throw,
.h-throw-push,
.h-sway,
.h-push,
.h-stars-push {
  position: absolute;
  inset: 0;
}

.h-dark,
.h-lit,
.h-light { background: center / 100% 100% no-repeat; }

/* Before the hall comes alive: only the dark hall (the entrance brings the rest in; with
   reduced motion, or after it has played, .is-lit shows it all). */
.h-light,
.h-lit,
.h-flames,
.h-stars { opacity: 0; }

.h-light {
  -webkit-mask-image: radial-gradient(var(--rx) var(--ry) at var(--x) var(--y), #000 38%, rgba(0, 0, 0, .55) 66%, transparent 100%);
          mask-image: radial-gradient(var(--rx) var(--ry) at var(--x) var(--y), #000 38%, rgba(0, 0, 0, .55) 66%, transparent 100%);
}

.hero.is-lit .h-light,
.hero.is-lit .h-lit,
.hero.is-lit .h-flames,
.hero.is-lit .h-stars { opacity: 1; }

/* ------------------------------------------------------------ flames */

.h-flame {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  aspect-ratio: 1;
  translate: -50% -60%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 228, 160, .8), rgba(255, 176, 80, .32) 38%, rgba(255, 150, 60, 0) 70%);
  animation: h-flicker 2.3s ease-in-out infinite;
  pointer-events: none;
}

.h-flame:nth-child(2n)  { animation-duration: 1.7s; animation-delay: -.6s; }
.h-flame:nth-child(3n)  { animation-duration: 2.9s; animation-delay: -1.3s; }
.h-flame:nth-child(5n)  { animation-duration: 1.4s; animation-delay: -.2s; }

@keyframes h-flicker {
  0%, 100% { opacity: .75; scale: 1; }
  23%      { opacity: .5;  scale: .92; }
  41%      { opacity: .9;  scale: 1.06; }
  67%      { opacity: .6;  scale: .96; }
}

/* ------------------------------------------------------------ the great lamp */

.h-throw,
.h-throw-push,
.h-sway,
.h-push,
.h-stars-push { transform-origin: var(--swing-x) var(--swing-y); }

/* the lamp's light is screened onto the hall, so it only ever adds light (never greys the gold) */
.h-throw { mix-blend-mode: screen; }

.h-lamp {
  position: absolute;
  left: var(--lamp-l);
  top: var(--lamp-t);
  width: var(--lamp-w);
  height: var(--lamp-h);
}

.h-lamp-art {
  position: absolute;
  inset: 0;
  background: center / 100% 100% no-repeat;
  /* unlit until the entrance lights it */
  filter: brightness(.3) saturate(.6);
}

.hero.is-lit .h-lamp-art { filter: none; }

/* its own light, round the flame inside */
.h-lamp-glow {
  position: absolute;
  left: var(--glow-x);
  top: var(--glow-y);
  width: calc(var(--lamp-w) * 1.7);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 190, .55), rgba(255, 190, 100, .22) 30%, rgba(255, 160, 70, 0) 66%);
  opacity: 0;
  pointer-events: none;
}

.hero.is-lit .h-lamp-glow { opacity: 1; }

.h-lamp-glow::before,
.h-lamp-glow::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

/* a wide warm bloom on the air round the lamp, breathing with the flame */
.h-lamp-glow::before {
  inset: -80%;
  background: radial-gradient(closest-side, rgba(255, 196, 118, .2), rgba(255, 176, 88, .07) 42%, rgba(255, 160, 70, 0) 76%);
  animation: h-breathe 3.3s linear infinite;
}

/* the flame's own hot heart, trembling */
.h-lamp-glow::after {
  inset: 36%;
  background: radial-gradient(closest-side, rgba(255, 246, 222, .42), rgba(255, 214, 140, .16) 55%, rgba(255, 190, 100, 0));
  animation: h-tremble 1.9s ease-in-out infinite;
}

/* the pattern the pierced brass throws (js/hero.js draws it): the flame's flicker breathes it,
   and, as the flame moves inside, it trembles a little about the lamp */
.h-stars-push { animation: h-breathe 3.3s linear infinite; }

.h-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: var(--glow-x) var(--glow-y);
  animation: h-tremble 2.3s ease-in-out infinite;
}

@keyframes h-breathe {
  0%, 100% { opacity: 1; }
  9%       { opacity: .9; }
  17%      { opacity: .97; }
  31%      { opacity: .83; }
  38%      { opacity: .95; }
  52%      { opacity: 1; }
  63%      { opacity: .87; }
  71%      { opacity: .96; }
  86%      { opacity: .9; }
}

@keyframes h-tremble {
  0%, 100% { scale: 1; }
  27%      { scale: 1.007 .998; }
  55%      { scale: .996 1.005; }
  80%      { scale: 1.004 1; }
}

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

.h-words {
  position: absolute;
  left: calc(var(--in-l) + (var(--in-r) - var(--in-l)) * .06);
  right: calc(100% - var(--in-r) + (var(--in-r) - var(--in-l)) * .06);
  top: calc(var(--in-t) + (var(--in-b) - var(--in-t)) * .05);
  bottom: calc(100% - var(--in-b) + (var(--in-b) - var(--in-t)) * .05);
  container-type: size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: 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. */
.h-bism {
  --bism-w: min(84cqw, 52cqh);
  font-family: 'Amiri', serif;
  font-size: calc(var(--bism-w) / 11.4);
  line-height: 1.6;
  white-space: nowrap;
  padding: 0 .3em;
  background: linear-gradient(180deg, #f8e6b2 0%, #dcb766 50%, #a8823f 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
}

.h-kicker {
  margin-top: min(1.6cqw, 1.1cqh) !important;
  font: 600 min(4.7cqw, 3.2cqh)/1.35 'Cormorant Garamond', Georgia, serif;
  letter-spacing: .24em;
  padding-left: .24em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #e6d3a4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.h-names {
  margin: min(4cqw, 2.8cqh) 0 min(3cqw, 2cqh) !important;
  font: 400 1em/.94 'Luxurious Script', cursive;
  width: 100%;
}

/* Each name is written in gold leaf, left to right (--wipe), and a gleam crosses it once
   (--gleam). */
.h-name,
.h-amp {
  display: block;
  width: fit-content;
  max-width: none;
  margin-inline: auto;
  padding: .06em .3em .16em;
  background:
    linear-gradient(100deg, transparent calc(var(--gleam) - 14%), rgba(255, 251, 236, .95) var(--gleam), transparent calc(var(--gleam) + 14%)),
    linear-gradient(180deg, rgba(255, 246, 220, .25), transparent 36%, transparent 62%, rgba(60, 34, 6, .3)),
    var(--gold-leaf);
  -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 .02em rgba(0, 0, 0, .7)) drop-shadow(0 0 .12em rgba(0, 0, 0, .45));
  white-space: nowrap;
}

.h-name { font-size: calc(min(30cqw, 19.5cqh) * 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: italic 500 calc(min(11cqw, 7cqh) * var(--fit, 1)) / 1 'Cormorant Garamond', Georgia, serif;
  margin-block: -.1em -.06em;
}

.h-line {
  max-width: 94cqw;
  font: italic 500 min(7cqw, 4.7cqh)/1.3 'Cormorant Garamond', Georgia, serif;
  color: rgba(243, 234, 216, .92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  text-wrap: balance;
}

.h-urdu {
  margin-top: min(1.5cqw, 1cqh) !important;
  font: 400 min(5.8cqw, 3.8cqh)/1.95 'Noto Nastaliq Urdu', serif;
  color: #e6d3a4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  white-space: nowrap;
}

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

@media (prefers-reduced-motion: reduce) {
  .h-flame { animation: none; opacity: .7; }
  .h-stars, .h-stars-push, .h-lamp-glow::before, .h-lamp-glow::after { animation: none; }
}