/* The guest's letter, on the ivory silk (surface P), between two onyx bands.

   A Mughal farman: the letter is rolled up behind its case (black lacquer caged in gold
   filigree), and its gold seal hangs below the case on a cord. The case opens by itself (or at
   a touch): the cap comes off and is set down, and the roll drops, unrolling the letter down the
   silk (js/letter.js).

   Everything is sized by the case's width (--cw) and placed by the fractions measured on the
   pictures (assets/letter/letter.css, from assets-src/letter/build_letter.py):
     .lt-case    the case: the open body, its gold gleam, and while it is shut, the capped end's
                 last span of filigree and the cap
     .lt-sheet   the letter: the paper's top, a middle that repeats downwards, and its foot; the
                 page makes it a whole number of repeats tall, so the border runs on unbroken.
                 It is shown down to the roll (clip-path) as the roll goes down
     .lt-roll    the rolled foot, with the seal hanging from it
     .lt-dust    flakes of gold, while it unrolls
     .lt-lamp    lamplight drifting slowly over the silk and the gold
*/

.letter {
  overflow-x: clip;
  padding-bottom: 1px;
}

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

.lt-head {
  position: relative;
  z-index: 1;
  padding: calc(clamp(22px, 6.4cqi, 40px) / 2 + clamp(30px, 9cqi, 60px)) 16px 0;
  text-align: center;
}

.lt-kicker { font-size: clamp(11.5px, 3.3cqi, 15px); }

.lt-for {
  margin: .08em 0 0;
  font: 400 calc(clamp(46px, 13.5cqi, 86px) * var(--fit, 1)) / 1.12 'Luxurious Script', cursive;
  text-wrap: balance;
}

/* Gold on ivory: a deeper gold than the hero's, with a fine dark edge so it reads on the silk.
   It is written in, left to right (--wipe), and a gleam crosses it once (--gleam). */
.lt-guest,
.lt-sign-names {
  padding: 0 .18em .1em;
  background:
    linear-gradient(100deg, transparent calc(var(--gleam) - 12%), rgba(255, 248, 222, .95) var(--gleam), transparent calc(var(--gleam) + 12%)),
    linear-gradient(172deg, #caa052 0%, #8d6420 34%, #c89a45 58%, #7a561c 80%, #a97c33 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  color: transparent;
  filter: drop-shadow(0 .5px 0 rgba(255, 246, 222, .7)) drop-shadow(0 1px .5px rgba(70, 44, 8, .35));
}

.lt-guest {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 16%), transparent var(--wipe));
          mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 16%), transparent var(--wipe));
}

/* not yet seen: the name waits to be written */
.letter:not(.is-seen) .lt-guest { --wipe: -2%; }
.letter.is-seen .lt-guest { --wipe: 130%; }

/* ------------------------------------------------------------ the farman */

.lt-farman {
  /* the case, both caps; the letter; the roll; the seal */
  --cw: min(92cqi, 660px);
  --ch: calc(var(--cw) / var(--case-r));
  --sw: calc(var(--cw) * .76);
  --rw: calc(var(--sw) / var(--roll-pw));
  --rh: calc(var(--rw) / var(--roll-r));
  --seal-w: calc(var(--cw) * .17);
  --seal-h: calc(var(--seal-w) / var(--seal-r));
  /* below the letter: the seal's drop, and room before the band */
  --foot: calc(var(--seal-h) + clamp(22px, 6.4cqi, 40px) / 2 + clamp(26px, 7cqi, 52px));
  /* where the cap is set down: below the case's end, beside the letter (js/letter.js ends here) */
  --cap-rest: translate(-26%, 112%) rotate(-11deg);
  position: relative;
  z-index: 2;
  width: var(--cw);
  margin: clamp(12px, 3.6cqi, 28px) auto 0;
  /* the letter's top runs a little way under the tube */
  padding: calc(var(--ch) * (var(--tube-b) - .06)) 0 var(--foot);
}

/* ---- the case */

.lt-case {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 100%;
  height: var(--ch);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 calc(var(--ch) * .07) calc(var(--ch) * .07) rgba(46, 30, 8, .4));
}

.letter.is-open .lt-case { cursor: default; }

.lt-case:focus-visible { outline: none; }
.lt-case:focus-visible .c-body { filter: drop-shadow(0 0 3px #fff4cf) drop-shadow(0 0 6px rgba(201, 162, 75, .9)); }

.lt-case > span:not(.sr-only) {
  position: absolute;
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.c-body,
.c-gleam { inset: 0; }

/* while the cap is on, the open mouth is cut away (the shut piece stands in for it) */
.c-body { clip-path: inset(0 calc(var(--body-cut) * 100%) 0 0); }
.letter.is-open .c-body { clip-path: none; }

.c-shut {
  left: calc(var(--shut-l) * 100%);
  top: 0;
  width: calc(var(--shut-w) * 100%);
  height: 100%;
}

.letter.is-open .c-shut { opacity: 0; }

.c-cap {
  left: calc(var(--cap-l) * 100%);
  top: calc(var(--cap-t) * 100%);
  width: calc(var(--cap-w) * 100%);
  height: calc(var(--cap-h) * 100%);
  transform-origin: 50% 50%;
}

/* set down on the silk below the case's end, beside the letter */
.letter.is-open .c-cap { transform: var(--cap-rest); }

/* the lamplight crossing the gold now and then */
.lt-case > span.c-gleam {
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  background-image: linear-gradient(100deg, transparent 43%, rgba(255, 244, 212, .9) 50%, transparent 57%);
  background-size: 300% 100%;
  background-position: 100% 0;
  mix-blend-mode: screen;
  animation: lt-gleam 11s ease-in-out 1.5s infinite;
}

@keyframes lt-gleam {
  0%        { background-position: 100% 0; }
  22%, 100% { background-position: 0% 0; }
}

/* ---- the letter */

.lt-sheet {
  --fs: clamp(15px, calc(var(--sw) * .05), 20px);
  position: relative;
  z-index: 1;
  display: block;
  width: var(--sw);
  margin: 0 auto;
  padding:
    calc(var(--sw) * (var(--pin-t) + .075))
    calc(var(--sw) * (var(--pin-r) + .07))
    calc(var(--sw) * (var(--pin-b) + .07))
    calc(var(--sw) * (var(--pin-l) + .07));
  background-color: #f0d8b0;
  background-position: 0 0, 0 100%, 0 calc(var(--sw) * var(--pt));
  background-size: 100% auto;
  background-repeat: no-repeat, no-repeat, repeat-y;
  box-shadow: 0 1px 2px rgba(64, 42, 12, .28), 0 calc(var(--sw) * .02) calc(var(--sw) * .05) rgba(64, 42, 12, .2);
  color: var(--ink);
  font: 500 var(--fs) / 1.5 'Cormorant Garamond', Georgia, serif;
  text-align: center;
  /* rolled up: nothing of it shows until the roll comes down */
  clip-path: inset(-40px -40px 100% -40px);
}

.letter.is-open .lt-sheet { clip-path: inset(-40px -40px -40px -40px); }

.lt-sheet:focus { outline: none; }

.lt-text > * { margin: 0; }
.lt-text > p + p { margin-top: .7em; }

.lt-verse {
  font: 400 1.34em / 2.05 'Amiri Quran', 'Amiri', serif;
  color: #2b2116;
  text-wrap: balance;
}

.lt-text > .lt-verse-en {
  margin-top: .45em;
  font-style: italic;
  font-size: .95em;
  line-height: 1.42;
  color: #3a2e21;
  text-wrap: balance;
}

.lt-text > .lt-verse-ref {
  margin-top: .5em;
  font: 600 .7em / 1.3 'Cormorant Garamond', Georgia, serif;
  letter-spacing: .22em;
  padding-left: .22em;
  text-transform: uppercase;
  color: var(--brass);
}

/* a gold rule with an eight-pointed star in the middle */
.lt-text > .lt-rule {
  position: relative;
  height: 1em;
  margin: 1em auto 1.05em;
  width: 62%;
}

.lt-rule::before,
.lt-rule::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - .9em);
  height: 1px;
  background: linear-gradient(90deg, rgba(156, 114, 49, 0), #b08434 60%, #c99d4b);
}

.lt-rule::before { left: 0; }
.lt-rule::after { right: 0; transform: scaleX(-1); }

.lt-rule i,
.lt-rule i::before {
  position: absolute;
  left: 50%;
  top: 50%;
  width: .62em;
  height: .62em;
  margin: -.31em 0 0 -.31em;
  background: linear-gradient(135deg, #e5c273, #9c7231);
}

.lt-rule i { transform: rotate(45deg); }
.lt-rule i::before { content: ""; left: 0; top: 0; margin: 0; transform: rotate(45deg); }

.lt-text > .lt-greeting {
  font-style: italic;
  font-size: 1.14em;
  color: #2b2116;
}

.lt-text > .lt-greeting + p { margin-top: .55em; }

.lt-text > .lt-urdu {
  margin-top: 1em;
  font: 400 1.02em / 2.3 'Noto Nastaliq Urdu', serif;
  color: #3a2c1a;
  text-wrap: balance;
}

.lt-text > .lt-urdu-en {
  margin-top: .1em;
  font-style: italic;
  font-size: .86em;
  color: #5a4a36;
}

.lt-text > .lt-closing {
  margin-top: 1.25em;
  font-style: italic;
}

.lt-text > .lt-sign {
  margin-top: .05em;
  font: 400 2.35em / 1.25 'Luxurious Script', cursive;
}

/* ---- the roll, and the seal hanging from it */

.lt-roll {
  position: absolute;
  left: 50%;
  z-index: 2;
  width: var(--rw);
  height: var(--rh);
  margin-left: calc(var(--rw) / -2);
  /* rolled up behind the case */
  top: calc(var(--ch) * var(--tube-c) - var(--rh) / 2);
}

/* down: its top on the letter's foot */
.letter.is-open .lt-roll { top: calc(100% - var(--foot) - 2px); }

.r-art {
  position: absolute;
  inset: 0;
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 calc(var(--rh) * .16) calc(var(--rh) * .14) rgba(46, 30, 8, .38));
}

.lt-seal {
  position: absolute;
  left: 50%;
  top: 22%;
  width: var(--seal-w);
  height: var(--seal-h);
  margin-left: calc(var(--seal-w) * var(--seal-hx) * -1);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform-origin: calc(var(--seal-hx) * 100%) 2%;
  filter: drop-shadow(0 calc(var(--seal-w) * .05) calc(var(--seal-w) * .05) rgba(46, 30, 8, .35));
}

/* the couple's initials, pressed into the wax */
.lt-mono {
  position: absolute;
  left: 50%;
  top: calc(var(--seal-cy) * 100%);
  translate: -50% -52%;
  white-space: nowrap;
  font: 600 calc(var(--seal-w) * .25) / 1 'Cormorant Garamond', Georgia, serif;
  letter-spacing: .04em;
  color: #5a3b10;
  text-shadow: 0 1px 0 rgba(255, 234, 186, .75), 0 -1px 1px rgba(36, 20, 3, .6), 0 0 1px rgba(60, 36, 6, .5);
}

.lt-mono i { font-style: italic; font-weight: 500; margin: 0 .06em; }

/* ---- flakes of gold */

.lt-dust {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.lt-dust i {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--s);
  height: calc(var(--s) * .8);
  background: linear-gradient(135deg, #fff3c4, #e2b85c 45%, #a8792c);
  clip-path: polygon(10% 20%, 55% 0, 100% 35%, 85% 90%, 35% 100%, 0 65%);
  opacity: 0;
}

/* ------------------------------------------------------------ lamplight */

.lt-lamp {
  position: absolute !important;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: soft-light;
}

.lt-lamp::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: max(130cqi, 700px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 104, .75), rgba(255, 180, 90, .32) 38%, rgba(255, 170, 80, 0) 68%);
  translate: -50% -50%;
  animation: lt-drift 34s ease-in-out infinite alternate;
}

@keyframes lt-drift {
  0%   { left: 18%; top: 8%; }
  35%  { left: 70%; top: 30%; }
  70%  { left: 34%; top: 62%; }
  100% { left: 78%; top: 88%; }
}

/* ------------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
  .lt-lamp::before { animation: none; left: 40%; top: 30%; }
  .c-gleam { animation: none; opacity: 0; }
}