/* Our families, on the marble terrace.

   A living arch: two climbing roses, one for each family, rise from carved jaali urns and twine
   together at the top, where one rose blooms. As the section comes into view it plays by
   itself (js/families.js): the vines grow up from the soil (drawn by WebGL, in the order
   assets/families/grow-*.png gives), the words come in, and the rose opens where they meet.

   The picture covers the section, whatever its shape, and everything is placed on it
   (assets/families/families.css says where the apex and the calm space inside the arch are,
   for each shape: phone, upright tablet or laptop column, sideways tablet). On a sideways
   tablet the families stand either side of the arch, and the rest is inside it. */

.families {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  background: #f1e3dc;
  color: var(--ink);
  container-type: size;
}

.fm-scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, 100cqh * var(--pic-r));
  aspect-ratio: var(--pic-r);
  translate: -50% -50%;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  container-type: size;
}

.fm-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fm-art > * { position: absolute; }

/* A soft morning light behind the words, so they read on the hazy garden (and, on a sideways
   tablet, behind each family, beside the arch). */
.fm-veil {
  inset: 0;
  background: radial-gradient(ellipse calc((var(--in-r) - var(--in-l)) * .68) calc((var(--in-b) - var(--in-t)) * .7)
    at 50% calc(var(--in-t) * .42 + var(--in-b) * .58), rgba(255, 250, 245, .8), rgba(255, 250, 245, .46) 60%, rgba(255, 250, 245, 0));
}

/* the vines: WebGL draws them as they grow; this still picture is for a browser without it */
.fm-vines,
.fm-vines-still {
  inset: 0;
  width: 100%;
  height: 100%;
}

.fm-vines-still {
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.families.has-gl .fm-vines-still { display: none; }
.families:not(.has-gl) .fm-vines { display: none; }

/* The rose where the vines twine: the hero's rose, its five stages stacked (the head in the
   same place in each), one fading into the next as it opens. Placed by its head. */
.fm-rose {
  left: var(--apex-x);
  top: var(--apex-y);
  width: var(--rose-w, 17cqw);
  aspect-ratio: 1;
  translate: -50% -42%;
  filter: saturate(.8) brightness(1.04) sepia(.08) drop-shadow(0 2px 4px rgba(110, 60, 55, .24));
  -webkit-mask-image: linear-gradient(#000 60%, transparent 78%);
          mask-image: linear-gradient(#000 60%, transparent 78%);
}

.fm-rose img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.fm-rose img:last-child { opacity: 1; }          /* (open, until js/families.js takes it) */

.fm-petals {
  inset: 0;
  overflow: hidden;
}

.fm-petal {
  position: absolute;
  left: 0;
  top: 0;
  perspective: 300px;
}

.fm-petal b { display: block; transform-style: preserve-3d; }
.fm-petal img { width: 100%; height: auto; filter: drop-shadow(0 2px 3px rgba(120, 70, 70, .16)); }

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

/* Inside the arch. Sized by the space there (--iw by --ih), and made smaller still (--fit, by
   js/families.js) if long names would not fit. */
.fm-words {
  --iw: calc((var(--in-r-n) - var(--in-l-n)) * 100cqw);
  --ih: calc((var(--in-b-n) - var(--in-t-n)) * 100cqh);
  --u: calc(min(var(--iw), var(--ih) * .62) * var(--fit, 1));
  position: absolute;
  left: calc(var(--in-l) + 1cqw);
  right: calc(100% - var(--in-r) + 1cqw);
  top: var(--in-t);
  bottom: calc(100% - var(--in-b));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * .03);
  text-align: center;
}

.fm-words p { margin: 0; }

.fm-kicker {
  font: 600 max(10px, var(--u) * .045)/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .28em;
  padding-left: .28em;
  text-transform: uppercase;
  color: var(--sage-deep);
}

.fm-title {
  margin: 0 0 calc(var(--u) * .04);
  font: 700 calc(var(--u) * .175)/1.05 "Corinthia", cursive;
  padding: 0 .2em .04em;
  white-space: nowrap;
  color: var(--rose);
  --wipe: 130%;
  -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));
}

.fm-label {
  font: 600 max(9.5px, var(--u) * .04)/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .24em;
  padding-left: .24em;
  text-transform: uppercase;
  color: var(--sage-deep);
}

.fm-parents {
  margin-top: .15em !important;
  font: 600 max(15px, var(--u) * .078)/1.2 "Cormorant Garamond", Georgia, serif;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.fm-amp {
  font: 700 calc(var(--u) * .15)/1 "Corinthia", cursive;
  color: var(--rose);
  margin: calc(var(--u) * -.01) 0 !important;
}

.fm-dua {
  margin-top: calc(var(--u) * .05);
  text-wrap: balance;
}

.fm-dua > * { text-wrap: balance; }

.fm-dua-ar {
  font: 400 max(15px, var(--u) * .068)/1.9 "Amiri", serif;
  color: var(--rose);
}

.fm-dua-en {
  margin-top: .1em !important;
  font: italic 500 max(13px, var(--u) * .054)/1.4 "Cormorant Garamond", Georgia, serif;
  color: rgba(91, 60, 64, .88);
}

.fm-dua-ref {
  margin-top: .45em !important;
  font: 600 max(9px, var(--u) * .036)/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sage-deep);
}

/* everything written on the terrace lifts off the haze a little */
.fm-words > *,
.fm-fam > *,
.fm-dua > * { text-shadow: 0 0 12px rgba(255, 251, 246, .9), 0 0 2px rgba(255, 251, 246, .8); }

/* Waiting to be played (js/families.js): the words and the rose are not there yet. */
.families.is-armed:not(.is-played) .fm-anim,
.families.is-armed:not(.is-played) .fm-rose { opacity: 0; }

/* ------------------------------------------------------------ the shapes */

@media (min-aspect-ratio: 5/8) {
  html:root .families { --rose-w: 12cqw; }
}

/* A sideways tablet: the arch is narrow in the middle of a wide garden, so each family stands
   beside its own vine, level with the "&"; the heading and the dua stay inside the arch. */
@media (min-aspect-ratio: 6/5) {
  html.is-tablet .families { --rose-w: 8cqw; }
  html.is-tablet .fm-words { --u: calc(min(var(--iw) * 1.05, var(--ih) * .66) * var(--fit, 1)); }
  html.is-tablet .fm-fam {
    position: absolute;
    top: var(--fam-y, 50%);                       /* level with the "&" (js/families.js) */
    width: calc((var(--out-l-n) - .025) * 100cqw - 2cqw);
    translate: 0 -50%;
  }
  html.is-tablet .fm-groom { right: calc(100% + (var(--in-l-n) - var(--out-l-n)) * 100cqw + 2cqw); }
  html.is-tablet .fm-bride { left: calc(100% + (var(--out-r-n) - var(--in-r-n)) * 100cqw + 2cqw); }
  html.is-tablet .fm-fam .fm-parents { font-size: max(17px, var(--u) * .095); text-wrap: balance; }
  html.is-tablet .fm-fam .fm-label { font-size: max(10px, var(--u) * .048); }
  html.is-tablet .fm-veil {
    background:
      radial-gradient(ellipse calc((var(--in-r) - var(--in-l)) * .7) calc((var(--in-b) - var(--in-t)) * .62)
        at 50% calc((var(--in-t) + var(--in-b)) / 2), rgba(255, 250, 245, .72), rgba(255, 250, 245, .38) 58%, rgba(255, 250, 245, 0)),
      radial-gradient(ellipse calc(var(--out-l) * .56) 22% at calc(var(--out-l) / 2 + 1%) calc((var(--in-t) + var(--in-b)) / 2),
        rgba(255, 250, 245, .74), rgba(255, 250, 245, .4) 58%, rgba(255, 250, 245, 0)),
      radial-gradient(ellipse calc((100% - var(--out-r)) * .56) 22% at calc((100% + var(--out-r)) / 2 - 1%) calc((var(--in-t) + var(--in-b)) / 2),
        rgba(255, 250, 245, .74), rgba(255, 250, 245, .4) 58%, rgba(255, 250, 245, 0));
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .families.is-armed:not(.is-played) .fm-anim,
  .families.is-armed:not(.is-played) .fm-rose { opacity: 1; }
}