/* The hero: a pop-up paper diorama of a Mughal courtyard.

   Everything is measured in the stage's own units (cqw / cqh), so each
   composition holds on every screen of its shape. There are three, chosen by
   the stage's shape (container queries at the end of the layout):

     phone      narrower than 5:8. The arch is laid out by width and anchored to
                the top; on a phone taller than 9:16 its pillars end behind the
                roses, and the sky and garden fill the rest.
     upright    5:8 to 6:5: tablets held upright, and the laptop column (3:4).
                The arch redrawn 3:4, a smaller palace, the words sized to fit.
     sideways   6:5 and wider: tablets held sideways. A wide arch, the palace
                with its garden walls, the names on one line.

   --u is the unit the words and the palace are sized in: 1cqw on a phone,
   and on a tablet the width of the 3:4 (or 4:3) box that fits the stage, so a
   squarer or wider stage shrinks them rather than crowding them.
*/

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  background: var(--paper);
}

.hero-stage {
  position: absolute;
  inset: 0;
  container: stage / size;
  overflow: hidden;
}

.h-depth {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}

.hero img { user-select: none; -webkit-user-drag: none; }

/* ------------------------------------------------------------ back to front */

.h-sky {
  inset: -14cqh -3cqw -3cqh;   /* room for it to drift without showing an edge */
  background: var(--paper) url(../assets/hero/sky.webp) 50% 0 / cover no-repeat;
}

/* The measurements the layout hangs on. The palace is 4:5 and its dome's
   tip is 24% down it, so the dome stands --pal-w * 1.25 * .76 above the
   bottom; the words stop short of it. */
.hero-stage > * {
  --u: 1cqw;
  --pal-w: 80cqw;
  --dome: calc(var(--pal-w) * .95);
  --lan-w: 8.8cqw;
  --lan-x: 18.6cqw;
  --lan-cord: 16cqw;
  --words-top: 17.5cqw;        /* clear of the crown where it dips at the sides */
}

.h-palace {
  position: absolute;
  left: calc(50cqw - var(--pal-w) / 2);
  width: var(--pal-w);
  aspect-ratio: 4 / 5;
  bottom: -1.5cqw;
  background: url(../assets/hero/palace.webp) 0 0 / 100% 100% no-repeat;
}

/* Lanterns hang from behind the arch's crown on a cord longer than the
   picture shows; the swing pivots where the cord is tied, out of sight. */
.h-lantern {
  position: absolute;
  top: 3cqw;
  width: var(--lan-w);
}

.h-lantern-l { left: calc(var(--lan-x) - var(--lan-w) / 2); }
.h-lantern-r { left: calc(100cqw - var(--lan-x) - var(--lan-w) / 2); }

.h-swing {
  position: relative;
  padding-top: var(--lan-cord);   /* the hidden length of cord */
  transform-origin: 50% 0;
}

.h-cord {
  position: absolute;
  left: 50%;
  top: 0;
  width: max(1px, .2cqw);
  height: calc(var(--lan-cord) + 1cqw);
  margin-left: max(-.5px, -.1cqw);
  background: linear-gradient(#b88a45, #9d6625);
}

/* Phones taller than 1:2 have room to spare: a larger scene, lanterns on
   longer cords, bigger names. */
@container stage (max-aspect-ratio: 1 / 2) {
  .hero-stage > * {
    --pal-w: 86cqw;
    --lan-w: 10cqw;
    --lan-x: 19.4cqw;
    --lan-cord: 22cqw;
    --words-top: 20.5cqw;
  }
}

.h-swing img { width: 100%; position: relative; }

.h-glow {
  position: absolute;
  left: 50%;
  top: calc(21cqw + 58%);      /* the flame, about halfway down the body */
  width: 44cqw;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 196, 118, .5), rgba(255, 186, 100, .2) 42%, rgba(255, 186, 100, 0) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

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

.h-words {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Between the arch's crown and the palace's dome: the Bismillah crowns
     the arch, and everything else stands just above the dome. */
  justify-content: flex-end;
  top: var(--words-top);
  bottom: calc(var(--dome) + 4.5cqw);
  left: 12cqw;
  right: 12cqw;
  text-align: center;
  color: var(--ink);
  pointer-events: auto;
}

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

/* Amiri draws ﷽ as one long calligraphic line, about 11.4em wide, so it is
   sized by the width it should span. */
.h-bismillah {
  --bism-w: 44cqw;
  font-family: "Amiri", serif;
  font-size: calc(var(--bism-w) / 11.4);
  line-height: 1.5;
  white-space: nowrap;
  padding: 0 .2em;
  margin-bottom: auto !important;   /* up at the top of the arch */
  /* gold foil: a warm gradient with a band of light that crosses it now and then */
  background:
    linear-gradient(105deg, transparent 40%, rgba(255, 246, 214, .95) 50%, transparent 60%) -120% 0 / 250% 100% no-repeat,
    linear-gradient(180deg, #c89b52 0%, #a57a36 45%, #8a6127 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-stroke: .018em rgba(150, 106, 42, .85);   /* a touch more weight to the pen */
  filter: drop-shadow(0 .12cqw 0 rgba(255, 255, 255, .7)) drop-shadow(0 -.1cqw 0 rgba(90, 50, 10, .25));
}

.h-kicker {
  font: 600 2.25cqw/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .2em;
  padding-left: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* The names, pressed into the paper: light below the stroke, shade above. */
.h-names {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2.2cqw !important;
  font-weight: 400;
  line-height: 1;
}

.h-name {
  --name: 13cqw;
  font-family: "Pinyon Script", cursive;
  font-size: var(--name);
  line-height: 1.12;
  padding: 0 3cqw;             /* room for the script's swashes */
  color: var(--ink);
  text-shadow: 0 .16cqw 0 rgba(255, 255, 255, .75), 0 -.08cqw 0 rgba(60, 8, 20, .28);
}

.h-name-1 { translate: -3cqw 0; }
.h-name-2 { translate: 3cqw 0; }

@container stage (max-aspect-ratio: 1 / 2) {
  .h-name { --name: 14.5cqw; }
  .h-bismillah { --bism-w: 49cqw; }
  .h-kicker { font-size: 2.6cqw; }
}

.h-weds {
  margin: -.6cqw 0 -.4cqw;
  font: italic 500 4.4cqw/1 "Cormorant Garamond", Georgia, serif;
  color: var(--gold);
  letter-spacing: .04em;
}

.h-divider {
  width: 40cqw;
  margin-top: 2.4cqw !important;
}

/*  FRIDAY | 12 | MARCH
                2027          */
.h-date {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 3.2cqw;
  margin-top: 1.6cqw !important;
  font-family: "Cormorant Garamond", Georgia, serif;
  color: var(--ink);
}

.h-date-day,
.h-date-month {
  font-weight: 600;
  font-size: 2.7cqw;
  letter-spacing: .26em;
  text-transform: uppercase;
  padding: 1.1cqw 0;
  border-block: 1px solid rgba(169, 128, 63, .55);
}

.h-date-day   { text-align: right; padding-right: .5em; }
.h-date-month { text-align: left; padding-left: .5em; }

.h-date-num {
  font-weight: 500;
  font-size: 9.5cqw;
  line-height: .9;
}

.h-date-year {
  grid-column: 1 / -1;
  margin-top: 1.2cqw;
  font-weight: 600;
  font-size: 2.7cqw;
  letter-spacing: .5em;
  padding-left: .5em;
}

/* ------------------------------------------------------------ front */

.h-arch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1080 / 1910;
  background: url(../assets/hero/arch.webp) 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 1.2cqw 1.8cqw rgba(92, 40, 30, .28));
}

.h-roses {
  position: absolute;
  bottom: -3cqw;
  width: 58cqw;
  filter: drop-shadow(0 1cqw 1.6cqw rgba(92, 40, 30, .3));
}

.h-roses img { width: 100%; }
.h-roses-l { left: -4cqw; transform-origin: 0 100%; }
.h-roses-r { right: -4cqw; transform-origin: 100% 100%; }

/* ------------------------------------------------------------ air */

.h-petals { overflow: hidden; }

.h-petal {
  position: absolute;
  top: -8cqw;
  left: var(--x);
  width: var(--s);
  animation: petal-fall var(--t) linear var(--d) infinite;
  opacity: 0;
}

.h-petal img {
  width: 100%;
  animation: petal-flutter var(--f) ease-in-out var(--d) infinite alternate;
  filter: drop-shadow(0 .6cqw .6cqw rgba(92, 40, 30, .22));
}

@keyframes petal-fall {
  0%   { transform: translate3d(0, 0, 0) rotate(0); opacity: 0; }
  6%   { opacity: .95; }
  50%  { transform: translate3d(var(--dx), 60cqh, 0) rotate(calc(var(--r) * .5)); }
  90%  { opacity: .95; }
  100% { transform: translate3d(calc(var(--dx) * -.4), 118cqh, 0) rotate(var(--r)); opacity: 0; }
}

@keyframes petal-flutter {
  0%   { transform: rotateX(0) rotateY(0) translateX(0); }
  50%  { transform: rotateX(55deg) rotateY(-25deg) translateX(3cqw); }
  100% { transform: rotateX(-30deg) rotateY(40deg) translateX(-2cqw); }
}

/* Small gold glints in the sky, catching and going. */
.h-twinkle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255, 236, 190, 1), rgba(214, 170, 90, .55) 45%, transparent);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  opacity: 0;
  animation: twinkle var(--t) ease-in-out var(--d) infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(.4) rotate(0); }
  45%      { opacity: .9; transform: scale(1) rotate(45deg); }
  60%      { opacity: .5; }
}

/* ------------------------------------------------------------ the cue */

.h-scroll {
  position: absolute;
  left: 50%;
  bottom: max(3.2cqw, env(safe-area-inset-bottom));
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4cqw;
  padding: 1.6cqw 3cqw;
  text-decoration: none;
  color: var(--ink);
  font: 600 2.3cqw/1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .32em;
  padding-left: calc(3cqw + .32em);
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}

.h-scroll-label {
  text-shadow: 0 0 2cqw rgba(246, 238, 225, .95), 0 0 .6cqw rgba(246, 238, 225, 1);
}

.h-scroll-line {
  position: relative;
  width: 1px;
  height: 7cqw;
  overflow: hidden;
  background: rgba(94, 20, 36, .18);
}

.h-scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, var(--ink));
  animation: scroll-drip 2.2s cubic-bezier(.6, 0, .4, 1) infinite;
}

@keyframes scroll-drip {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* ------------------------------------------------------------ upright tablet

   iPads held upright (about 3:4; 5:8 to 6:5 covers the mini and a tablet in
   split view) and the laptop column, which is 3:4 exactly. The arch is
   redrawn 3:4 so its pillars reach the floor; the palace grows with the
   stage's height; the words are sized in --u so they always fit between the
   crown and the dome. */

@container stage (min-aspect-ratio: 5 / 8) {
  .hero-stage > * {
    --u: min(1cqw, .75cqh);
    --pal-w: min(66cqw, 43.5cqh);
    --lan-w: 8cqw;
    --lan-x: 18.4cqw;
    --lan-cord: 15cqw;
    --words-top: 14cqw;
  }

  .h-sky { background-image: url(../assets/hero/sky-lg.webp); }
  .h-palace { background-image: url(../assets/hero/palace-lg.webp); }
  .h-arch {
    aspect-ratio: 1800 / 2404;
    background-image: url(../assets/hero/arch-tab.webp);
  }

  .h-glow {
    width: calc(var(--lan-w) * 5);
    top: calc(var(--lan-cord) + var(--lan-w) * .57 + 58%);
  }

  .h-words {
    bottom: calc(var(--dome) + 4 * var(--u));
    left: 13cqw;
    right: 13cqw;
  }

  .h-bismillah { --bism-w: calc(36 * var(--u)); }
  .h-kicker { font-size: calc(2 * var(--u)); }
  .h-names { margin-top: calc(1.8 * var(--u)) !important; }
  .h-name {
    --name: calc(10.4 * var(--u));
    padding: 0 calc(2.4 * var(--u));
    text-shadow: 0 .012em 0 rgba(255, 255, 255, .75), 0 -.006em 0 rgba(60, 8, 20, .28);
  }
  .h-name-1 { translate: calc(-2.4 * var(--u)) 0; }
  .h-name-2 { translate: calc(2.4 * var(--u)) 0; }
  .h-weds { margin: calc(-.5 * var(--u)) 0 calc(-.3 * var(--u)); font-size: calc(3.5 * var(--u)); }
  .h-divider { width: calc(34 * var(--u)); margin-top: calc(2 * var(--u)) !important; }
  .h-date { column-gap: calc(2.6 * var(--u)); margin-top: calc(1.3 * var(--u)) !important; }
  .h-date-day,
  .h-date-month { font-size: calc(2.2 * var(--u)); padding: calc(.9 * var(--u)) 0; }
  .h-date-num { font-size: calc(7.8 * var(--u)); }
  .h-date-year { font-size: calc(2.2 * var(--u)); margin-top: calc(1 * var(--u)); }

  .h-roses { width: 46cqw; }

  .h-scroll {
    bottom: max(calc(2.6 * var(--u)), env(safe-area-inset-bottom));
    gap: calc(1.1 * var(--u));
    padding: calc(1.2 * var(--u)) calc(2.4 * var(--u));
    padding-left: calc(2.4 * var(--u) + .32em);
    font-size: calc(1.8 * var(--u));
  }
  .h-scroll-line { height: calc(5.6 * var(--u)); }
}

/* Nearly square (an iPad sharing the screen in split view): less height to
   share out, so the palace gives up a little of it. */
@container stage (min-aspect-ratio: 17 / 20) {
  .hero-stage > * {
    --pal-w: min(66cqw, 38cqh);
    --words-top: 12.5cqw;
  }
}

/* ------------------------------------------------------------ sideways tablet

   iPads held sideways (4:3; 6:5 and wider covers 16:10 tablets too). A wide
   arch, the palace flanked by its garden walls and pavilions, the names on
   one line, and everything sized by the 4:3 box that fits (--u), so a 16:10
   screen shrinks it a little rather than running it into the dome. */

@container stage (min-aspect-ratio: 6 / 5) {
  .hero-stage > * {
    --u: min(1cqw, 1.3333cqh);
    --pal-w: calc(86 * var(--u));
    --dome: calc(var(--pal-w) / 2.585);   /* the image starts at the finial */
    --lan-w: calc(5.4 * var(--u));
    --lan-x: 17cqw;
    --lan-cord: 7cqw;
    --words-top: 6.5cqw;
  }

  .h-sky { background-image: url(../assets/hero/sky-wide.webp); }
  .h-palace {
    aspect-ratio: 2200 / 851;
    bottom: calc(-1 * var(--u));
    background-image: url(../assets/hero/palace-wide.webp);
  }
  .h-arch {
    aspect-ratio: 3 / 2;
    background-image: url(../assets/hero/arch-wide.webp);
  }

  .h-glow {
    width: calc(var(--lan-w) * 5);
    top: calc(var(--lan-cord) + var(--lan-w) * .57 + 58%);
  }

  .h-words {
    bottom: calc(var(--dome) + 3 * var(--u));
    left: 14cqw;
    right: 14cqw;
  }

  .h-bismillah { --bism-w: calc(26 * var(--u)); }
  .h-kicker { font-size: calc(1.4 * var(--u)); }
  .h-names {
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    margin-top: calc(1 * var(--u)) !important;
  }
  .h-name {
    --name: calc(7.8 * var(--u));
    padding: 0 calc(1.4 * var(--u));
    text-shadow: 0 .012em 0 rgba(255, 255, 255, .75), 0 -.006em 0 rgba(60, 8, 20, .28);
  }
  .h-name-1,
  .h-name-2 { translate: none; }
  .h-weds { margin: 0 calc(.6 * var(--u)); font-size: calc(2.9 * var(--u)); }
  .h-divider { width: calc(24 * var(--u)); margin-top: calc(1 * var(--u)) !important; }
  .h-date { column-gap: calc(2.2 * var(--u)); margin-top: calc(1 * var(--u)) !important; }
  .h-date-day,
  .h-date-month { font-size: calc(1.55 * var(--u)); padding: calc(.7 * var(--u)) 0; }
  .h-date-num { font-size: calc(5.4 * var(--u)); }
  .h-date-year { font-size: calc(1.55 * var(--u)); margin-top: calc(.8 * var(--u)); }

  .h-roses { width: calc(36 * var(--u)); bottom: calc(-2 * var(--u)); }
  .h-roses-l { left: -2.5cqw; }
  .h-roses-r { right: -2.5cqw; }

  .h-scroll {
    bottom: max(calc(1.6 * var(--u)), env(safe-area-inset-bottom));
    gap: calc(.8 * var(--u));
    padding: calc(.9 * var(--u)) calc(1.8 * var(--u));
    padding-left: calc(1.8 * var(--u) + .32em);
    font-size: calc(1.3 * var(--u));
  }
  .h-scroll-line { height: calc(4 * var(--u)); }
}

/* ------------------------------------------------------------ living

   Everything that keeps moving once the scene has settled. Held until the
   card is revealed, so none of it has already been going behind the envelope. */

html:not(.is-revealed) .h-petal,
html:not(.is-revealed) .h-twinkle,
html:not(.is-revealed) .h-swing,
html:not(.is-revealed) .h-glow,
html:not(.is-revealed) .h-bismillah,
html:not(.is-revealed) .h-scroll-line::after { animation-play-state: paused; }

.h-lantern-l .h-swing { animation: sway-l 6.4s ease-in-out 1.6s infinite; }
.h-lantern-r .h-swing { animation: sway-r 7.3s ease-in-out 1.9s infinite; }

@keyframes sway-l {
  0%, 100% { rotate: 0deg; }
  25%      { rotate: 1.6deg; }
  75%      { rotate: -1.3deg; }
}

@keyframes sway-r {
  0%, 100% { rotate: 0deg; }
  30%      { rotate: -1.4deg; }
  70%      { rotate: 1.7deg; }
}

.h-glow { animation: flicker 3.1s linear infinite; }
.h-lantern-r .h-glow { animation-duration: 3.7s; animation-delay: -1.2s; }

@keyframes flicker {
  0%, 100% { opacity: .85; }
  8%   { opacity: 1; }
  14%  { opacity: .78; }
  22%  { opacity: .95; }
  37%  { opacity: .82; }
  45%  { opacity: 1; }
  61%  { opacity: .88; }
  70%  { opacity: .74; }
  78%  { opacity: .96; }
  90%  { opacity: .84; }
}

.h-bismillah { animation: foil 7s ease-in-out 3s infinite; }

@keyframes foil {
  0%, 55% { background-position: -120% 0, 0 0; }
  100%    { background-position: 220% 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .h-petal, .h-twinkle, .h-swing, .h-glow, .h-bismillah, .h-scroll-line::after { animation: none !important; }
  .h-petal, .h-twinkle { display: none; }
}