/* ═══════════════════════════════════════════════════════════════════
   VARIANT · الرسالة / POSTAL — the artistic one, and the default.
   A vintage postal collage built from the couple's own scraps: their
   envelopes, the pressed rose, the blossom branch, the gold dove and
   the Kh wax seal. Photos sit in white polaroid mats held by washi
   tape, postmarks stamp the corners, petals drift down the hero.
   Opening: their dove envelope, photographed closed, then open.
   ═══════════════════════════════════════════════════════════════════ */

:root[data-variant="postal"] {
  --ground:   #F8F3E8;  --ground-2: #EFE6D2;
  --ink:      #3E362B;  --ink-soft: #8B7E69;
  --accent:   #A8443A;  --accent-2: #7C9284;
  --gold:     #BE9A4E;
  --line:     #E0D5BC;
  --shadow:   rgba(80,60,30,.24);
  --paper-a:  #FCF8EF;  --paper-b:  #EDE2CB;
  --btn-hover-ink: #FCF8EF;

  --display: var(--f-ar-disp);
  --body:    var(--f-ar-body);

  --sprig-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 44' fill='none' stroke='%23BE9A4E' stroke-width='1.1'%3E%3Cpath d='M14 22 H186'/%3E%3Cellipse cx='52' cy='13' rx='14' ry='6' transform='rotate(-22 52 13)'/%3E%3Cellipse cx='76' cy='31' rx='14' ry='6' transform='rotate(22 76 31)'/%3E%3Cellipse cx='124' cy='13' rx='14' ry='6' transform='rotate(-22 124 13)'/%3E%3Cellipse cx='148' cy='31' rx='14' ry='6' transform='rotate(22 148 31)'/%3E%3Ccircle cx='100' cy='22' r='4'/%3E%3C/svg%3E");
}
:root[data-variant="postal"][data-lang="en"] {
  --display: var(--f-la-disp);
  --body:    var(--f-la-body);
}

[data-variant="postal"] section { position: relative; }

/* ── the collage scraps — the couple's own images ───────────────── */

[data-variant="postal"] .deco {
  display: block; position: absolute; pointer-events: none; z-index: 0;
}
[data-variant="postal"] .deco img { width: 100%; height: auto; }

[data-variant="postal"] .deco-dove {
  width: clamp(110px, 18vw, 200px);
  inset-inline-start: 4%; bottom: 5%; rotate: -10deg;
}
[data-variant="postal"] .deco-blossom {
  width: clamp(64px, 9vw, 110px);
  inset-inline-end: 6%; top: 7%; rotate: 8deg; opacity: .95;
}
[data-variant="postal"] .deco-flower {
  width: clamp(110px, 15vw, 190px);
  inset-inline-end: 2%; bottom: 3%; rotate: 7deg;
}
[data-variant="postal"] .deco-bloomenv {
  width: clamp(120px, 16vw, 210px);
  inset-inline-end: 3%; top: 8%; rotate: 8deg;
}
[data-variant="postal"] .deco-rose {
  width: clamp(110px, 15vw, 200px);
  inset-inline-start: 2%; bottom: 3%; rotate: -7deg;
}
[data-variant="postal"] .deco-dovegold {
  position: static; width: min(46vw, 170px); margin-inline: auto; opacity: .9;
}

@media (max-width: 52rem) {
  [data-variant="postal"] .deco-bloomenv,
  [data-variant="postal"] .deco-rose {
    position: static; rotate: 0deg; margin: 0 auto 1.2rem; width: 130px;
  }
  [data-variant="postal"] .deco-dove { width: 92px; opacity: .85; }
  [data-variant="postal"] .deco-flower { width: 96px; opacity: .9; }
}

/* ── hero: a centred collage ────────────────────────────────────── */

[data-variant="postal"] .hero {
  position: relative; min-height: 100svh; overflow: hidden;
  display: grid; align-content: center; justify-items: center;
  gap: 1rem; padding: calc(var(--gap) * .9) var(--pad); text-align: center;
}

/* polaroid mat, washi tape, postmark */
[data-variant="postal"] .frame {
  position: relative;
  width: min(62vw, 15rem);
  background: #FFFDF7;
  padding: 12px 12px 2.6rem;
  rotate: -2.5deg;
  box-shadow: 0 22px 50px -22px var(--shadow), 0 2px 8px -3px var(--shadow);
}
[data-variant="postal"] .frame img {
  width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover;
}
[data-variant="postal"] .frame::before {           /* washi tape */
  content: ""; position: absolute; z-index: 3;
  top: -3px; left: 50%; translate: -50% -40%;
  width: 5.6rem; height: 1.5rem; rotate: -5deg;
  background:
    repeating-linear-gradient(100deg, transparent 0 6px, rgba(255,255,255,.22) 6px 12px),
    color-mix(in srgb, var(--accent-2) 62%, transparent);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
[data-variant="postal"] .frame::after {            /* postmark */
  content: ""; position: absolute; z-index: 3;
  top: 10px; inset-inline-end: 8px;
  width: 74px; aspect-ratio: 1; border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--ink) 52%, transparent);
  background: radial-gradient(circle,
    transparent 21px,
    color-mix(in srgb, var(--ink) 45%, transparent) 22px 23px,
    transparent 24px);
  rotate: 14deg; mix-blend-mode: multiply; opacity: .55;
}

/* the wipe animation clips the tape and postmark, so postal frames
   reveal with a rise-and-fade instead */
[data-variant="postal"] .wipe {
  clip-path: none; opacity: 0; translate: 0 26px;
  transition: opacity 1s cubic-bezier(.2,.8,.3,1), translate 1s cubic-bezier(.2,.8,.3,1);
}
[data-variant="postal"] .wipe.in { clip-path: none; opacity: 1; translate: 0 0; }
[data-variant="postal"] .wipe img { transform: none; }

[data-variant="postal"] .bism {
  font-family: var(--f-quran); font-size: var(--step-1);
  color: var(--gold); margin: 0; line-height: 2;
}
[data-variant="postal"] .kicker { font-size: var(--step--1); color: var(--accent); margin: 0; }
[data-variant="postal"] .names {
  font-family: var(--display); font-size: var(--step-4);
  line-height: 1.06; display: grid; gap: .03em;
}
[data-variant="postal"] .names .amp { font-size: .34em; color: var(--gold); line-height: 1; }
[data-variant="postal"] .hero-date,
[data-variant="postal"] .hero-where { color: var(--ink-soft); margin: 0; }
[data-variant="postal"] .count b { color: var(--accent); }

/* ── ornament: gold sprig; scalloped paper-lace divider ─────────── */

[data-variant="postal"] .orn {
  display: block; width: min(56vw, 12rem); height: 2rem;
  margin-block: 1.3rem; margin-inline: auto;
  background: var(--sprig-gold) center / contain no-repeat;
}
[data-variant="postal"] .orn i { display: none; }

[data-variant="postal"] .rule {
  display: block; height: 18px; opacity: .9;
  background: radial-gradient(circle 9px at 10px -2px, var(--ground-2) 8px, transparent 9px) repeat-x;
  background-size: 20px 18px;
}

/* ── the verse, on a tinted band with lace edges ────────────────── */

[data-variant="postal"] .ayah-sec { background: var(--ground-2); }
[data-variant="postal"] .ayah {
  font-family: var(--f-quran); font-size: var(--step-2);
  line-height: 2.2; text-align: center; text-wrap: balance;
  max-width: 32rem; margin-inline: auto;
}
[data-variant="postal"] .ayah-src { text-align: center; color: var(--gold); font-size: var(--step--1); margin: 1rem 0 0; }

/* ── story: tilted polaroid + a pinned note card ────────────────── */

[data-variant="postal"] .story { display: grid; gap: 2.2rem; justify-items: center; }
[data-variant="postal"] .story .frame { rotate: 2deg; width: min(70vw, 17rem); }
[data-variant="postal"] .story .txt {
  position: relative; z-index: 1;
  background: var(--paper-a); border: 1px solid var(--line);
  padding: clamp(1.6rem, 4vw, 2.4rem); rotate: -.6deg;
  box-shadow: 0 18px 40px -22px var(--shadow);
  max-width: 34rem;
}
[data-variant="postal"] .story .txt::before {       /* tape on the note too */
  content: ""; position: absolute; top: -11px; left: 50%; translate: -50% 0;
  width: 5rem; height: 1.4rem; rotate: 4deg;
  background:
    repeating-linear-gradient(100deg, transparent 0 6px, rgba(255,255,255,.22) 6px 12px),
    color-mix(in srgb, var(--gold) 55%, transparent);
}
@media (min-width: 48rem) {
  [data-variant="postal"] .story {
    grid-template-columns: .8fr 1.2fr; align-items: center;
    width: min(100%, 58rem); margin-inline: auto;
  }
  [data-variant="postal"] .story .frame { width: min(34vw, 16rem); }
}

/* ── details: three postcards, sealed with the real wax ─────────── */

[data-variant="postal"] #details .eyebrow::before {
  content: ""; display: block; width: 56px; aspect-ratio: 1;
  margin: 0 auto .7rem;
  background: url(../assets/seal.png) center / contain no-repeat;
  filter: drop-shadow(0 3px 5px rgba(60,20,14,.3));
}
[data-variant="postal"] .card {
  background: var(--paper-a); border: 1px solid var(--line);
  box-shadow: 0 14px 30px -20px var(--shadow);
}
[data-variant="postal"] .card:nth-child(1) { rotate: -.8deg; }
[data-variant="postal"] .card:nth-child(2) { rotate: .5deg; }
[data-variant="postal"] .card:nth-child(3) { rotate: -.4deg; }
[data-variant="postal"] .card .k { color: var(--gold); }

/* ── venue: a normal, contained polaroid — not a background ─────── */

[data-variant="postal"] .venue-stage { padding-block: var(--gap); }
[data-variant="postal"] .venue-pin {
  position: relative;
  display: grid; justify-items: center; gap: 1.6rem;
  width: min(100% - (var(--pad) * 2), 46rem); margin-inline: auto;
  text-align: center;
}
[data-variant="postal"] .venue-pin img {
  width: min(100%, 34rem); aspect-ratio: 3/2; object-fit: cover;
  border: 12px solid #FFFDF7; border-block-end-width: 2.8rem;
  rotate: -1.5deg;
  box-shadow: 0 24px 55px -24px var(--shadow);
}
[data-variant="postal"] .venue-pin::after {         /* postmark by the corner */
  content: ""; position: absolute; top: -1rem; inset-inline-end: 8%;
  width: 84px; aspect-ratio: 1; border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--ink) 50%, transparent);
  background: radial-gradient(circle,
    transparent 24px,
    color-mix(in srgb, var(--ink) 42%, transparent) 25px 26px,
    transparent 27px);
  rotate: -12deg; mix-blend-mode: multiply; opacity: .5;
}
[data-variant="postal"] .venue-veil { display: none; }
[data-variant="postal"] .venue-copy { display: grid; justify-items: center; gap: .2rem; }

/* ── forms become postcards; wishes get taped up ────────────────── */

[data-variant="postal"] .form {
  background: var(--paper-a); border: 1px solid var(--line);
  padding: clamp(1.4rem, 4vw, 2rem);
  box-shadow: 0 18px 40px -24px var(--shadow);
}
[data-variant="postal"] input,
[data-variant="postal"] textarea,
[data-variant="postal"] select { background: var(--ground); }
[data-variant="postal"] .choice label { background: var(--ground); }

[data-variant="postal"] .wish {
  position: relative; background: var(--paper-a);
  box-shadow: 0 14px 30px -20px var(--shadow);
  margin-top: .5rem;
}
[data-variant="postal"] .wish::before {
  content: ""; position: absolute; top: -10px; left: 50%; translate: -50% 0;
  width: 4.4rem; height: 1.3rem; rotate: -3deg;
  background:
    repeating-linear-gradient(100deg, transparent 0 6px, rgba(255,255,255,.22) 6px 12px),
    color-mix(in srgb, var(--accent-2) 55%, transparent);
}
[data-variant="postal"] .wish:nth-child(odd)  { rotate: .6deg; }
[data-variant="postal"] .wish:nth-child(even) { rotate: -.5deg; }
[data-variant="postal"] .wish:nth-child(even)::before {
  rotate: 4deg;
  background:
    repeating-linear-gradient(100deg, transparent 0 6px, rgba(255,255,255,.22) 6px 12px),
    color-mix(in srgb, var(--gold) 52%, transparent);
}
[data-variant="postal"] .wish cite { color: var(--gold); }

[data-variant="postal"] .hashtag { color: var(--gold); }

/* ═══ OPENING · their dove envelope: closed, then open ══════════ */

[data-variant="postal"] #gate-dove { display: grid; }

.dove-gate {
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: 1.6rem;
  border: 0; background: none; padding: 0; cursor: pointer;
}
.dove-stack { position: relative; width: min(84vw, 26rem); aspect-ratio: 1/1; }
.dove-stack img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
  transition: opacity .75s ease, transform 1.2s cubic-bezier(.3,.9,.3,1);
}
.dove-closed { opacity: 1; transform: scale(1); }
.dove-open   { opacity: 0; transform: scale(.97); }
.dove-gate:hover .dove-closed { transform: scale(1.02); }

.dove-gate.opening .dove-closed { opacity: 0; transform: scale(1.05); }
.dove-gate.opening .dove-open   { opacity: 1; transform: scale(1.06); }

/* the couple's card rises out of the open envelope */
.dove-card {
  position: absolute; left: 50%; top: 46%; translate: -50% -50%;
  width: 44%; aspect-ratio: 4/5; overflow: hidden;
  border: 3px solid #fff; box-shadow: 0 14px 34px -14px rgba(80,60,55,.5);
  opacity: 0; transform: translateY(10%) rotate(-2deg) scale(.9);
  transition: opacity .5s ease .55s, transform 1.1s cubic-bezier(.25,.9,.3,1) .55s;
  z-index: 3;
}
.dove-card img { position: static; width: 100%; height: 100%; object-fit: cover; transition: none; }
.dove-gate.opening .dove-card {
  opacity: 1; transform: translateY(-52%) rotate(-2deg) scale(1);
}

.dove-gate.gone { opacity: 0; transform: scale(1.08); transition: opacity .8s ease, transform 1s ease; }