/* The guest's letter: a Mughal scroll on gold rods, on burgundy lace.

   While the section is pinned (js/letter.js adds .is-scrubbed), scrolling the
   page unrolls the scroll: --u goes from 0 (rolled up) to 1 (open). The top
   roll lifts and the bottom roll falls away from each other, so the scroll
   stays centred, and the sheet is revealed top-down between them. Without the
   script (or with reduced motion, or on a very short screen) it is simply
   open.

   Three compositions, like the hero, chosen by the stage's shape: phone
   (below 5:8), upright (tablets upright and the laptop column) and sideways.
   The sheet's width is set so the open scroll always fits the stage, and
   everything written on it is sized by the sheet (cqi), so it lays out the
   same at any size.
*/

.letter {
  position: relative;
  background: #3a0a12;
}

.letter.is-scrubbed {
  height: 260vh;
  height: 260svh;
}

.letter-stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  container: lstage / size;
}

.letter.is-scrubbed .letter-stage {
  position: sticky;
  top: 0;
}

.l-bg {
  position: absolute;
  inset: 0;
  background: #3a0a12 url(../assets/letter/bg-phone.webp) center / cover no-repeat;
}

/* ------------------------------------------------------------ the scroll */

.l-scroll {
  --u: 1;
  --sheet-w: min(77cqw, 38cqh);
  --rh: calc(var(--sheet-w) * .2266);          /* a roll's height: 22.66% of the sheet's width, either roll */
  /* where the bottom roll is: resting just under the top one when rolled, at the foot of the sheet when open */
  --edge: calc(var(--u) * 100% + (1 - var(--u)) * var(--rh) * .85);
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--sheet-w);
  /* keep the visible scroll centred: half of what is showing goes up */
  transform: translate(-50%, calc(var(--u) * -50% - (1 - var(--u)) * var(--rh) * .425));
  filter: drop-shadow(0 calc(var(--sheet-w) * .025) calc(var(--sheet-w) * .04) rgba(16, 0, 4, .5));
  will-change: transform;
}

.l-sheet {
  position: relative;
  container: sheet / inline-size;
  background:
    linear-gradient(90deg, rgba(120, 72, 30, .16), transparent 7%, transparent 93%, rgba(120, 72, 30, .16)),
    #f3e8d2 url(../assets/letter/paper.webp) center / cover;
  color: #4a1622;
  text-align: center;
  /* only what has come off the roll */
  clip-path: inset(0 -2px calc((1 - var(--u)) * (100% - var(--rh) * .85)) -2px);
}

/* Jadwal: the gold and burgundy ruling that frames the text of a Mughal page. */
.l-sheet::before {
  content: "";
  position: absolute;
  inset: 12.5cqi 5cqi;
  border: max(1px, .5cqi) solid rgba(178, 136, 66, .9);
  box-shadow:
    inset 0 0 0 max(1px, .45cqi) rgba(246, 236, 214, .9),
    inset 0 0 0 max(2px, .75cqi) rgba(122, 35, 49, .5);
  pointer-events: none;
}

/* The paper curving down into the bottom roll. (In here cqi is the sheet's
   own width, so the roll's height is restated in it.) */
.l-sheet::after {
  --rh: 22.66cqi;
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--edge) - 14cqi);
  height: 14cqi;
  background: linear-gradient(rgba(90, 50, 16, 0), rgba(90, 50, 16, .22));
  opacity: calc((1 - var(--u)) * 6);
  pointer-events: none;
}

/* Padded inside a wrapper, so the sheet's cqi is its full width. */
.l-sheet-in { position: relative; padding: 15cqi 10.5cqi 31cqi; }   /* room at the foot for the seal */
.l-sheet-in > * { position: relative; margin: 0; }

.l-roll {
  position: absolute;
  /* phones: the roll with smaller finials, so the whole scroll fits across
     the screen; its paper is the middle 77.7% of it */
  left: -14.35%;
  width: 128.7%;
  aspect-ratio: 1400 / 247;
  translate: 0 -50%;
  background: url(../assets/letter/roll-compact.webp) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}

.l-roll-top { top: 0; }
.l-roll-bottom {
  top: var(--edge);
  scale: 1 calc(1 - var(--u) * .12);          /* thinner as the paper comes off it */
}

/* ------------------------------------------------------------ what is written */

.l-head,
.l-rule { height: auto; }   /* sized in the markup too, so the sheet never jumps as they load */

.l-head {
  display: block;
  width: 50cqi;
  margin: 0 auto;
}

.l-verse {
  margin-top: 1cqi !important;
  text-wrap: balance;
  font-family: "Amiri Quran", "Amiri", serif;
  font-size: 5.4cqi;
  line-height: 2.05;
  background: linear-gradient(180deg, #b88a45 0%, #9c6e2c 60%, #845a20 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-stroke: .012em rgba(140, 98, 38, .7);
}

.l-verse-en {
  margin-top: 1.4cqi !important;
  text-wrap: balance;
  font: italic 500 4.2cqi/1.42 "Cormorant Garamond", Georgia, serif;
  color: #6b3a3f;
}

.l-verse-ref {
  margin-top: 1.6cqi !important;
  font: 600 2.6cqi/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .24em;
  padding-left: .24em;
  text-transform: uppercase;
  color: #a07a3c;
}

.l-rule {
  display: block;
  width: 36cqi;
  margin: 3cqi auto 0;
}

.l-greeting {
  margin-top: 3.2cqi !important;
  font: 400 8.4cqi/1.25 "Pinyon Script", cursive;
  color: #5e1424;
  text-shadow: 0 .012em 0 rgba(255, 255, 255, .7);
}

.l-body p {
  margin: 1.6cqi 0 0;
  text-wrap: pretty;
  font: 500 4.85cqi/1.5 "Cormorant Garamond", Georgia, serif;
}

.l-closing {
  margin-top: 3.2cqi !important;
  font: italic 500 4.5cqi/1.3 "Cormorant Garamond", Georgia, serif;
  color: #6b3a3f;
}

.l-signature {
  margin-top: .4cqi !important;
  font: 400 9.6cqi/1.25 "Pinyon Script", cursive;
  color: #5e1424;
  text-shadow: 0 .012em 0 rgba(255, 255, 255, .7);
}

/* Written in as if by pen: a soft-edged wipe, left to right, driven by --w. */
.l-ink {
  --w: 1;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--w) * 125% - 25%), transparent calc(var(--w) * 125%));
          mask-image: linear-gradient(90deg, #000 calc(var(--w) * 125% - 25%), transparent calc(var(--w) * 125%));
}

/* The couple's seal, pressed into the foot of the letter over the ruling,
   under their names. */
.l-seal {
  position: absolute;
  left: 50%;
  bottom: 11.8cqi;
  width: 17cqi;
  translate: -50% 0;
  aspect-ratio: 1;
  rotate: -9deg;
  filter: drop-shadow(0 .6cqi .8cqi rgba(40, 0, 8, .35));
}

.l-seal img { width: 100%; }

.l-monogram {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: .04em;
  font: 600 5.6cqi/1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .02em;
  color: #7c1f2b;
  /* pressed into the wax: shade on the upper edge of each stroke, light on the lower */
  text-shadow: 0 -.12cqi .06cqi rgba(20, 0, 4, .75), 0 .14cqi .08cqi rgba(255, 170, 170, .32);
}

.l-monogram i {
  font: italic 500 .7em/1 "Cormorant Garamond", Georgia, serif;
  margin: 0 .04em;
}

/* ------------------------------------------------------------ the hint */

.l-hint {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + var(--hint-gap, 11cqh));
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2cqh;
  font: 600 max(11px, 2.4cqw)/1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .3em;
  padding-left: .3em;
  text-transform: uppercase;
  color: rgba(244, 234, 217, .85);
  opacity: 0;
  pointer-events: none;
}

.letter.is-scrubbed .l-hint { opacity: var(--hint, 1); }

.l-hint i {
  position: relative;
  width: 1px;
  height: 5cqh;
  overflow: hidden;
  background: rgba(244, 234, 217, .2);
}

.l-hint i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, rgba(244, 234, 217, .9));
  animation: scroll-drip 2.2s cubic-bezier(.6, 0, .4, 1) infinite;
}

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

   iPads upright and the laptop column: a wider sheet with more words to a
   line, so it is shorter for its width. */

@container lstage (min-aspect-ratio: 5 / 8) {
  .l-bg { background-image: url(../assets/letter/bg-tab.webp); }
  .l-scroll { --sheet-w: min(64cqw, 54cqh); }
  .l-roll { left: -23.15%; width: 146.3%; aspect-ratio: 1600 / 248; background-image: url(../assets/letter/roll.webp); }
  .l-sheet-in { padding: 14cqi 11cqi 26.5cqi; }
  .l-head { width: 40cqi; }
  .l-verse { margin-top: 1cqi !important; font-size: 4.3cqi; }
  .l-verse-en { font-size: 3.2cqi; margin-top: 1cqi !important; }
  .l-verse-ref { font-size: 2.05cqi; margin-top: 1.2cqi !important; }
  .l-rule { width: 28cqi; margin-top: 2.4cqi; }
  .l-greeting { font-size: 6.6cqi; margin-top: 2.4cqi !important; }
  .l-body p { font-size: 3.55cqi; margin-top: 1.2cqi; }
  .l-closing { font-size: 3.4cqi; margin-top: 2.4cqi !important; }
  .l-signature { font-size: 7.4cqi; }
  .l-seal { width: 13cqi; bottom: 12cqi; }
  .l-monogram { font-size: 4.3cqi; }
  .l-hint { font-size: max(11px, 1.7cqw); --hint-gap: 9cqh; }
}

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

   iPads sideways: the stage is short, so the sheet is wider still and the
   verse runs to fewer lines. */

@container lstage (min-aspect-ratio: 6 / 5) {
  .l-bg { background-image: url(../assets/letter/bg-land.webp); }
  .l-scroll { --sheet-w: min(56cqw, 66cqh); }
  .l-roll { left: -23.15%; width: 146.3%; aspect-ratio: 1600 / 248; background-image: url(../assets/letter/roll.webp); }
  .l-sheet-in { padding: 13cqi 12cqi 22.5cqi; }
  .l-head { width: 24cqi; }
  .l-verse { margin-top: .8cqi !important; font-size: 3.2cqi; line-height: 1.95; }
  .l-verse-en { font-size: 2.45cqi; margin-top: .6cqi !important; }
  .l-verse-ref { font-size: 1.6cqi; margin-top: .9cqi !important; }
  .l-rule { width: 21cqi; margin-top: 1.6cqi; }
  .l-greeting { font-size: 5cqi; margin-top: 1.6cqi !important; }
  .l-body p { font-size: 2.85cqi; margin-top: .8cqi; }
  .l-closing { font-size: 2.6cqi; margin-top: 1.6cqi !important; }
  .l-signature { font-size: 5.6cqi; }
  .l-seal { width: 9.5cqi; bottom: 12cqi; }
  .l-monogram { font-size: 3.15cqi; }
  .l-hint { font-size: max(11px, 1.15cqw); --hint-gap: 10cqh; }
}

@media (prefers-reduced-motion: reduce) {
  .l-hint i::after { animation: none; }
}