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

   Shut, the section is the heading, the Chiniot box and a line asking the guest to touch it.
   Open (.is-open, set by js/letter.js), it is the letter, with the open box of jasmine below it
   (or beside it, on a tablet held sideways). The letter's place is taken the moment the box is
   touched, 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 box's pieces are all one canvas (assets/letter/letter.css
   says where its lid meets it and where its hollow is): the open box, the shut lid over it, and
   in between, the folded letter, lying in the hollow with the front row of jasmine and the
   box's front over it. The paper's painted border comes from assets/letter/letter.css too. */

.letter {
  --lw: min(100cqi - 28px, 580px);      /* the letter's width */
  --sun-y: max(0px, calc(50svh - 340px));   /* the patch of sun, behind the heading and the box */
  --sun-x: -16%;
  display: flex;
  flex-direction: column;
  justify-content: center;              /* shut: the heading and the box, together in the middle */
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--seam-h) * .5 + 34px) 14px calc(var(--seam-h) * .5 + 44px);
  overflow-x: clip;                     /* the lid slides away past the edge (the seams still straddle the joins) */
  overflow-anchor: none;
  -webkit-tap-highlight-color: transparent;
}

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

.lt-head {
  position: relative;
  text-align: center;
  margin: 0 0 6px;
}

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

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

/* The guest's name, in cobalt glaze. */
.lt-for {
  font: 400 clamp(46px, 13.5cqi, 80px)/1.2 "Great Vibes", cursive;
  overflow-wrap: anywhere;
}

.lt-for .glaze {
  display: inline-block;
  padding: 0 .28em .08em;
}

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

.lt-stage {
  position: relative;                   /* no z-index: the box's pieces and the folded letter layer in the section */
  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 */

/* Its painted border is a border-image (assets/letter/letter.css), as wide as the paper's own
   border; the words sit inside it. */
.lt-letter {
  position: relative;
  width: var(--lw);
  margin: 0;
  border-style: solid;
  border-color: transparent;
  border-width: var(--pb);
  padding: clamp(10px, 3.4cqi, 26px) clamp(8px, 2.6cqi, 22px) clamp(14px, 4cqi, 30px);
  filter: drop-shadow(0 1px 1px rgba(60, 40, 12, .16)) drop-shadow(0 12px 16px rgba(40, 28, 10, .22));
  text-align: center;
  container-type: inline-size;
  font: 500 clamp(15px, 4.5cqi, 19px)/1.55 "Cormorant Garamond", Georgia, serif;
  color: var(--ink);
}

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

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

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

.lt-verse-en {
  font-style: italic;
  font-size: .9em;
  line-height: 1.45;
  color: rgba(27, 42, 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 brass rule with a small cobalt tile set in it */
.lt-rule {
  position: relative;
  height: 14px;
  margin: 1em auto 1.1em !important;
  width: 62%;
  background: linear-gradient(90deg, transparent, var(--brass) 18%, var(--brass) 82%, transparent) center / 100% 1px no-repeat;
}

.lt-rule i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  translate: -50% -50%;
  rotate: 45deg;
  background: radial-gradient(circle, var(--saffron) 0 1.6px, transparent 2px), linear-gradient(135deg, #2b4fa3, var(--cobalt) 60%, var(--cobalt-deep));
  box-shadow: 0 0 0 2px #f3ead8, 0 0 0 3px var(--brass);
}

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

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

.lt-invite {
  font-style: italic;
  font-weight: 600;
  font-size: 1.06em;
  line-height: 1.45;
  color: var(--cobalt);
}

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

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

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

.lt-sign {
  font: 400 clamp(36px, 12cqi, 52px)/1.2 "Great Vibes", cursive;
  margin-bottom: .15em !important;
}

/* The seal: a glazed kashi roundel, the couple's initials painted in cobalt on its plain
   middle. */
.lt-seal,
.pk-seal,
.lt-flyseal {
  aspect-ratio: 1;
  background: url(../assets/letter/seal.webp) center / contain no-repeat;
  container-type: size;
  display: grid;
  place-items: center;
}

.lt-seal {
  width: clamp(70px, 24cqi, 110px);
  margin: .2em auto 0 !important;
  filter: drop-shadow(0 3px 4px rgba(40, 26, 8, .35));
}

.lt-mono {
  font: 400 19.5cqw/1 "Great Vibes", cursive;         /* inside the roundel's plain middle (half its width) */
  -webkit-text-stroke: .014em currentColor;           /* painted a little thicker than the script */
  color: var(--cobalt);
  text-shadow: 0 .02em 0 rgba(255, 252, 240, .9), 0 .03em .03em rgba(10, 24, 60, .45);
  translate: 0 .02em;
  white-space: nowrap;
}

.lt-mono i {
  font-size: .62em;
  font-style: normal;
  margin: 0 .02em;
  color: #b87f22;
}

/* ------------------------------------------------------------ the box */

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

.letter.is-open .lt-keep { margin-top: clamp(22px, 6cqi, 40px); }

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

.letter.is-open .lt-box {
  width: min(58cqi, 300px);
  cursor: default;
}

.lt-box:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 6px; }

/* a soft shadow on the plaster under it, to the right (the sun is on the left) */
.lt-box::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 1%;
  bottom: -3%;
  height: 12%;
  background: radial-gradient(closest-side, rgba(40, 24, 10, .5), transparent);
  filter: blur(4px);
  translate: 3% 0;
}

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

.b-open {
  z-index: 2;
  background-image: url(../assets/letter/box-open.webp);
}

/* the front row of jasmine and the box's front: over a letter lying in the hollow */
.b-front {
  z-index: 4;
  background-image: url(../assets/letter/box-open.webp);
  -webkit-mask: url(../assets/letter/box-front.webp) center / 100% 100% no-repeat;
          mask: url(../assets/letter/box-front.webp) center / 100% 100% no-repeat;
}

.b-lid {
  z-index: 5;
  background-image: url(../assets/letter/box-lid.webp);
}

.letter.is-open .b-lid { visibility: hidden; }

/* now and then the sun runs over the lid's glazed tile */
.b-glint {
  position: absolute;
  inset: 0;
  background: linear-gradient(104deg, transparent 38%, rgba(255, 250, 232, .7) 47%, rgba(255, 246, 220, .2) 53%, transparent 60%) 190% 0 / 300% 100% no-repeat;
  mix-blend-mode: screen;
  animation: lt-glint 7s ease-in-out 1.5s infinite;
}

@keyframes lt-glint {
  0% { background-position: 190% 0; }
  30%, 100% { background-position: -90% 0; }
}

.lt-hint {
  margin: 14px 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. */
.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 .lt-seal { visibility: hidden; }

.pk-back {
  transform: rotateX(180deg);
  background:
    linear-gradient(180deg, rgba(120, 90, 40, .12), transparent 18%, transparent 82%, rgba(120, 90, 40, .12)),
    url(../assets/letter/paper-back.webp) center / cover;
  box-shadow: inset 0 0 0 1px rgba(150, 118, 60, .3);
}

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

.pk-seal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34%;
  max-height: 86%;
  translate: -50% -50%;
  transform: translateZ(4px);
  filter: drop-shadow(0 3px 4px rgba(40, 26, 8, .4));
}

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

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

/* The heading and the box 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 box stands 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(28cqi, 330px) - clamp(24px, 4.5cqi, 60px), 580px); }
  html.is-tablet .letter.is-open .lt-stage {
    display: grid;
    grid-template-columns: min(28cqi, 330px) 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 - 10cqi);
    margin-top: 12vh;
  }
  html.is-tablet .letter.is-open .lt-box { width: 100%; }
}

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

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