/* ==========================================================================
   Ahmad & Sara — envelope invitation (brand: blush · rose · gold · navy ink)
   ========================================================================== */
:root {
  --ivory: #FCF8F4;
  --paper: #F8EFE9;
  --blush: #F4DED8;
  --blush-2: #EBC9C2;
  --rose: #C98F8A;
  --rose-deep: #A9696A;
  --wine: #8E4B4A;
  --gold: #C7A46C;
  --gold-deep: #9C7A43;
  --ink: #2F3552;
  --text: #524A56;
  --muted: #776B74;

  --script: "Aref Ruqaa", "Amiri", serif;
  --serif: "Amiri", "Noto Naskh Arabic", serif;
  --latin: "Cormorant Garamond", "Cormorant", Georgia, serif;   /* always paired with lining figures below */

  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --ease: cubic-bezier(.22, .8, .24, 1);
  --frame: 0 0 0 1px rgba(199, 164, 108, .35), 0 24px 50px -18px rgba(120, 76, 68, .35);
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .32  0 0 0 0 .28  0 0 0 .075 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ivory); color-scheme: light; }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--serif); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.75;
  color: var(--text); background: var(--ivory);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
p, h1, h2, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.date, .env__letter-date, .cd__u b { font-variant-numeric: lining-nums tabular-nums; }
.amp { font-family: var(--latin); font-style: italic; font-weight: 400; color: var(--rose); }
.sprig { width: clamp(8.5rem, 34vw, 11rem); height: auto; aspect-ratio: 180 / 24; color: var(--gold); margin-inline: auto; }
.icon { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- paper & petals (fixed backdrop) ---------- */
.paper {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    var(--noise),
    radial-gradient(120% 70% at 50% 0%, #FFFDFB 0%, transparent 60%),
    radial-gradient(90% 60% at 100% 100%, rgba(244, 222, 216, .75), transparent 70%),
    radial-gradient(80% 55% at 0% 70%, rgba(247, 228, 214, .6), transparent 70%),
    var(--ivory);
}
.petal { position: absolute; width: clamp(16rem, 70vmax, 46rem); height: auto; aspect-ratio: 300 / 130; opacity: .8; }
.petal--1 { top: -6%; inset-inline-start: -28%; transform: rotate(28deg); filter: blur(2px); }
.petal--2 { top: 18%; inset-inline-end: -38%; transform: rotate(-152deg); opacity: .55; filter: blur(6px); }
.petal--3 { bottom: -8%; inset-inline-start: -30%; transform: rotate(-24deg); opacity: .7; filter: blur(1px); }
.petal--4 { bottom: 14%; inset-inline-end: -42%; transform: rotate(160deg); opacity: .45; filter: blur(9px); }
.petal--5 { top: 44%; inset-inline-start: -46%; transform: rotate(8deg); opacity: .35; filter: blur(12px); }

/* ---------- wax seal (shared by envelope, card crown and closing) ---------- */
.seal__wax { width: 100%; height: 100%; overflow: visible; }
.seal__mono {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--script); line-height: 1; color: rgba(255, 241, 237, .94);
  text-shadow: 0 -1px 0 rgba(255, 255, 255, .35), 0 1.5px 1px rgba(120, 58, 56, .55);
  white-space: nowrap; padding-bottom: .2em;
}
.seal__mono i { font-family: var(--latin); font-style: italic; font-size: .7em; margin-inline: .08em; opacity: .9; padding-top: .25em; }

/* ==========================================================================
   ENVELOPE — full-screen; the flap tip and seal meet at --tip
   ========================================================================== */
.envelope { display: none; }
.js .envelope {
  --tip: 54%;
  display: block; position: fixed; inset: 0; z-index: 40;
  perspective: 1600px; cursor: pointer; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.js:not(.opened), .js:not(.opened) body { overflow: hidden; overscroll-behavior: none; }

/* inside of the envelope: a blush liner with a fine gold lattice */
.env__inside {
  position: absolute; inset: 0;
  background:
    var(--noise),
    repeating-linear-gradient(45deg, rgba(199, 164, 108, .16) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-45deg, rgba(199, 164, 108, .16) 0 1px, transparent 1px 26px),
    linear-gradient(180deg, #EAD3CB 0%, #F3E3DC 55%, #F6EAE4 100%);
}
.env__letter {
  position: absolute; inset-inline: 9%; top: 6%; height: 58%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .5rem;
  padding-top: clamp(1.75rem, 7vh, 4rem);
  background: var(--noise), linear-gradient(180deg, #FFFDFB, #FBF4EF);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(120, 76, 68, .14);
  transition: transform 1.1s var(--ease), opacity .8s ease;
}
.env__letter::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(199, 164, 108, .45); border-radius: 3px; pointer-events: none; }
.env__letter-names { font-family: var(--script); font-size: clamp(2.2rem, min(10vw, 7vh), 3.4rem); line-height: 1.6; color: var(--ink); white-space: nowrap; }
.env__letter-names .amp { font-size: .7em; margin-inline: .3em; }
.env__letter-date { font-family: var(--latin); font-weight: 600; letter-spacing: .2em; font-size: .95rem; color: var(--text); }

.env__fold { position: absolute; inset: 0; transition: transform 1s var(--ease), opacity .8s ease; }
.env__fold::before { content: ""; position: absolute; inset: 0; }
.env__fold--side { filter: drop-shadow(0 0 12px rgba(125, 80, 70, .18)); }
.env__fold--side::before {
  clip-path: polygon(0 0, 50% calc(var(--tip) - 1%), 100% 0, 100% 100%, 0 100%);
  background:
    var(--noise),
    linear-gradient(90deg, #EFDCD4 0%, #F8EDE7 42%, #F8EDE7 58%, #EFDCD4 100%);
}
.env__fold--bottom { filter: drop-shadow(0 -5px 12px rgba(125, 80, 70, .17)); }
.env__fold--bottom::before {
  clip-path: polygon(0 100%, 50% calc(var(--tip) - 4%), 100% 100%);
  background:
    var(--noise),
    radial-gradient(70% 50% at 50% 100%, rgba(244, 222, 216, .6), transparent 70%),
    linear-gradient(180deg, #FCF6F2 0%, #F8EDE7 100%);
}
.env__flap {
  position: absolute; inset: 0 0 auto 0; height: var(--tip); z-index: 3;
  transform-origin: 50% 0; transform-style: preserve-3d;
  filter: drop-shadow(0 8px 14px rgba(125, 80, 70, .2));
  transition: transform 1.05s cubic-bezier(.55, 0, .3, 1), opacity .4s ease;
}
/* a gilded edge peeks out from under the flap face */
.env__flap::before {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(100deg, #D9BC8A, #C7A46C 30%, #EAD7AE 50%, #C7A46C 70%, #D9BC8A);
}
.env__flap-face {
  position: absolute; inset: 0;
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 50% calc(100% - 3px));
  background:
    var(--noise),
    radial-gradient(60% 80% at 50% 0%, #FFFDFB, transparent 70%),
    linear-gradient(180deg, #FBF5F1 0%, #F5E7E1 100%);
  display: flex; justify-content: center; align-items: flex-start;
}
.env__flap-sprig { margin-top: max(clamp(3.5rem, 13vh, 7rem), calc(env(safe-area-inset-top) + 3rem)); opacity: .9; }

/* Wax seal */
.seal {
  position: absolute; z-index: 5; left: 50%; top: var(--tip);
  width: clamp(6.25rem, min(30vw, 21vh), 10.5rem); aspect-ratio: 1; padding: 0;
  border: 0; background: none; border-radius: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 6px 10px rgba(110, 55, 52, .3)) drop-shadow(0 1px 1px rgba(110, 55, 52, .3));
  transition: transform .5s var(--ease), opacity .45s ease;
  -webkit-tap-highlight-color: transparent;
}
.seal .seal__mono { font-size: clamp(1.7rem, min(7.6vw, 5.4vh), 2.6rem); }
.seal::after {   /* soft breathing glow that invites a tap */
  content: ""; position: absolute; inset: -14%; border-radius: 50%;
  border: 1px solid rgba(201, 143, 138, .45);
  animation: breathe 2.6s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { transform: scale(.92); opacity: 0; } 50% { transform: scale(1.04); opacity: 1; } }
@media (hover: hover) { .seal:hover { transform: translate(-50%, -50%) scale(1.04); } }

.env__caption {
  position: absolute; z-index: 4; inset-inline: 6%;
  bottom: max(7%, calc(env(safe-area-inset-bottom) + 1.5rem));
  text-align: center; display: grid; gap: .2rem; justify-items: center;
  transition: opacity .45s ease, transform .6s var(--ease);
}
.env__names { font-family: var(--script); font-size: clamp(2.6rem, min(12vw, 7.5vh), 4.4rem); line-height: 1.6; color: var(--ink); }
.env__names .amp { font-size: .7em; }
.env__hint {
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem); color: var(--muted);
  animation: hint 2.6s ease-in-out infinite;
}
@keyframes hint { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* Opening sequence: seal lifts → flap swings up → letter rises → envelope dissolves */
.envelope.is-opening { cursor: default; pointer-events: none; }
.envelope.is-opening .seal { transform: translate(-50%, -50%) scale(1.15); opacity: 0; transition-duration: .55s, .45s; }
.envelope.is-opening .seal::after { animation: none; opacity: 0; }
.envelope.is-opening .env__caption { opacity: 0; transform: translateY(12px); }
.envelope.is-opening .env__flap { transform: rotateX(-180deg); transition-delay: .3s; }
.envelope.is-opening .env__letter { transform: translateY(-14%); transition-delay: 1.05s; }
.envelope.is-opening .env__fold { transform: translateY(5%); transition-delay: 1.05s; }
.envelope.is-leaving .env__letter { opacity: 0; transform: translateY(-14%) scale(1.04); transition: opacity .35s ease, transform .6s var(--ease); }
.envelope.is-leaving { opacity: 0; transition: opacity .55s ease; }

/* ==========================================================================
   CONTENT
   ========================================================================== */
main { position: relative; z-index: 2; }
section, .closing { position: relative; padding: clamp(3.5rem, 9vh, 6rem) var(--gutter); }

/* Reveal (only when JS is running) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- The invitation card (arched, with a wax-seal keystone) ---------- */
.hero {
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center;
  padding-block: max(4.5rem, calc(env(safe-area-inset-top) + 3.5rem)) clamp(5rem, 12vh, 7rem);
}
.card {
  --arch: clamp(9rem, 32vw, 12rem);
  position: relative; width: min(100%, 35rem); text-align: center;
  display: grid; justify-items: center; gap: clamp(.8rem, 2.2vh, 1.25rem);
  padding: clamp(4.25rem, 15vw, 5.5rem) clamp(1.1rem, 5vw, 2.75rem) clamp(2.5rem, 6vw, 3.5rem);
  background: var(--noise), linear-gradient(180deg, #FFFDFB, #FBF3EE);
  border-radius: 50% 50% 1.75rem 1.75rem / var(--arch) var(--arch) 1.75rem 1.75rem;
  box-shadow: var(--frame);
}
.card::before {
  content: ""; position: absolute; inset: .65rem; pointer-events: none;
  border: 1px solid rgba(199, 164, 108, .5);
  border-radius: 50% 50% 1.2rem 1.2rem / calc(var(--arch) - .65rem) calc(var(--arch) - .65rem) 1.2rem 1.2rem;
}
.card__crown {
  position: absolute; top: 0; left: 50%; width: clamp(4.25rem, 17vw, 5.25rem); aspect-ratio: 1;
  transform: translate(-50%, -42%);
  filter: drop-shadow(0 6px 10px rgba(110, 55, 52, .28));
}
.card__crown .seal__mono, .closing__seal .seal__mono { font-size: clamp(1.15rem, 4.6vw, 1.45rem); }
.js .card__crown { opacity: 0; transform: translate(-50%, -42%) scale(.6); transition: opacity .8s ease .2s, transform 1s cubic-bezier(.3, 1.4, .5, 1) .2s; }
.js.opened .card__crown { opacity: 1; transform: translate(-50%, -42%); }

.verse {
  max-width: 11.5em; font-size: clamp(1.35rem, 1.1rem + 1.4vw, 1.8rem); line-height: 1.75;
  color: var(--gold-deep);
}
.kicker { font-family: var(--script); font-size: clamp(1.4rem, 1.2rem + 1vw, 1.75rem); line-height: 1.6; color: var(--rose-deep); }

.hosts {
  width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
  gap: clamp(.6rem, 3vw, 1.5rem);
}
.hosts__rule { width: 1px; align-self: stretch; background: linear-gradient(transparent, var(--gold), transparent); }
.host { font-size: clamp(.98rem, .9rem + .5vw, 1.12rem); line-height: 1.85; color: var(--muted); }
.host b { display: inline-block; font-weight: 700; color: var(--ink); font-size: clamp(1.05rem, .95rem + .6vw, 1.3rem); }
.kun { color: var(--rose-deep); font-size: .95em; }

.couple {
  width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end;
  font-weight: 400; margin-block: clamp(.1rem, 1vh, .6rem);
}
.couple:focus { outline: none; }
.partner { display: grid; justify-items: center; }
.who { font-size: clamp(.98rem, .9rem + .5vw, 1.12rem); line-height: 1.8; color: var(--muted); }
.nm { font-family: var(--script); font-size: clamp(3rem, 14vw, 4.8rem); line-height: 1.55; color: var(--ink); }
.couple .amp { font-size: clamp(2.2rem, 9vw, 3.4rem); line-height: 1; padding-bottom: .55em; }

.scroll-cue {
  position: absolute; left: 50%; bottom: max(1.25rem, calc(env(safe-area-inset-bottom) + .75rem));
  width: 2.75rem; height: 2.75rem; margin-left: -1.375rem; display: grid; place-items: center;
  border-radius: 50%; color: var(--rose-deep);
}
.scroll-cue span { width: .7rem; height: .7rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); animation: nudge 2.2s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(-3px) rotate(45deg); opacity: .5; } 50% { transform: translateY(4px) rotate(45deg); opacity: 1; } }

/* ---------- When & where ---------- */
.when { display: grid; justify-items: center; gap: clamp(1.5rem, 4vh, 2.25rem); text-align: center; }
.when__panel {
  --c: rgba(199, 164, 108, .8);
  width: min(100%, 32rem); display: grid; justify-items: center; gap: clamp(.5rem, 1.6vh, .9rem);
  padding: clamp(2rem, 6vw, 2.75rem) clamp(1.25rem, 5vw, 2.5rem);
  border-radius: 1.75rem; box-shadow: var(--frame);
  /* four gilded corner brackets */
  background:
    linear-gradient(var(--c), var(--c)) top 1rem right 1rem / 1.6rem 1px no-repeat,
    linear-gradient(var(--c), var(--c)) top 1rem right 1rem / 1px 1.6rem no-repeat,
    linear-gradient(var(--c), var(--c)) top 1rem left 1rem / 1.6rem 1px no-repeat,
    linear-gradient(var(--c), var(--c)) top 1rem left 1rem / 1px 1.6rem no-repeat,
    linear-gradient(var(--c), var(--c)) bottom 1rem right 1rem / 1.6rem 1px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom 1rem right 1rem / 1px 1.6rem no-repeat,
    linear-gradient(var(--c), var(--c)) bottom 1rem left 1rem / 1.6rem 1px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom 1rem left 1rem / 1px 1.6rem no-repeat,
    var(--noise),
    linear-gradient(180deg, rgba(255, 253, 251, .92), rgba(251, 243, 238, .92));
}
.when__lead { color: var(--muted); line-height: 1.9; }
.date {
  font-family: var(--latin); font-weight: 500; color: var(--ink);
  font-size: clamp(1.9rem, 1.3rem + 3.2vw, 2.9rem); line-height: 1.1; letter-spacing: .08em; white-space: nowrap;
  padding: .55em .6em .5em; margin-block: .2rem;
  border-block: 1px solid rgba(199, 164, 108, .6);
}
.when__time { font-size: clamp(1.15rem, 1rem + .7vw, 1.4rem); color: var(--text); }
.when__hall { display: grid; justify-items: center; gap: .3rem; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.65rem); color: var(--ink); }
.pin { width: 1.4rem; height: 1.4rem; fill: none; stroke: var(--rose-deep); stroke-width: 1.5; }

/* Countdown — four rings, read left to right like a clock */
.cd { display: flex; justify-content: center; gap: clamp(.45rem, 2.4vw, 1rem); direction: ltr; }
.cd__u { position: relative; width: clamp(4.1rem, 19vw, 5.6rem); display: grid; justify-items: center; gap: .3rem; }
.cd__ring { width: 100%; height: auto; aspect-ratio: 1; transform: rotate(-90deg); filter: drop-shadow(0 6px 10px rgba(120, 76, 68, .12)); }
.cd__trk { fill: rgba(255, 253, 251, .85); stroke: var(--blush-2); stroke-width: 3; }
.cd__arc {
  fill: none; stroke: var(--rose); stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 282.74; stroke-dashoffset: 282.74;
  transition: stroke-dashoffset .9s var(--ease);
}
.cd__u b {
  position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 1; display: grid; place-items: center;
  font-family: var(--latin); font-weight: 600; font-size: clamp(1.5rem, 1.1rem + 2vw, 2.1rem); line-height: 1; color: var(--ink);
}
.cd__u span { font-size: .95rem; color: var(--muted); line-height: 1.4; }

/* ---------- Notes ---------- */
.notes { display: grid; justify-items: center; gap: clamp(.9rem, 2.4vh, 1.3rem); text-align: center; padding-top: clamp(1rem, 3vh, 2rem); }
.warn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .75rem 1.4rem; border-radius: 999px;
  font-weight: 700; font-size: clamp(1.15rem, 1rem + .8vw, 1.4rem); line-height: 1.5; color: var(--wine);
  background: linear-gradient(135deg, rgba(244, 222, 216, .95), rgba(235, 201, 194, .85));
  box-shadow: 0 0 0 1px rgba(142, 75, 74, .55), 0 0 0 4px rgba(255, 253, 251, .9), 0 0 0 5px rgba(201, 143, 138, .45), 0 14px 30px -14px rgba(142, 75, 74, .5);
  margin-bottom: clamp(1rem, 3vh, 1.75rem);
}
.warn .icon { width: 1.3em; height: 1.3em; }
.rh { font-family: var(--script); font-weight: 400; font-size: clamp(2.2rem, 1.6rem + 3vw, 3.2rem); line-height: 1.5; color: var(--ink); }
.rules { width: min(100%, 32rem); display: grid; gap: .8rem; margin-top: .4rem; }
.rl {
  display: flex; align-items: center; gap: .9rem; text-align: start;
  padding: .9rem 1.1rem; border-radius: 1.1rem;
  background: var(--noise), rgba(255, 253, 251, .88);
  box-shadow: 0 0 0 1px rgba(199, 164, 108, .3), 0 14px 30px -18px rgba(120, 76, 68, .35);
  font-size: clamp(1rem, .95rem + .3vw, 1.1rem); line-height: 1.85; color: var(--text);
}
.ic {
  flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center;
  color: var(--rose-deep); background: linear-gradient(135deg, #FBEDE9, var(--blush));
  box-shadow: 0 0 0 1px rgba(199, 164, 108, .5), inset 0 0 0 3px rgba(255, 253, 251, .9);
}
.ic .icon { width: 1.35rem; height: 1.35rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3.1rem; padding: .7rem 1.6rem; border-radius: 999px;
  font-family: var(--serif); font-weight: 700; font-size: 1.05rem;
  text-decoration: none; border: 1px solid transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s;
  -webkit-tap-highlight-color: transparent;
}
.btn--rose { color: #fff; background: linear-gradient(135deg, #D8A49E, #BE817C); box-shadow: 0 10px 24px -10px rgba(169, 105, 106, .7); }
.btn:active { transform: scale(.97); }
@media (hover: hover) { .btn--rose:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(169, 105, 106, .8); } }

/* ---------- Closing ---------- */
.closing { display: grid; justify-items: center; gap: 1rem; padding-bottom: max(6rem, calc(env(safe-area-inset-bottom) + 5.5rem)); }
.closing__seal { position: relative; display: block; width: clamp(4.25rem, 17vw, 5.25rem); aspect-ratio: 1; filter: drop-shadow(0 6px 10px rgba(110, 55, 52, .28)); }

/* ---------- Music button & auto-scroll hint ---------- */
.music-btn {
  position: fixed; z-index: 60;
  bottom: max(1rem, calc(env(safe-area-inset-bottom) + .6rem)); inset-inline-end: max(1rem, env(safe-area-inset-left));
  width: 3.1rem; height: 3.1rem; padding: 0;
  display: inline-grid; place-items: center;
  border-radius: 999px; border: 1px solid rgba(201, 143, 138, .5);
  background: rgba(255, 252, 249, .82); color: var(--rose-deep);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px -8px rgba(120, 76, 68, .4);
  -webkit-tap-highlight-color: transparent;
}
.music-btn__bars { display: flex; align-items: flex-end; gap: 3px; height: 1rem; }
.music-btn__bars i { width: 3px; height: 100%; border-radius: 2px; background: currentColor; transform-origin: bottom; transform: scaleY(.3); }
.music-btn[aria-pressed="true"] .music-btn__bars i { animation: eq 1s ease-in-out infinite; }
.music-btn__bars i:nth-child(2) { animation-delay: -.3s !important; }
.music-btn__bars i:nth-child(3) { animation-delay: -.6s !important; }
.music-btn__bars i:nth-child(4) { animation-delay: -.15s !important; }
@keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.music-btn__off { display: none; width: 1.3rem; height: 1.3rem; }
.music-btn[aria-pressed="false"] .music-btn__bars { display: none; }
.music-btn[aria-pressed="false"] .music-btn__off { display: block; }

#ahint {
  position: fixed; z-index: 60; left: 50%; bottom: max(4.9rem, calc(env(safe-area-inset-bottom) + 4.5rem));
  transform: translate(-50%, 10px); width: max-content; max-width: calc(100vw - 2rem);
  padding: .45rem 1.1rem; border-radius: 999px;
  background: rgba(47, 53, 82, .86); color: #FFF7F4; font-size: .92rem; line-height: 1.5; text-align: center;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .5s ease, transform .5s var(--ease);
}
#ahint.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Falling petals (after opening) ---------- */
.falling { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.falling i {
  position: absolute; top: -6vh; left: var(--x);
  width: var(--s); height: calc(var(--s) * .72);
  border-radius: 80% 0 80% 0;
  background: linear-gradient(135deg, #F7DCD6, #E8BDB5);
  opacity: .75;
  animation: fall var(--d) linear var(--delay) infinite;
}
@keyframes fall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  25%  { transform: translate3d(3vw, 28vh, 0) rotate(80deg); }
  50%  { transform: translate3d(-2vw, 56vh, 0) rotate(170deg); }
  75%  { transform: translate3d(4vw, 84vh, 0) rotate(260deg); }
  100% { transform: translate3d(1vw, 114vh, 0) rotate(340deg); }
}

/* ==========================================================================
   SHORT / LANDSCAPE / WIDE SCREENS
   ========================================================================== */
@media (orientation: landscape) and (max-height: 34rem) {
  .js .envelope { --tip: 50%; }
  .env__letter { inset-inline: 20%; padding-top: 1.25rem; }
  .env__flap-sprig { margin-top: max(2.4rem, calc(env(safe-area-inset-top) + 2rem)); }
  .seal { width: clamp(5rem, 24vh, 7rem); }
  .seal .seal__mono { font-size: clamp(1.4rem, 6.4vh, 2rem); }
  .env__caption { bottom: max(.75rem, calc(env(safe-area-inset-bottom) + .5rem)); gap: 0; }
  .env__names { font-size: clamp(2rem, 9vh, 2.8rem); }
  .scroll-cue { display: none; }
}
@media (max-width: 22rem) {
  .hosts { grid-template-columns: 1fr; }
  .hosts__rule { width: 4rem; height: 1px; justify-self: center; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
  .rl { padding: .8rem .9rem; gap: .7rem; }
}
@media (min-width: 64rem) {
  .js .envelope { --tip: 52%; }
  .env__letter { inset-inline: 24%; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .2s !important; transition-delay: 0s !important; }
  .falling { display: none; }
  .js .reveal { transform: none; }
}