/* The families: two lamps, one light (after Sheesh Mahal's).

   The hall's black marble wall with its lattice of gold stars (assets/families/wall*.webp,
   one per screen shape), dim, with two pierced brass lamps hanging from a gold rail, one for
   each family, their names beneath. Each lamp is a button. Lit (.is-lit on its side, set by
   js/families.js), its glow comes up, the family's names turn gold, and the wall's gold around
   it catches the light (.fm-glow: a warm light masked to the wall's gold lines). With both lit
   (.is-joined, then .is-united), threads of light run from the lamps and meet, and the couple's
   names are written in gold, with the dua beneath.

   Phones, upright tablets and the laptop column: the lamps side by side, the couple below.
   Sideways tablets: the couple between the lamps. */

.families {
  /* the lamps are tall (1.7 times as tall as wide), so they are sized by the screen's height too */
  --lamp-w: min(31cqi, 150px, 14.5svh);
  --gap: clamp(30px, 9cqi, 90px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  /* at the top, room for the onyx band that lies over it */
  padding: 64px 16px 48px;
  overflow: hidden;
  background-color: var(--onyx);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--ivory);
  text-align: center;
  container-type: inline-size;
  -webkit-tap-highlight-color: transparent;
}

@media (min-aspect-ratio: 5/8) {
  html:root .families { --lamp-w: min(22cqi, 180px, 16svh); }
}

/* The wall is dim: lit only where the lamps are. */
.families::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 95% 72% at 50% 46%, rgba(8, 6, 4, .5), rgba(8, 6, 4, .88));
  pointer-events: none;
}

/* The lamps' light on the wall's gold (--gx, --gy: where the lamp is). The mask is the wall's
   gold lines, laid exactly as the wall is. */
.fm-glow {
  position: absolute;
  inset: 0;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: cover;
          mask-size: cover;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background: radial-gradient(circle calc(var(--lamp-w) * 2.5) at var(--gx, 25%) var(--gy, 40%),
    rgba(255, 238, 196, .95), rgba(255, 212, 140, .5) 34%, rgba(255, 196, 120, .12) 70%, transparent);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

.families > :not(.fm-glow, .fm-threads, .fm-bloom, .fm-clock) { position: relative; }

/* ------------------------------------------------------------ the heading */

.fm-head > * { margin: 0; }
.fm-kicker { font-size: clamp(11.5px, 3.2cqi, 15px); }

.fm-title {
  font: 400 clamp(46px, 13cqi, 80px) / 1.12 'Luxurious Script', cursive;
}

.fm-title .gold-leaf { padding: 0 .2em .06em; }

/* ------------------------------------------------------------ the lamps */

.fm-lamps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "a b" "u u";
  column-gap: var(--gap);
  width: 100%;
  max-width: 760px;
  margin-top: 14px;
}

.fm-side-a { grid-area: a; }
.fm-side-b { grid-area: b; }
.fm-union { grid-area: u; }

/* the gold rail they hang from, from one lamp to the other and a little past */
.fm-rail {
  position: absolute;
  top: 0;
  left: calc((100% - var(--gap)) / 4 - 40px);
  right: calc((100% - var(--gap)) / 4 - 40px);
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, #f6e2a6, #c29645 50%, #6f5020);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .6);
}

.fm-rail::before,
.fm-rail::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  translate: 0 -50%;
  background: radial-gradient(circle at 35% 30%, #fff1c4, #c9a45c 45%, #6f5020);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

.fm-rail::before { left: -7px; }
.fm-rail::after { right: -7px; }

.fm-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

/* chain and lamp sway a little, from the rail */
.fm-hang {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: 50% 0;
  animation: fm-sway 5.4s ease-in-out infinite alternate;
}

.fm-side-b .fm-hang { animation-duration: 6.1s; animation-delay: -2.2s; }

@keyframes fm-sway {
  from { rotate: -1.4deg; }
  to { rotate: 1.4deg; }
}

.fm-chain {
  display: block;
  width: calc(var(--lamp-w) * .085);
  min-width: 7px;
  height: clamp(22px, 7cqi, 60px);
  background-position: center top;
  background-size: 100% auto;
  background-repeat: repeat-y;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
  margin-bottom: -3px;
}

.fm-lamp {
  position: relative;
  display: block;
  width: var(--lamp-w);
  aspect-ratio: var(--lamp-r);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 40%;
  -webkit-tap-highlight-color: transparent;
}

.fm-lamp:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 6px; }
.is-lit .fm-lamp { cursor: default; }

.fm-lantern {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  pointer-events: none;
}

.fm-unlit { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); }
.fm-lit { opacity: 0; }

/* the flame's flicker: its light, brightened a little and dimmed a little */
.fm-flicker {
  background-color: rgba(255, 200, 120, .55);
  mix-blend-mode: screen;
  opacity: 0;
}

.is-lit .fm-flicker { animation: fm-flicker 2.3s steps(1, end) infinite; }

@keyframes fm-flicker {
  0% { opacity: .35; } 9% { opacity: .5; } 17% { opacity: .28; } 26% { opacity: .45; }
  38% { opacity: .32; } 47% { opacity: .55; } 58% { opacity: .3; } 66% { opacity: .42; }
  78% { opacity: .26; } 87% { opacity: .5; } 94% { opacity: .36; } 100% { opacity: .35; }
}

/* the hint, while it is unlit: a gleam crosses the brass now and then */
.fm-gleam {
  background-image: linear-gradient(100deg, transparent 45%, rgba(255, 196, 110, .34) 50%, transparent 55%);
  background-size: 300% 100%;
  background-position: 100% 0;
  mix-blend-mode: screen;
  animation: fm-gleam 5s ease-in-out 1.2s infinite;
}

.fm-side-b .fm-gleam { animation-delay: 2.1s; }
.is-lit .fm-gleam { animation: none; opacity: 0; }

@keyframes fm-gleam {
  0%        { background-position: 100% 0; }
  30%, 100% { background-position: 0% 0; }
}

/* its glow in the air around it */
.fm-halo {
  position: absolute;
  left: 50%;
  top: calc(var(--flame-y) * 100%);
  width: calc(var(--lamp-w) * 2.8);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 206, 130, .45), rgba(255, 180, 90, .15) 50%, transparent);
  opacity: 0;
  pointer-events: none;
}

/* lit (the lighting itself is animated by js/families.js) */
.is-lit .fm-lit,
.is-lit .fm-halo,
.families.lit-a .fm-glow-a,
.families.lit-b .fm-glow-b { opacity: 1; }

/* arriving: the lamps come down into place on their chains */
.fm-side,
.fm-rail,
.fm-head {
  transition: opacity 1s ease, translate 1.4s cubic-bezier(.2, .7, .2, 1);
}

.fm-side-b { transition-delay: .12s; }

.families:not(.is-seen) .fm-side { opacity: 0; translate: 0 -28px; }
.families:not(.is-seen) .fm-rail,
.families:not(.is-seen) .fm-head { opacity: 0; }

/* ------------------------------------------------------------ the names */

.fm-names {
  position: relative;
  isolation: isolate;
  margin-top: 16px;
  max-width: 100%;
  padding: 4px 6px;
  opacity: .32;
  transition: opacity .9s ease .25s;
}

/* a little shade of their own, so the lit gold behind doesn't crowd them */
.fm-names::before,
.fm-union::before {
  content: "";
  position: absolute;
  inset: -22% -14%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(8, 6, 4, .8), rgba(8, 6, 4, .5) 62%, transparent);
  pointer-events: none;
}

.fm-names > * { margin: 0; }

.fm-label {
  font: 600 clamp(9.5px, 2.6cqi, 13px) / 1.3 'Cormorant Garamond', Georgia, serif;
  letter-spacing: .24em;
  padding-left: .24em;
  text-transform: uppercase;
  color: #d9c08a;
  margin-bottom: 7px !important;
}

.fm-parents {
  font: 600 clamp(17px, 5cqi, 24px) / 1.22 'Cormorant Garamond', Georgia, serif;
  color: var(--ivory);
  text-wrap: balance;
  transition: color .9s ease .25s, text-shadow .9s ease .25s;
}

.fm-mrs {
  display: block;
  font-style: italic;
  font-weight: 500;
  font-size: .8em;
}

.is-lit .fm-names { opacity: 1; }
.is-lit .fm-parents { color: var(--gold-hi); text-shadow: 0 0 14px rgba(255, 200, 120, .45), 0 1px 2px rgba(0, 0, 0, .7); }

/* ------------------------------------------------------------ the couple, and the dua */

.fm-union {
  position: relative;
  isolation: isolate;
  margin-top: clamp(22px, 7cqi, 44px);
  opacity: 0;
  translate: 0 10px;
  transition: opacity 1.1s ease, translate 1.2s cubic-bezier(.2, .7, .2, 1);
}

.fm-union > * { margin: 0; }

.families.is-united .fm-union { opacity: 1; translate: none; }

.fm-couple {
  font: 400 clamp(48px, 14cqi, 80px) / 1.1 'Luxurious Script', cursive;
}

/* written in gold leaf, left to right (--wipe), and a gleam crosses it (--gleam), as in the hero */
.fm-cw {
  padding: .04em .3em .14em;
  background:
    linear-gradient(100deg, transparent calc(var(--gleam) - 14%), rgba(255, 251, 236, .95) var(--gleam), transparent calc(var(--gleam) + 14%)),
    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 0 .2em rgba(255, 200, 120, .3)) drop-shadow(0 .03em .02em rgba(0, 0, 0, .75));
}

.fm-cw i { font: italic 500 .5em 'Cormorant Garamond', Georgia, serif; }

.families:not(.is-united) .fm-cw { --wipe: -2%; }

.fm-dua { margin-top: 8px !important; }

.fm-dua-ar {
  font: 400 clamp(20px, 6.2cqi, 30px) / 1.9 'Amiri', serif;
  background: var(--gold-leaf);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .8));
  padding: 0 .2em;
}

.fm-dua-en {
  font: italic 500 clamp(15px, 4.4cqi, 20px) / 1.4 'Cormorant Garamond', Georgia, serif;
  color: rgba(243, 234, 216, .9);
  max-width: 30em;
  margin-inline: auto !important;
  text-wrap: balance;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}

.fm-dua-ref {
  margin-top: 6px !important;
  font: 600 clamp(9.5px, 2.6cqi, 12px) / 1.3 'Cormorant Garamond', Georgia, serif;
  letter-spacing: .24em;
  padding-left: .24em;
  text-transform: uppercase;
  color: var(--gold);
}

.fm-hint {
  margin: 18px 0 0;
  font: italic 500 clamp(15px, 4.4cqi, 19px) / 1.3 'Cormorant Garamond', Georgia, serif;
  color: #e6d3a4;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
  animation: fm-hint 2.8s ease-in-out infinite;
  transition: opacity .6s;
}

.families.is-joined .fm-hint { opacity: 0 !important; animation: none; }

@keyframes fm-hint {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}

/* ------------------------------------------------------------ the light between them */

.fm-threads {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
}

.fm-threads path { fill: none; stroke-linecap: round; opacity: 0; }
.fm-thread-glow { stroke: rgba(255, 206, 130, .7); stroke-width: 7; filter: url(#fmBlur); }
.fm-thread-core { stroke: #fff4d6; stroke-width: 1.6; }

.fm-bloom {
  position: absolute;
  left: 0;
  top: 0;
  width: 160px;
  height: 160px;
  margin: -80px 0 0 -80px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 252, 236, .95), rgba(255, 222, 160, .45) 35%, rgba(255, 200, 120, .12) 65%, transparent);
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------------------------------------ sideways tablets */

/* The couple between the two lamps, level with their light. */
@media (min-aspect-ratio: 6/5) {
  html.is-tablet .families { --lamp-w: min(12cqi, 170px, 17svh); --gap: clamp(20px, 3cqi, 44px); }
  html.is-tablet .fm-lamps {
    grid-template-columns: 1fr minmax(0, 1.5fr) 1fr;
    grid-template-areas: "a u b";
    max-width: 1080px;
    align-items: start;
  }
  html.is-tablet .fm-union {
    margin-top: 0;
    align-self: center;
  }
  html.is-tablet .fm-rail {
    left: calc((100% - 2 * var(--gap)) / 7 - 34px);
    right: calc((100% - 2 * var(--gap)) / 7 - 34px);
  }
}

/* ------------------------------------------------------------ calm */

@media (prefers-reduced-motion: reduce) {
  .fm-side,
  .fm-rail,
  .fm-head { transition: none; }
  .fm-hang,
  .fm-hint,
  .fm-gleam,
  .is-lit .fm-flicker { animation: none; }
  .is-lit .fm-flicker { opacity: .35; }
}