/* The guest's letter, on handmade paper.

   Shut, the section is the envelope lying on a stack of handmade papers (sage, then blush, then
   a big ivory sheet with watercolour roses along its top and in its bottom corners), in the
   dappled shade of rose leaves, with a line asking the guest to touch its seal. Open
   (.is-open, set by js/letter.js), it is the letter lying on the ivory sheet, with the empty
   envelope below it (or beside it, on a tablet held sideways); the papers grow with it. The
   letter's place is taken the moment the seal is touched, so js/letter.js can bring the folded
   letter to exactly where it will lie, and the page does not jump when it unfolds.

   The envelope's pieces all share one frame (assets/letter/letter.css says where the envelope,
   its flap's hinge and tip, and the open flap's top are in it). They layer in the section's own
   stacking context, so the folded letter can come out between the envelope's back and its
   pocket: nothing between them and the section may make one (no z-index, transform, filter or
   opacity on .lt-stage, .lt-keep or .lt-env while it happens). In that context:
     -1  the papers
      1  the envelope's back, 2 its open flap, 3 the folded letter, 4 its pocket,
      5  the shut flap's shadow, 6 the shut flap, 7 the seal
      8  the leaves' shade, 9 the petals */

.letter {
  /* the sage paper showing round the blush sheet, and the blush round the ivory one (these
     are for the section's padding, where a percentage is of the card's width; its children use
     the same in cqi, the section's width) */
  --in: calc(clamp(8px, 2.3%, 26px) + clamp(9px, 2.2%, 24px));
  --garland-h: calc(min((100% - 2 * var(--in)) * .88, 600px) / var(--garland-r, 4.4));
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;         /* shut: the heading and the envelope, together in the middle */
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--in) + 1.2% + var(--garland-h) + 2px) calc(var(--in) + 6px) calc(var(--in) + max(40px, 7%));
  background: var(--sage-paper, #94967d) url(../assets/letter/sage.webp) 0 0 / 540px repeat;
  color: var(--ink);
  container-type: inline-size;
  overflow-anchor: none;
  -webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------------------ the papers */

.lt-papers {
  --m1: clamp(8px, 2.3cqi, 26px);
  --m2: calc(var(--m1) + clamp(9px, 2.2cqi, 24px));
  --edge: clamp(13px, 3.4cqi, 30px);          /* how wide their deckled edges are drawn */
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.lt-papers > i {
  position: absolute;
  display: block;
}

.lp-blush {
  inset: var(--m1);
  border: var(--edge) solid transparent;
  border-image: url(../assets/letter/sheet-blush.webp) var(--blush-slice) / var(--edge) round;
  background: var(--blush-paper) padding-box;
  filter: drop-shadow(0 1px 2px rgba(60, 50, 40, .22)) drop-shadow(0 3px 8px rgba(60, 50, 40, .12));
}

.lp-ivory {
  inset: var(--m2);
  border: var(--edge) solid transparent;
  border-image: url(../assets/letter/sheet-ivory.webp) var(--ivory-slice) fill / var(--edge) round;
  filter: drop-shadow(0 1px 2px rgba(90, 60, 55, .2)) drop-shadow(0 3px 7px rgba(90, 60, 55, .1));
}

/* the watercolour garland along the ivory sheet's top */
.lp-garland {
  left: 50%;
  top: calc(var(--m2) + 1.2cqi);
  width: min((100cqi - 2 * var(--m2)) * .88, 600px);
  aspect-ratio: var(--garland-r);
  translate: -50% 0;
  background: url(../assets/letter/garland.webp) center / 100% 100% no-repeat;
}

/* and a spray in each bottom corner (the right one the left one's mirror image) */
.lp-corner {
  left: calc(var(--m2) + .6cqi);
  bottom: calc(var(--m2) + .6cqi);
  width: min(32cqi, 240px);
  aspect-ratio: var(--corner-r);
  background: url(../assets/letter/corner.webp) center / 100% 100% no-repeat;
}

.lp-corner-r {
  left: auto;
  right: calc(var(--m2) + .6cqi);
  scale: -1 1;
}

/* ------------------------------------------------------------ the shade, the petals */

/* The dappled shade of rose leaves, over the top of the section, swaying slowly. */
.lt-shade {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100vh;
  height: 100svh;
  z-index: 8;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 35%, transparent 95%);
          mask-image: linear-gradient(#000 35%, transparent 95%);
}

.lt-shade::before {
  content: "";
  position: absolute;
  left: -8%;
  top: -6%;
  width: max(125cqi, 70svh);
  aspect-ratio: 1;
  background: url(../assets/letter/shade.webp) 0 0 / 100% 100% no-repeat;
  opacity: .24;
  transform-origin: 0 0;
  animation: lt-sway 7.5s ease-in-out infinite alternate;
}

@keyframes lt-sway {
  0%   { transform: rotate(-1.1deg) translate(-.8%, .2%) skewX(.8deg); }
  45%  { transform: rotate(.5deg) translate(.6%, -.3%) skewX(-.4deg); }
  100% { transform: rotate(1.2deg) translate(1.1%, .5%) skewX(-1deg); }
}

.lt-petals {
  position: absolute;
  inset: 0;
  z-index: 9;
  overflow: hidden;
  pointer-events: none;
}

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

.lt-petal b { display: block; transform-style: preserve-3d; }
.lt-petal img { width: 100%; height: auto; }

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

.lt-head {
  text-align: center;
  margin: 0 0 10px;
}

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

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

.lt-for {
  font: 700 clamp(48px, 14cqi, 80px)/1.1 "Corinthia", cursive;
  padding: 0 .3em .06em;
  color: var(--rose);
  text-shadow: 0 0 14px rgba(255, 250, 242, .7), 0 1px 1px rgba(255, 250, 242, .6);
  overflow-wrap: anywhere;
}

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

.lt-stage {
  position: relative;              /* no z-index: see above */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

/* Open: the heading at the top, then the letter. */
.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 */

/* Deckled cotton paper (a border-image, so any height), and its pressed roses: a spray in the
   top left corner and a bud in the bottom right, drawn at their own shape. */
.lt-letter {
  --pb: clamp(12px, 3.4cqi, 20px);
  position: relative;
  width: min(100%, 560px);
  margin: 0;
  padding: calc(var(--pb) * .4 + min(100cqi, 560px) * .2) clamp(14px, 5cqi, 36px) clamp(28px, 8cqi, 48px);
  border: var(--pb) solid transparent;
  border-image: url(../assets/letter/paper.webp) var(--paper-slice) fill / var(--pb) round;
  filter: drop-shadow(0 10px 14px rgba(90, 64, 52, .2)) drop-shadow(0 1px 2px rgba(90, 64, 52, .2));
  text-align: center;
  container-type: inline-size;
  font: 500 clamp(15.5px, 5.2cqi, 20px)/1.55 "Cormorant Garamond", Georgia, serif;
  color: var(--ink);
}

.lt-letter::before,
.lt-letter::after {
  content: "";
  position: absolute;
  background: center / 100% 100% no-repeat;
  pointer-events: none;
}

.lt-letter::before {
  left: calc(var(--pb) * -.2);
  top: calc(var(--pb) * -.2);
  width: 36%;
  aspect-ratio: var(--spray-r);
  background-image: url(../assets/letter/paper-spray.webp);
}

.lt-letter::after {
  right: calc(var(--pb) * -.1);
  bottom: calc(var(--pb) * -.1);
  width: 11%;
  aspect-ratio: var(--bud-r);
  background-image: url(../assets/letter/paper-bud.webp);
}

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

/* it takes the focus once open (for a screen reader); a soft ring only for the keyboard */
.lt-letter:focus { outline: none; }
.lt-letter:focus-visible { outline: 2px solid rgba(168, 100, 106, .7); outline-offset: 5px; }

.lt-letter > * { margin: 0 0 .85em; }

.lt-verse {
  font: 400 clamp(19px, 6.4cqi, 28px)/2.05 "Amiri Quran", "Amiri", serif;
  color: var(--rose);
  margin-bottom: .35em;
}

.lt-verse-en {
  font-style: italic;
  font-size: .9em;
  line-height: 1.45;
  color: rgba(91, 60, 64, .85);
  margin-bottom: .3em;
}

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

/* a fine rose rule with a small sage lozenge */
.lt-rule {
  position: relative;
  height: 14px;
  margin: 1.1em auto 1.2em;
  width: 62%;
  background: linear-gradient(90deg, transparent, var(--blush-deep) 18%, var(--blush-deep) 82%, transparent) center / 100% 1px no-repeat;
}

.lt-rule i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  translate: -50% -50%;
  rotate: 45deg;
  background: var(--sage);
  box-shadow: 0 0 0 2px #fbf7ef, 0 0 0 3px var(--blush-deep);
}

.lt-greeting {
  font: 700 clamp(32px, 10.5cqi, 46px)/1.2 "Corinthia", cursive;
  color: var(--rose);
  margin-bottom: .3em !important;
}

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

.lt-sign {
  font: 700 clamp(36px, 11.5cqi, 52px)/1.15 "Corinthia", cursive;
  color: var(--rose);
  margin-bottom: .1em !important;
}

/* The monogram: the couple's initials in a fine rose circle. */
.lt-mono {
  display: grid;
  place-items: center;
  width: clamp(54px, 16cqi, 72px);
  aspect-ratio: 1;
  margin: .3em auto 0 !important;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--blush-deep), inset 0 0 0 4px #fbf7ef, inset 0 0 0 5px rgba(201, 138, 134, .55);
  font: 700 clamp(22px, 6.4cqi, 30px)/1 "Corinthia", cursive;
  color: var(--rose);
}

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

/* ------------------------------------------------------------ the envelope */

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

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

.lt-env {
  position: relative;               /* no z-index: its pieces layer with the letter */
  display: block;
  width: min(96cqi, 500px);
  aspect-ratio: var(--env-r);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Shut, the room kept above the envelope for its flap to open into is not needed, so it sits
   up into it, closer to the heading. */
.letter:not(.is-open) .lt-env {
  margin-top: calc(min(96cqi, 500px) / var(--env-r) * var(--env-t-n) * -.86);
}

.letter.is-open .lt-env {
  width: min(62cqi, 320px);
  cursor: default;
}

.lt-env:focus-visible { outline: 2px solid rgba(168, 100, 106, .8); outline-offset: 6px; border-radius: 10px; }

:where(.lt-env) > span {
  position: absolute;
  inset: 0;
  background: center / 100% 100% no-repeat;
  pointer-events: none;
}

.e-back {
  z-index: 1;
  background-image: url(../assets/letter/env-back.webp);
  filter: drop-shadow(0 9px 12px rgba(90, 64, 52, .22)) drop-shadow(0 1px 2px rgba(90, 64, 52, .2));
}

/* the open flap, and the shut one: each turns about the envelope's top edge */
.e-flap-open {
  z-index: 2;
  background-image: url(../assets/letter/env-flap-open.webp);
  transform-origin: 50% var(--env-t);
  opacity: 0;
}

.e-pocket {
  z-index: 4;
  background-image: url(../assets/letter/env-pocket.webp);
}

/* the shut flap's own soft shadow on the pocket, as it was photographed */
.e-flap-shadow {
  z-index: 5;
  background-image: url(../assets/letter/env-flap-shadow.webp);
}

.e-flap {
  z-index: 6;
  background-image: url(../assets/letter/env-flap.webp);
  transform-origin: 50% var(--env-t);
}

.letter.is-open .e-flap,
.letter.is-open .e-flap-shadow { opacity: 0; }
.letter.is-open .e-flap-open { opacity: 1; }
.letter.is-open .e-seal { opacity: 0; }

/* the seal (its wax, and the rosebud and sprig tucked under it), the wax a little above the
   flap's tip: the wax is 15% of the envelope's width */
.lt-env > .e-seal {
  z-index: 7;
  inset: auto;
  left: var(--env-tip-x);
  top: var(--env-tip-y);
  width: calc((var(--env-r-edge) - var(--env-l)) * .15 / var(--seal-d));
  aspect-ratio: var(--seal-r);
  margin-top: -3.2%;
  translate: calc(-1 * var(--seal-cx)) calc(-1 * var(--seal-cy));
  background-image: url(../assets/letter/seal.webp);
  filter: drop-shadow(0 3px 3px rgba(90, 45, 45, .3)) drop-shadow(0 1px 1px rgba(90, 45, 45, .25));
}

/* a soft ring from the wax */
.gl-seal-ring {
  position: absolute;
  left: var(--seal-cx);
  top: var(--seal-cy);
  width: calc(var(--seal-d) * 118%);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1.5px solid rgba(168, 100, 106, .75);
  opacity: 0;
  animation: lt-ring 2.8s cubic-bezier(.2, .6, .3, 1) 1.2s infinite;
}

@keyframes lt-ring {
  0%   { opacity: .9; transform: scale(.8); }
  100% { opacity: 0; transform: scale(1.35); }
}

.letter.is-open .gl-seal-ring { display: none; }

.lt-hint {
  margin: 12px 0 0;
  font: italic 500 clamp(15px, 4.4cqi, 19px)/1.3 "Cormorant Garamond", Georgia, serif;
  color: var(--rose);
  text-shadow: 0 0 10px rgba(255, 250, 242, .8);
  animation: lt-hint 2.8s ease-in-out infinite;
}

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

@keyframes lt-hint {
  0%, 100% { opacity: .6; }
  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. */
.lt-packet {
  position: absolute;
  z-index: 3;
  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-back {
  transform: rotateX(180deg);
  background:
    linear-gradient(180deg, rgba(120, 100, 80, .1), transparent 18%, transparent 82%, rgba(120, 100, 80, .1)),
    #f4efe6;
  box-shadow: inset 0 0 0 1px rgba(150, 130, 110, .28);
}

.pk-mid .pk-face { filter: drop-shadow(0 10px 14px rgba(90, 64, 52, .26)); }

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

/* The heading and the envelope 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 envelope 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.is-open .lt-stage {
    display: grid;
    grid-template-columns: min(30cqi, 360px) minmax(0, 560px);
    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 - 10cqi);
    margin-top: 12vh;
  }
  html.is-tablet .letter.is-open .lt-env { width: 100%; }
  html.is-tablet .letter:not(.is-open) .lt-env { width: min(56cqi, 560px, calc(66svh * var(--env-r))); margin-top: calc(min(56cqi, 560px, calc(66svh * var(--env-r))) / var(--env-r) * var(--env-t-n) * -.86); }
}

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

@media (prefers-reduced-motion: reduce) {
  .gl-seal-ring,
  .lt-hint,
  .lt-shade::before { animation: none; }
  .lt-head,
  .lt-keep { transition: none; }
  .lt-hint { opacity: .95; }
}