/* The families: two jharokhas (carved balcony windows) in layered ivory paper,
   one for each set of parents, on an ivory palace wall.

   Each window is its own little stack: a recessed panel filling its opening,
   the parents' names written on it, a pair of jali shutters over them, and
   the carved frame on top. The panel and the shutters are cut to the opening
   by opening.png, a mask the same size as the frame, so they fit the hole
   exactly. Inside a window, cqi is the window's own width, so the names are
   sized by the window and read the same at any size.

   Three compositions, like the hero, by the stage's shape: phone and upright
   (the windows side by side, the garland between their balconies, the
   couple's names below) and sideways (a window either side, and between
   them the garland, the invitation and the couple). --u is the unit, as in
   the hero: 1cqw on a phone, the 3:4 or 4:3 box that fits on a tablet.
*/

.families {
  position: relative;
  background: var(--paper);
}

.families-stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  container: fstage / size;
}

.families-stage > * { --u: 1cqw; }

.f-wall {
  position: absolute;
  inset: 0;
  background: var(--paper) url(../assets/families/wall-phone.webp) center / cover no-repeat;
}

/* ------------------------------------------------------------ the layout */

.f-layout {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(6 * var(--u)) calc(3 * var(--u)) calc(12 * var(--u));
  text-align: center;
  color: var(--ink);
}

.f-layout > * { margin: 0; }

.f-title {
  font: 600 calc(2.6 * var(--u))/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .32em;
  padding-left: .32em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* a small gold rule either side of the title */
.f-title::before,
.f-title::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 2.2em;
  height: 1px;
  margin: 0 .9em .15em;
  background: linear-gradient(90deg, transparent, rgba(169, 128, 63, .8));
}
.f-title::after { background: linear-gradient(90deg, rgba(169, 128, 63, .8), transparent); margin-left: .6em; }

.f-windows {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(3 * var(--u)) !important;
}

.f-and {
  width: calc(4 * var(--u));
  font: 400 calc(11 * var(--u))/1 "Pinyon Script", cursive;
  color: var(--gold);
  margin-top: calc(6 * var(--u)) !important;
}

.f-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------ a window */

.f-window {
  position: relative;
  width: calc(46 * var(--u));
  aspect-ratio: 760 / 1478;
  container-type: inline-size;
  filter: drop-shadow(0 1.2cqi 1.8cqi rgba(92, 40, 30, .28));
}

.f-frame,
.f-panel,
.f-shutter {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.f-frame { background: url(../assets/families/window.webp) 0 0 / 100% 100% no-repeat; }

/* The recess behind the opening: warmer, shaded towards its edges. */
.f-panel {
  background:
    radial-gradient(ellipse 60% 45% at 50% 52%, rgba(255, 248, 234, .95), rgba(236, 219, 190, .9) 70%, rgba(205, 176, 140, .9) 100%),
    var(--paper);
  -webkit-mask: url(../assets/families/opening.png) 0 0 / 100% 100% no-repeat;
          mask: url(../assets/families/opening.png) 0 0 / 100% 100% no-repeat;
}

/* The opening's box, where the names go (opening: 25.8-74.1% across, 29.2-78.5% down). */
.f-names {
  position: absolute;
  left: 27%;
  width: 46%;
  top: 36%;
  height: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6cqi;
  text-align: center;
  color: var(--ink);
}

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

.f-mr {
  font: italic 500 8.2cqi/1.1 "Cormorant Garamond", Georgia, serif;
  color: var(--ink-soft);
}

.f-parents {
  font: 600 10.4cqi/1.08 "Cormorant Garamond", Georgia, serif;
  text-wrap: balance;
  text-shadow: 0 .15cqi 0 rgba(255, 255, 255, .7);
}

.f-role {
  margin-top: 2cqi !important;
  padding-top: 2.4cqi;
  border-top: 1px solid rgba(169, 128, 63, .55);
  font: italic 500 6.4cqi/1.15 "Cormorant Garamond", Georgia, serif;
  color: var(--gold);
  text-wrap: balance;
}

/* Jali shutters: the lattice, cut to the opening and split down the middle,
   each half hinged at the side of the opening. Open once the section has
   come in (families.js); without the script they are open already. */
.f-shutter {
  /* one lattice panel over the opening (29.2-78.5% down): 49.5% tall, centred on it */
  background: url(../assets/families/jali.webp) 50% 57.6% / auto 49.5% no-repeat;
  -webkit-mask: url(../assets/families/opening.png) 0 0 / 100% 100% no-repeat;
          mask: url(../assets/families/opening.png) 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 .4cqi .5cqi rgba(92, 40, 30, .35));
  backface-visibility: hidden;
  opacity: 0;
}

.f-shutter-l { clip-path: inset(0 50% 0 0); transform-origin: 25.8% 50%; }
.f-shutter-r { clip-path: inset(0 0 0 50%); transform-origin: 74.1% 50%; }

.families.is-waiting .f-shutter { opacity: 1; }

/* ------------------------------------------------------------ between them */

.f-garland {
  width: calc(50 * var(--u));
  aspect-ratio: 1400 / 601;
  margin-top: calc(-11 * var(--u)) !important;   /* tied up at the two balconies */
  background: url(../assets/families/garland.webp) 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 .8cqw 1cqw rgba(92, 40, 30, .25));
  transform-origin: 50% 0;
}

.f-invite {
  margin-top: calc(3 * var(--u)) !important;
  font: italic 500 calc(4.4 * var(--u))/1.4 "Cormorant Garamond", Georgia, serif;
  color: var(--ink-soft);
}

.f-couple {
  margin-top: calc(1.5 * var(--u)) !important;
  font: 400 calc(12 * var(--u))/1.2 "Pinyon Script", cursive;
  color: var(--ink);
  text-shadow: 0 .012em 0 rgba(255, 255, 255, .75), 0 -.006em 0 rgba(60, 8, 20, .28);
}

.f-couple-amp {
  font-size: .55em;
  color: var(--gold);
  margin: 0 .1em;
}

.f-couple-1,
.f-couple-2 { display: inline-block; padding: 0 .12em; }

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

.f-roses {
  position: absolute;
  bottom: calc(-3 * var(--u));
  width: calc(44 * var(--u));
  filter: drop-shadow(0 1cqw 1.6cqw rgba(92, 40, 30, .3));
  pointer-events: none;
}

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

.f-petals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

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

@container fstage (min-aspect-ratio: 5 / 8) {
  .families-stage > * { --u: min(1cqw, .75cqh); }
  .f-wall { background-image: url(../assets/families/wall-tab.webp); }
  .f-window { width: calc(34 * var(--u)); }
  .f-and { width: calc(8 * var(--u)); font-size: calc(8 * var(--u)); margin-top: calc(5 * var(--u)) !important; }
  .f-garland { width: calc(44 * var(--u)); margin-top: calc(-9 * var(--u)) !important; }
  .f-invite { font-size: calc(3.3 * var(--u)); }
  .f-couple { font-size: calc(9.5 * var(--u)); }
  .f-title { font-size: calc(2 * var(--u)); }
  .f-roses { width: calc(38 * var(--u)); }
}

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

   A window either side, facing each other across the middle, where the
   garland hangs between their eaves over the invitation and the couple. */

@container fstage (min-aspect-ratio: 6 / 5) {
  .families-stage > * { --u: min(1cqw, 1.3333cqh); }
  .f-wall { background-image: url(../assets/families/wall-land.webp); }
  .f-layout { padding: calc(4 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)); }

  /* the windows drop out of the column and stand at the sides */
  .f-windows {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    translate: 0 -46%;
    justify-content: space-between;
    padding: 0 calc(4.5 * var(--u));
    margin: 0 !important;
  }
  .f-window { width: calc(25 * var(--u)); }
  .f-and { display: none; }

  .f-title { font-size: calc(1.5 * var(--u)); }
  .f-garland { width: calc(52 * var(--u)); margin-top: calc(2 * var(--u)) !important; }
  .f-invite { font-size: calc(2.5 * var(--u)); margin-top: calc(1 * var(--u)) !important; }
  .f-couple { font-size: calc(6.6 * var(--u)); }
  .f-roses { width: calc(30 * var(--u)); bottom: calc(-2 * var(--u)); }
  .f-roses-l { left: -3cqw; }
  .f-roses-r { right: -3cqw; }
}