/* The guest's letter, on the ivory muslin (surface P, in base.css).

   Shut, the section is the heading, the folded letter in its organza tied with a jasmine gajra,
   with loose jasmine round it on the muslin, and a line asking the guest to touch it. Open
   (.is-open, set by js/letter.js), it is the letter, with the opened organza below it (or beside
   it, on a tablet held sideways). The letter's place is taken as it rises, so js/letter.js can fly
   the folded letter to exactly where it will lie, and the page does not jump when it unfolds.

   The parcel is drawn on one box, its stage: the open organza's picture, the largest of its
   pictures. assets/letter/letter.css (made by build_letter.py) says where the others lie on it:
   the envelope (--pl-*), its four flaps and the edges they fold back on, the letter in the open
   organza (--pap-*) and the open flaps. Shut, the stage is drawn larger (--shut), so the envelope
   fills most of the box; as the flaps open it draws back, and the open organza fills it. */

.letter {
  --lw: min(100cqi - 28px, 560px);             /* the letter's width */
  --stage-w: min(96cqi, 500px);                /* the parcel, shut */
  --keep-w: min(66cqi, 340px);                 /* the opened organza, below the letter */
  display: flex;
  flex-direction: column;
  justify-content: center;                     /* shut: the heading and the parcel, together in the middle */
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--seam-h) * .5 + 30px) 14px calc(var(--seam-h) * .5 + 40px);
  overflow-x: clip;
  overflow-anchor: none;
  -webkit-tap-highlight-color: transparent;
}

.letter > :is(.lt-head, .lt-stage) { position: relative; }

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

.lt-head {
  text-align: center;
  margin: 0 0 4px;
  z-index: 2;
}

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

.lt-kicker {
  font: 700 clamp(11px, 3cqi, 14px)/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .28em;
  padding-left: .28em;
  text-transform: uppercase;
  color: var(--kick);
}

/* The guest's name, in midnight ink. */
.lt-for {
  font: 400 clamp(48px, 14cqi, 84px)/1.2 "Allura", cursive;
  overflow-wrap: anywhere;
}

.lt-for .ink {
  display: inline-block;
  padding: 0 .3em .1em;
}

/* ------------------------------------------------------------ the stage */

.lt-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

.letter.is-open { justify-content: flex-start; }

.lt-slot {
  width: 100%;
  display: none;
  justify-content: center;
}

.letter.is-open .lt-slot { display: flex; }

/* ------------------------------------------------------------ the letter */

/* The paper: its top and its foot (their torn edges and the silver border's corners), and between
   them its middle, repeated downwards as far as the words need; each fades into the middle where
   they meet (assets/letter/letter.css gives the pictures and their heights, in the sheet's
   width). The words sit inside the silver border. */
.lt-letter {
  position: relative;
  isolation: isolate;
  width: var(--lw);
  min-height: calc(var(--lw) * var(--pmin));
  margin: 0;
  padding:
    calc(var(--lw) * var(--pin-t)) calc(var(--lw) * var(--pin-r))
    calc(var(--lw) * var(--pin-b)) calc(var(--lw) * var(--pin-l));
  filter: drop-shadow(0 1px 1px rgba(20, 50, 72, .16)) drop-shadow(0 12px 16px rgba(14, 40, 60, .2));
  text-align: center;
  container-type: inline-size;
  font: 500 clamp(15px, 4.6cqi, 19px)/1.55 "Cormorant Garamond", Georgia, serif;
  color: var(--ink);
}

.lt-letter::before,
.lt-letter::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  pointer-events: none;
}

.lt-letter::before {
  top: calc(var(--lw) * var(--pt));
  bottom: calc(var(--lw) * var(--pb));
  background-position: 0 0;
  background-size: 100% auto;
  background-repeat: repeat-y;
}

.lt-letter::after {
  top: 0;
  bottom: 0;
  background-position: 50% 0, 50% 100%;
  background-size: 100% auto, 100% auto;
  background-repeat: no-repeat;
}

.letter:not(.is-read) .lt-slot .lt-letter { visibility: hidden; }

.lt-letter > p { margin: 0 0 .8em; }

.lt-verse {
  font: 400 clamp(18px, 6.6cqi, 27px)/2.05 "Amiri Quran", "Amiri", serif;
  color: var(--ink);
  margin-bottom: .3em !important;
}

.lt-verse-en {
  font-style: italic;
  font-size: .9em;
  line-height: 1.45;
  color: rgba(23, 58, 82, .84);
  margin-bottom: .3em !important;
}

.lt-verse-ref {
  font: 700 clamp(10px, 3cqi, 13px)/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--kick);
}

/* a fine silver rule with a small silver filigree bead on it */
.lt-rule {
  position: relative;
  height: 14px;
  margin: 1em auto 1.1em !important;
  width: 62%;
  background: linear-gradient(90deg, transparent, #a9b6bd 18%, #a9b6bd 82%, transparent) center / 100% 1px no-repeat;
}

.lt-rule i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  translate: -50% -50%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #fff 0 12%, transparent 30%),
    repeating-conic-gradient(from 10deg, rgba(60, 80, 92, .35) 0 12deg, transparent 12deg 30deg),
    radial-gradient(circle at 40% 35%, #f4f7f8, #b9c4ca 55%, #7d8b93);
  box-shadow: 0 0 0 2px var(--muslin), 0 1px 2px 2px rgba(40, 70, 90, .25);
}

.lt-greeting {
  font: 400 clamp(28px, 10.6cqi, 46px)/1.25 "Allura", cursive;
  text-wrap: balance;
  margin-bottom: .3em !important;
}

.lt-greeting .ink,
.lt-sign .ink {
  display: inline-block;
  padding: 0 .2em .08em;
}

.lt-invite {
  font-style: italic;
  font-weight: 600;
  font-size: 1.06em;
  line-height: 1.45;
}

.lt-urdu {
  font: 400 clamp(14px, 6cqi, 24px)/2.3 "Noto Nastaliq Urdu", serif;
  margin: 1em 0 0 !important;
}

.lt-urdu-en {
  font-style: italic;
  font-size: .88em;
  color: rgba(23, 58, 82, .76);
}

.lt-closing {
  font-style: italic;
  margin: 1.3em 0 0 !important;
}

.lt-sign {
  font: 400 clamp(38px, 12.4cqi, 56px)/1.2 "Allura", cursive;
  margin-bottom: .15em !important;
}

/* The seal: pressed in silver at the foot, the couple's initials engraved on its plain middle. */
.lt-seal,
.lt-flyseal {
  aspect-ratio: 1;
  background-position: center;            /* longhands: the picture itself is in assets/letter/letter.css */
  background-size: contain;
  background-repeat: no-repeat;
  container-type: size;
  display: grid;
  place-items: center;
}

.lt-seal {
  width: clamp(80px, 27cqi, 120px);
  margin: .2em auto 0;
  filter: drop-shadow(0 2px 2px rgba(20, 44, 62, .4)) drop-shadow(0 5px 7px rgba(20, 44, 62, .22));
}

.letter:not(.is-sealed) .lt-seal { opacity: 0; }

.lt-mono {
  font: 400 calc(var(--seal-blank) * 52cqw)/1 "Allura", cursive;
  color: #5d6c75;
  /* engraved: a dark cut with a bright lip below it */
  text-shadow: 0 .03em 0 rgba(255, 255, 255, .85), 0 -.02em .01em rgba(20, 36, 48, .55);
  translate: 0 .04em;
  white-space: nowrap;
}

.lt-mono i {
  font-size: .64em;
  font-style: normal;
  margin: 0 .03em;
}

/* ------------------------------------------------------------ jasmine buds that open */

/* Four pictures of one bud opening (assets/letter/bloom.webp, in a row), laid over each other;
   while the letter is read each shows in turn (js/letter.js), so the bud opens. */
.lt-bud {
  position: absolute;
  z-index: 2;
  aspect-ratio: 1;
  pointer-events: none;
  filter: drop-shadow(1px 2px 1.5px rgba(20, 50, 70, .3));
}

.lt-bud i {
  position: absolute;
  inset: 0;
  background-size: 400% 100%;
  background-repeat: no-repeat;
  opacity: 0;
}

.lt-bud i:nth-child(1) { background-position: 0 0; opacity: 1; }
.lt-bud i:nth-child(2) { background-position: 33.333% 0; }
.lt-bud i:nth-child(3) { background-position: 66.667% 0; }
.lt-bud i:nth-child(4) { background-position: 100% 0; }

/* two on the letter's corners, lying on the paper; one on the organza, once it is opened */
.lb-1 { width: 16%; right: -1.5%; top: 1%; rotate: 12deg; }
.lb-2 { width: 15%; left: -1%; bottom: 4%; rotate: -128deg; scale: -1 1; }
.lb-3 {
  width: 13%;
  left: 44%;
  top: 40%;
  rotate: -24deg;
  opacity: 0;
  transition: opacity .8s ease;
}

.letter.is-read .lb-3 { opacity: 1; }

/* ------------------------------------------------------------ the parcel */

.lt-keep {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.letter.is-open .lt-keep { margin-top: clamp(18px, 5cqi, 36px); }

.lt-parcel {
  position: relative;
  display: block;
  width: var(--stage-w);
  aspect-ratio: var(--stage-r);
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 14px;
  -webkit-tap-highlight-color: transparent;
}

.letter.is-open .lt-parcel {
  width: var(--keep-w);
  cursor: default;
}

.lt-parcel:focus-visible { outline: 2px solid var(--kick); outline-offset: 4px; }

.pc-stage {
  position: absolute;
  inset: 0;
  perspective: 1400px;
  transform: scale(var(--shut));
}

.letter.is-open .pc-stage { transform: none; }

.pc-stage > :where(span:not(.lt-bud)) {
  position: absolute;
  inset: 0;
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/* the envelope's own picture, and the gajra over it */
.pc-stage > .pc-plain {
  left: calc(var(--pl-x) * 100%);
  top: calc(var(--pl-y) * 100%);
  width: calc(var(--pl-w) * 100%);
  height: calc(var(--pl-h) * 100%);
}

.pc-stage > .pc-gajra,
.pc-stage > .pc-glint {
  left: calc((var(--pl-x) + var(--pl-w) * var(--gj-x)) * 100%);
  top: calc((var(--pl-y) + var(--pl-h) * var(--gj-y)) * 100%);
  width: calc(var(--pl-w) * var(--gj-w) * 100%);
  height: calc(var(--pl-h) * var(--gj-h) * 100%);
}

.pc-gajra { filter: drop-shadow(1px 2px 1.5px rgba(16, 44, 64, .35)); }

/* now and then moonlight runs along the gajra's silver and its buds */
.pc-glint {
  background: linear-gradient(115deg, transparent 40%, rgba(236, 246, 255, .8) 49%, rgba(236, 246, 255, .2) 54%, transparent 60%) 170% 0 / 300% 100% no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  mix-blend-mode: screen;
  animation: lt-glint 8s ease-in-out 2s infinite;
}

@keyframes lt-glint {
  0% { background-position: 170% 0; }
  32%, 100% { background-position: -70% 0; }
}

/* its soft shadow on the muslin, to the lower right (the moon is to the upper left) */
.pc-shadow {
  left: calc((var(--env-x) + var(--env-w) * .05) * 100%);
  top: calc((var(--env-y) + var(--env-h) * .08) * 100%);
  width: calc(var(--env-w) * 96%);
  height: calc(var(--env-h) * 96%);
  border-radius: 8%;
  background: rgba(16, 46, 68, .34);
  filter: blur(10px);
  translate: 2.5% 3%;
}

/* open, the organza is flat, and its flaps start folded up (js/letter.js lays them down) */
.pc-bed { opacity: 0; }
.of { opacity: 0; }
.of-t { transform: rotateX(-90deg); }
.of-b { transform: rotateX(90deg); }
.of-l { transform: rotateY(90deg); }
.of-r { transform: rotateY(-90deg); }

.letter.is-open .pc-bed,
.letter.is-open .of { opacity: 1; }
.letter.is-open .of { transform: none; }
.letter.is-open :is(.cf, .pc-gajra, .pc-glint, .pc-shadow),
.letter.is-lifted .pc-letter { visibility: hidden; }

/* ------------------------------------------------------------ loose jasmine on the muslin */

.lt-loose {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lt-loose i {
  position: absolute;
  background-image: url(../assets/cover/petals.webp);
  background-repeat: no-repeat;
  filter: drop-shadow(1px 2px 1.5px rgba(20, 50, 70, .28));
}

/* in the stage's corners, clear of the organza however far it opens */
.lt-loose i:nth-child(1) { width: 10.5%; left: 4%; top: 6%; rotate: -32deg; }
.lt-loose i:nth-child(2) { width: 8.5%; left: 16%; top: 3%; rotate: 48deg; }
.lt-loose i:nth-child(3) { width: 10%; right: 4%; top: 10%; rotate: 76deg; }
.lt-loose i:nth-child(4) { width: 8%; right: 6%; bottom: 13%; rotate: 150deg; }
.lt-loose i:nth-child(5) { width: 9.5%; left: 6%; bottom: 7%; rotate: -118deg; }
.lt-loose i:nth-child(6) { width: 9.5%; right: 16%; bottom: 2%; rotate: 20deg; }

.lt-hint {
  margin: 10px 0 0;
  font: italic 500 clamp(15px, 4.4cqi, 19px)/1.3 "Cormorant Garamond", Georgia, serif;
  color: var(--kick);
  animation: lt-hint 2.8s ease-in-out infinite;
}

.letter.is-open .lt-hint { display: none; }

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

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

/* ------------------------------------------------------------ the folded letter */

/* Three panels, each showing its third of a copy of the letter; the top and bottom ones folded
   over the middle, their backs plain paper, and the top one's back (the outside, as it lay in the
   organza) the letter as the open organza's picture has it. */
.lt-packet {
  position: absolute;
  z-index: 3;
  perspective: 1800px;
  transform-style: preserve-3d;
  pointer-events: none;
  transform-origin: 50% 50%;
}

.pk-panel {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.pk-mid { top: 0; }
.pk-top { bottom: 100%; transform-origin: 50% 100%; }
.pk-bottom { top: 100%; transform-origin: 50% 0; }

.pk-face,
.pk-back {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.pk-face > .lt-letter {
  position: absolute;
  left: 0;
  filter: none;
}

.pk-face :is(.lt-seal, .lt-bud) { visibility: hidden; }

.pk-back {
  transform: rotateX(180deg);
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(120, 140, 150, .25);
}

/* the outside: the letter as it lay in the organza, its torn edge and silver border */
.pk-back.pk-outside {
  background-color: transparent;
  background-position: center;
  background-size: calc(100% * (1 + 2 * var(--fold-pad-x))) calc(100% * (1 + 2 * var(--fold-pad-y)));
  box-shadow: none;
}

.pk-mid .pk-face { box-shadow: 0 10px 24px -10px rgba(14, 40, 60, .45); }

.lt-flyseal {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(0 5px 8px rgba(14, 40, 60, .35));
}

/* ------------------------------------------------------------ arriving */

/* The heading and the parcel come up as the section comes into view. */
.lt-head,
.lt-keep {
  transition: opacity 1s ease, translate 1.2s cubic-bezier(.2, .7, .2, 1);
}

.lt-keep { transition-delay: .15s; }

.letter:not(.is-seen) .lt-head,
.letter:not(.is-seen) .lt-keep {
  opacity: 0;
  translate: 0 16px;
}

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

/* Open, the organza lies to the left of the letter, level with the middle of the screen as the
   letter scrolls past. */
@media (min-aspect-ratio: 6/5) {
  html.is-tablet .letter {
    --lw: min(100cqi - 28px - min(30cqi, 340px) - clamp(24px, 4.5cqi, 60px), 580px);
    --stage-w: min(58cqi, 62svh * var(--stage-r), 470px);
  }
  html.is-tablet .letter.is-open .lt-stage {
    display: grid;
    grid-template-columns: min(30cqi, 340px) var(--lw);
    justify-content: center;
    align-items: start;
    column-gap: clamp(24px, 4.5cqi, 60px);
  }
  html.is-tablet .letter.is-open .lt-slot { grid-column: 2; grid-row: 1; }
  html.is-tablet .letter.is-open .lt-keep {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: calc(50svh - 16cqi);
    margin-top: 12vh;
  }
  html.is-tablet .letter.is-open .lt-parcel { width: 100%; }
}

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

@media (prefers-reduced-motion: reduce) {
  .pc-glint,
  .lt-hint { animation: none; }
  .lt-head,
  .lt-keep { transition: none; }
  .lt-hint { opacity: .9; }
}