/* The families: two lamps, one light (Sheesh Mahal's families, in the jasmine night garden).

   A screen of carved white marble jaali fills the section (assets/families/jaali.webp, a tile of
   whole repeats of its lattice), with the night sky seen through its piercings: deep teal, stars
   and the moon's glow, drawn behind it (.fm-sky, and the stars' canvases by js/families.js). The
   face of the screen is in shade (.fm-shade), the moon being behind it, so the piercings glow.
   Two silver filigree lanterns shaped like opening jasmine buds hang on silver chains wound with
   jasmine from a silver rod, one for each family, their names beneath. Each lantern is a button;
   lit (.is-lit on its side, set by js/families.js), its glow comes up in the air and on the marble
   round it (.fm-glow: the jaali as a mask) and the family's names brighten. With both lit
   (.is-joined, then .is-united), threads of light run from the lanterns and meet, the couple's
   names come, the moonlight behind the screen brightens and comes through its piercings
   (.is-moonlit: .fm-moon, and .fm-moonlight round the piercings), then the dua (.is-blessed).

   Words on the busy marble have a soft veil of deep night behind them (THEME.md, 10).

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

.families {
  /* The lanterns are much taller than wide, so they are sized by the screen's height too
     (--lantern-r, their width over their height, is measured by the build). */
  --lamp-w: min(30cqi, 150px, 30svh * var(--lantern-r, .45));
  --gap: clamp(26px, 9cqi, 90px);
  --chain-w: calc(var(--lamp-w) * .34);
  --chain-h: clamp(44px, 12cqi, 90px);
  --motif: clamp(250px, 74cqi, 330px);     /* one repeat of the jaali's lattice on the screen */
  --jw: calc(var(--motif) * var(--jaali-nx, 4));
  --jh: calc(var(--jw) / var(--jaali-r, 1));
  --moon-at: 72% 12%;                      /* where the moon is, behind the screen */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--seam-h) * .5 + 30px) 16px 44px;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--night-deep);
  color: var(--pearl);
  text-align: center;
  container-type: inline-size;
  -webkit-tap-highlight-color: transparent;
}

/* Upright tablets and the laptop column. */
@media (min-aspect-ratio: 5/8) {
  html:root .families {
    --lamp-w: min(24cqi, 210px, 28svh * var(--lantern-r, .45));
    --motif: clamp(280px, 44cqi, 400px);
  }
}

/* ------------------------------------------------------------ the screen and the sky behind it */

.fm-back,
.fm-back > *,
.fm-sky > * {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fm-sky {
  background:
    radial-gradient(circle at var(--moon-at), rgba(214, 230, 242, .5), rgba(150, 188, 218, .16) 16%, transparent 42%),
    linear-gradient(180deg, #0b2233 0%, #12324a 48%, #163a53 100%);
}

.fm-stars { width: 100%; height: 100%; }
.fm-stars-a { animation: fm-twinkle 3.7s ease-in-out infinite alternate; }
.fm-stars-b { animation: fm-twinkle 5.3s ease-in-out -2.1s infinite alternate-reverse; }

@keyframes fm-twinkle {
  from { opacity: 1; }
  to { opacity: .35; }
}

/* the moon brightening behind the screen */
.fm-moon {
  display: block;
  background:
    radial-gradient(circle at var(--moon-at), rgba(240, 247, 252, .95), rgba(196, 218, 236, .6) 14%, rgba(130, 170, 204, .26) 38%, transparent 72%),
    linear-gradient(180deg, rgba(112, 152, 186, .3), rgba(70, 110, 145, .18));
  opacity: 0;
}

/* The jaali, the lamps' light on its marble and the moonlight round its piercings: the same
   tile, the same size, in the same place. */
.fm-jaali,
.fm-glow,
.fm-moonlight {
  background-position: 50% 0;
  background-size: var(--jw) var(--jh);
  background-repeat: repeat;
  -webkit-mask-position: 50% 0;
          mask-position: 50% 0;
  -webkit-mask-size: var(--jw) var(--jh);
          mask-size: var(--jw) var(--jh);
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
}

/* its face in shade (the moon is behind it), deepest at the edges */
.fm-shade {
  background: radial-gradient(ellipse 120% 90% at 50% 42%, rgba(6, 22, 36, .52), rgba(5, 18, 30, .8));
}

/* the moonlight coming through, round each piercing */
.fm-moonlight {
  background-image: radial-gradient(circle at var(--moon-at), rgba(238, 246, 252, .95), rgba(200, 222, 240, .6) 45%, rgba(165, 196, 222, .42));
  mix-blend-mode: screen;
  opacity: .22;
}

/* a lamp's light on the marble round it (--gx, --gy: where its flame is, set by js/families.js) */
.fm-glow {
  background-image: radial-gradient(circle calc(var(--lamp-w) * 2.1) at var(--gx, 25%) var(--gy, 40%),
    rgba(255, 238, 208, .7), rgba(255, 222, 176, .3) 34%, rgba(236, 226, 206, .08) 70%, transparent);
  mix-blend-mode: screen;
  opacity: 0;
}

.fm-moon,
.fm-shade,
.fm-moonlight { transition: opacity 2.8s ease-in-out; }

.families.is-moonlit .fm-moon { opacity: 1; }
.families.is-moonlit .fm-shade { opacity: .74; }
.families.is-moonlit .fm-moonlight { opacity: .8; }

/* ------------------------------------------------------------ words: a veil of night behind */

.fm-head,
.fm-names,
.fm-union,
.fm-hint {
  position: relative;
  isolation: isolate;
}

.fm-head::before,
.fm-names::before,
.fm-union::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -34% -16%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(7, 24, 38, .8), rgba(7, 24, 38, .52) 42%, rgba(7, 24, 38, .2) 72%, transparent);
  pointer-events: none;
}

.fm-names::before { inset: -26% -10%; }

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

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

.fm-kicker {
  font: 700 clamp(11px, 3cqi, 14px)/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .28em;
  padding-left: .28em;
  text-transform: uppercase;
  color: var(--moon);
  text-shadow: 0 1px 2px rgba(4, 16, 28, .8);
}

.fm-title {
  font: 400 clamp(48px, 14cqi, 84px)/1.2 "Allura", cursive;
}

.fm-title .pearl {
  display: inline-block;
  padding: 0 .3em .1em;
}

/* ------------------------------------------------------------ the lanterns */

.fm-lamps {
  position: relative;
  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: 12px;
}

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

/* the silver rod they hang from, from one lantern to the other and a little past, with a silver
   filigree bead at each end */
.fm-rail {
  position: absolute;
  top: 0;
  left: calc((100% - var(--gap)) / 4 - 30px);
  right: calc((100% - var(--gap)) / 4 - 30px);
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, #fbfdff, #c9d4dc 38%, #7f909c 72%, #45535e);
  box-shadow: 0 2px 4px rgba(2, 10, 18, .55);
}

.fm-rail::before,
.fm-rail::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  translate: 0 -50%;
  background:
    repeating-conic-gradient(from 10deg, rgba(255, 255, 255, .35) 0 12deg, transparent 12deg 36deg),
    radial-gradient(circle at 35% 30%, #ffffff, #cfd9e0 38%, #7d8d99 75%, #3f4c56);
  box-shadow: 0 1px 3px rgba(2, 10, 18, .6);
}

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

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

/* the chain and the lantern swing a little, from the rod */
.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.2deg; }
  to { rotate: 1.2deg; }
}

.fm-chain {
  display: block;
  width: var(--chain-w);
  min-width: 10px;
  height: var(--chain-h);
  margin-bottom: calc(var(--lamp-w) * -.015);
  background-position: 50% 100%;
  background-size: 100% auto;
  background-repeat: repeat-y;
  filter: drop-shadow(0 2px 2px rgba(2, 10, 18, .5));
}

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

.fm-lamp:focus-visible { outline: 2px solid var(--moon); 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;
  pointer-events: none;
}

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

/* the flame's flicker: its light, brightened a little and dimmed a little */
.fm-flicker {
  -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;
  background-color: rgba(255, 214, 150, .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; }
}

/* its glow in the air round it: warm only near the flame, then the silver of the moonlight */
.fm-halo {
  position: absolute;
  left: var(--flame-x, 50%);
  top: var(--flame-y, 55%);
  width: calc(var(--lamp-w) * 2.4);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 226, 176, .4), rgba(255, 212, 150, .13) 38%, rgba(214, 228, 240, .05) 70%, 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 lanterns 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 families' names */

.fm-names {
  margin-top: 12px;
  max-width: 100%;
}

.fm-names > p {
  margin: 0;
  opacity: .5;
  transition: opacity .9s ease .25s, color .9s ease .25s, text-shadow .9s ease .25s;
}

.fm-label {
  font: 700 clamp(10px, 2.7cqi, 13px)/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--moon);
}

.fm-names > .fm-label { margin-bottom: 5px; }

.fm-parents {
  font: 500 clamp(17px, 4.8cqi, 24px)/1.3 "Cormorant Garamond", Georgia, serif;
  max-width: 11.5em;                       /* the two families alike: each on two lines */
  margin-inline: auto !important;
  color: var(--pearl);
  text-wrap: balance;
  text-shadow: 0 1px 2px rgba(4, 16, 28, .8);
}

.is-lit .fm-names > p { opacity: 1; }
.is-lit .fm-parents {
  color: #fffdf7;
  text-shadow: 0 0 14px rgba(255, 236, 205, .42), 0 0 4px rgba(210, 230, 246, .3), 0 1px 2px rgba(4, 16, 28, .85);
}

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

.fm-union {
  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 > *,
.fm-blessing > * { margin: 0; }

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

.fm-couple {
  font: 400 calc(clamp(44px, 12.5cqi, 72px) * var(--fit, 1))/1.1 "Allura", cursive;
  text-wrap: balance;
}

.fm-couple .pearl {
  display: inline-block;
  padding: 0 .3em .1em;
  filter: drop-shadow(0 0 12px rgba(190, 220, 245, .6)) drop-shadow(0 1.5px 1.5px rgba(4, 18, 32, .75));
}

.fm-couple i { font-style: normal; font-size: .62em; }
.fm-name { white-space: nowrap; }

.fm-blessing {
  opacity: 0;
  transition: opacity 1.6s ease;
}

.families.is-blessed .fm-blessing { opacity: 1; }

.fm-dua {
  margin-top: 8px !important;
  font: 400 clamp(20px, 6cqi, 30px)/1.9 "Amiri", serif;
  color: var(--pearl);
  text-wrap: balance;
  text-shadow: 0 0 12px rgba(180, 212, 238, .4), 0 1px 2px rgba(4, 16, 28, .8);
}

.fm-dua-en {
  font: italic 500 clamp(15px, 4.3cqi, 20px)/1.4 "Cormorant Garamond", Georgia, serif;
  color: rgba(244, 241, 232, .92);
  max-width: 30em;
  margin-inline: auto !important;
  text-wrap: balance;
  text-shadow: 0 1px 2px rgba(4, 16, 28, .8);
}

.fm-dua-ref {
  margin-top: 6px !important;
  font: 700 clamp(10px, 2.6cqi, 12px)/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--moon);
}

/* where the couple will be, until the lanterns are lit */
.fm-hint {
  align-self: start;
  justify-self: center;
  margin: clamp(22px, 7cqi, 44px) 0 0;
  font: italic 500 clamp(15px, 4.3cqi, 19px)/1.3 "Cormorant Garamond", Georgia, serif;
  color: var(--moon);
  text-shadow: 0 0 8px rgba(5, 18, 30, .95), 0 1px 2px rgba(4, 16, 28, .9);
  animation: fm-hint 2.8s ease-in-out infinite;
  transition: opacity .6s;
}

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

/* the lamps light themselves as they come into view, so the hint is kept only for its place */
.fm-hint { visibility: hidden; animation: none; }

@keyframes fm-hint {
  0%, 100% { opacity: .55; }
  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(206, 228, 248, .75); stroke-width: 7; filter: url(#fmBlur); }
.fm-thread-core { stroke: #fdfeff; stroke-width: 1.6; }

.fm-bloom {
  position: absolute;
  left: 0;
  top: 0;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(214, 232, 248, .5) 35%, rgba(170, 205, 235, .14) 65%, transparent);
  opacity: 0;
  pointer-events: none;
}

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

/* The couple and the dua between the two lanterns, level with their light. */
@media (min-aspect-ratio: 6/5) {
  html.is-tablet .families {
    --lamp-w: min(14cqi, 200px, 38svh * var(--lantern-r, .45));
    --gap: clamp(20px, 3cqi, 44px);
    --motif: clamp(300px, 30cqi, 400px);
  }
  html.is-tablet .fm-lamps {
    grid-template-columns: 1fr minmax(0, 1.8fr) 1fr;
    grid-template-areas: "a u b";
    max-width: 1080px;
    align-items: start;
  }
  html.is-tablet .fm-union,
  html.is-tablet .fm-hint {
    margin-top: 0;
    align-self: center;
  }
  html.is-tablet .fm-couple { font-size: calc(clamp(40px, 5.2cqi, 64px) * var(--fit, 1)); }
  html.is-tablet .fm-rail {
    left: calc((100% - 2 * var(--gap)) / 7.6 - 30px);
    right: calc((100% - 2 * var(--gap)) / 7.6 - 30px);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .fm-side,
  .fm-rail,
  .fm-head,
  .fm-moon,
  .fm-shade,
  .fm-moonlight,
  .fm-union,
  .fm-blessing,
  .fm-names > p { transition: none; }
  .fm-hang,
  .fm-hint,
  .fm-stars,
  .is-lit .fm-flicker { animation: none; }
  .is-lit .fm-flicker { opacity: .35; }
}