:root {
  --green: #304638;
  --green-dark: #24382d;
  --green-deep: #17261f;
  --green-soft: #3d5747;
  --cream: #f5f0e7;
  --ivory: #fbf9f4;
  --gold: #b9955a;
  --gold-light: #d6c29b;
  --text: #26332c;
  --muted: #737b75;
  --ease: cubic-bezier(.22,.78,.24,1);
  --spring: cubic-bezier(.18,1.2,.34,1);
  --safe-t: max(18px, env(safe-area-inset-top));
  --safe-b: max(18px, env(safe-area-inset-bottom));
  --scene-p: 0;
}

* { box-sizing: border-box; }
html { background: var(--ivory); scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 280px;
  overflow-x: clip;
  color: var(--text);
  background: var(--ivory);
  font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-x: none;
}
body.is-locked { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
::selection { background: rgba(185,149,90,.24); color: var(--green-dark); }

.family-names {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 38px;
  direction: rtl;
  color: #b59658;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
}

.family-names span {
  min-width: 110px;
  text-align: center;
}
.skip-link {
  position: fixed; z-index: 300; top: 10px; right: 10px;
  transform: translateY(-180%); padding: .7rem 1rem; border-radius: 999px;
  background: var(--green-dark); color: var(--ivory); text-decoration: none;
}
.skip-link:focus { transform: none; }
.noise {
  position: fixed; inset: 0; z-index: 250; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* Opening — a physical invitation rather than a splash screen. */
.opening {
  position: fixed; inset: 0; z-index: 200; overflow: hidden; isolation: isolate;
  min-height: 100svh; height: 100dvh;
  display: grid; grid-template-rows: auto 1fr auto; align-items: center; justify-items: center;
  padding: var(--safe-t) 16px var(--safe-b);
  background:
    radial-gradient(circle at 50% 45%, rgba(214,194,155,.24), transparent 28rem),
    linear-gradient(135deg, rgba(255,255,255,.72), transparent 46%), var(--ivory);
  transition: opacity .8s ease, visibility .8s;
}
.opening::before, .opening::after {
  content: ""; position: absolute; width: 68vw; aspect-ratio: 1; border: 1px solid rgba(48,70,56,.08);
  border-radius: 50% 50% 0 50%; transform: rotate(45deg); pointer-events: none;
}
.opening::before { top: -45vw; right: -27vw; }
.opening::after { bottom: -49vw; left: -31vw; }
.opening.is-complete { opacity: 0; visibility: hidden; pointer-events: none; }
.opening__light { position: absolute; inset: 0; background: radial-gradient(circle at 50% 47%, rgba(255,255,255,.75), transparent 26%); opacity: .6; }
.opening__kicker { position: relative; margin: 0; font-size: .72rem; letter-spacing: .06em; color: rgba(48,70,56,.66); }
.opening__stage { position: relative; width: 100%; display: grid; place-items: center; perspective: 1400px; }
.envelope {
  --w: min(84vw, 370px, calc(70svh * .72));
  position: relative; width: var(--w); aspect-ratio: .72; padding: 0; border: 0; background: none;
  cursor: pointer; transform-style: preserve-3d; transition: transform .5s var(--spring);
}
.envelope:active { transform: scale(.985); }
.envelope:focus-visible { outline: 3px solid rgba(185,149,90,.55); outline-offset: 8px; border-radius: 14px; }
.envelope__shadow { position: absolute; inset: auto 7% -5% 7%; height: 12%; background: rgba(23,38,31,.22); filter: blur(20px); border-radius: 50%; transform: translateZ(-30px); }
.envelope__back { position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(145deg, var(--green-soft), var(--green-dark)); box-shadow: 0 26px 70px rgba(36,56,45,.24), inset 0 0 0 1px rgba(214,194,155,.24); }
.letter {
  position: absolute; z-index: 2; top: 7%; right: 6%; width: 88%; height: 84%; padding: 16% 9% 8%;
  display: flex; flex-direction: column; align-items: center; gap: .8rem; border-radius: 8px;
  background: linear-gradient(rgba(185,149,90,.05) 1px, transparent 1px), linear-gradient(90deg,rgba(185,149,90,.04) 1px,transparent 1px), var(--ivory);
  background-size: 22px 22px; box-shadow: 0 10px 35px rgba(20,30,25,.25); color: var(--green-dark);
  transform: translateY(18%) translateZ(1px); opacity: 0; transition: transform 1.15s var(--ease) 1.05s, opacity .35s ease .82s, box-shadow .8s ease;
}
.letter__top { font-size: .72rem; color: var(--gold); }
.letter strong { margin-top: 5%; font-family: "Amiri", serif; font-size: clamp(1.5rem, 6vw, 2.1rem); line-height: 1.5; }
.letter > span:last-child { font-size: .8rem; color: var(--muted); }
.letter__rule { width: 36px; height: 1px; background: var(--gold); }
.envelope__flap {
  position: absolute; z-index: 5; inset: 0 0 auto; height: 55%; clip-path: polygon(0 0,100% 0,50% 89%);
  background: linear-gradient(160deg,#3e5848,var(--green-dark)); transform-origin: top center; backface-visibility: hidden;
  filter: drop-shadow(0 5px 4px rgba(16,27,22,.14)); transition: transform 1s var(--ease) .58s;
}
.envelope__pocket { position: absolute; z-index: 4; inset: auto 0 0; height: 59%; clip-path: polygon(0 0,50% 56%,100% 0,100% 100%,0 100%); border-radius: 0 0 12px 12px; background: linear-gradient(180deg,#334b3c,#263b2f); }
.envelope__face { position: absolute; z-index: 7; inset: 0; color: var(--gold-light); display: flex; flex-direction: column; align-items: center; pointer-events: none; transition: opacity .45s ease .62s, transform .6s ease .4s; }
.envelope__names { margin-top: 13%; font-family: "Amiri",serif; font-size: clamp(2.15rem, 9vw, 3rem); font-weight: 700; }
.envelope__names i { font-style: normal; font-size: .56em; font-weight: 400; opacity: .75; }
.envelope__line { position: absolute; bottom: 13%; font-size: .72rem; opacity: .86; }
.mini-seal { position: absolute; top: 49%; left: 50%; width: 84px; aspect-ratio: 1; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle at 35% 28%, #d6c29b 0 3%, #b9955a 27%, #9d7745 72%, #76552f 100%); box-shadow: inset 0 0 0 2px rgba(255,247,225,.35), inset 0 -10px 18px rgba(70,45,19,.20), 0 7px 12px rgba(16,28,22,.20); display: grid; place-items: center; color: #fff3d5; transition: transform .8s var(--spring) .05s, opacity .4s ease .55s; }
.mini-seal__rim { position: absolute; inset: 9px; border: 1px solid rgba(255,243,213,.55); border-radius: 50%; }
.mini-seal__press {
  position:absolute; inset:18px; border-radius:50%;
  background:
    radial-gradient(circle at 42% 36%,rgba(255,246,219,.20) 0 5%,transparent 6%),
    radial-gradient(circle at 56% 62%,rgba(92,62,31,.14) 0 8%,transparent 9%),
    radial-gradient(circle,rgba(255,243,213,.08),rgba(82,56,30,.08));
  box-shadow:inset 1px 2px 5px rgba(255,247,225,.16),inset -2px -3px 7px rgba(67,43,20,.22);
}
.opening__hint { position: relative; display: flex; align-items: center; gap: .4rem; color: rgba(48,70,56,.6); font-size: .68rem; animation: hint 2.3s ease-in-out infinite; }
.opening__hint svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.opening.is-opening .mini-seal { transform: translate(-50%,-50%) scale(.2) rotate(28deg); opacity: 0; }
.opening.is-opening .envelope__face { opacity: 0; transform: translateY(-8px); }
.opening.is-opening .envelope__flap { transform: rotateX(174deg); }
.opening.is-opening .letter { transform: translateY(-31%) translateZ(16px) scale(1.025); opacity: 1; box-shadow: 0 24px 50px rgba(20,30,25,.18); }
.opening.is-opening .envelope { animation: envelopeSettle 2.1s var(--ease) .35s both; }
@keyframes hint { 0%,100%{transform:translateY(0);opacity:.62} 50%{transform:translateY(4px);opacity:1} }
@keyframes envelopeSettle { 0%{transform:translateY(0)} 55%{transform:translateY(12px)} 100%{transform:translateY(44px) scale(.96)} }

/* Persistent rings: true parametric torus geometry rendered on canvas.
   The band has a circular cross-section, so its physical thickness remains visible while tilting in depth. */
.rings {
  --visible: 1;
  position: fixed; z-index: 16; top: 50%; left: 50%; width: clamp(190px, 52vw, 244px); aspect-ratio: 1;
  transform: translate(-50%,-50%); padding: 0; border: 0; background: none; cursor: grab;
  touch-action: pan-y; opacity: var(--visible); transition: opacity .42s ease; will-change: opacity;
  overflow: visible;
}
.rings:active { cursor: grabbing; }
.rings:focus-visible { outline: 2px solid var(--gold); outline-offset: 9px; border-radius: 50%; }
.rings__aura {
  position:absolute; inset:18%; border-radius:50%; opacity:var(--aura,.16); pointer-events:none;
  background:radial-gradient(circle,rgba(214,194,155,.26),rgba(185,149,90,.08) 42%,transparent 72%);
  filter:blur(8px); transform:scale(var(--aura-s,1.25)); transition:transform .65s var(--ease),opacity .4s ease;
}
.rings__canvas {
  position:absolute; left:50%; top:50%; width:720px; height:720px; max-width:none;
  transform:translate(-50%,-50%); pointer-events:none; overflow:visible;
  filter:drop-shadow(0 9px 9px rgba(24,31,27,.08));
}
.rings.is-united .rings__aura { --aura:.64; --aura-s:1.72; }

.scene-progress { position: fixed; z-index: 80; top: 50%; left: max(9px, env(safe-area-inset-left)); width: 2px; height: min(20svh, 132px); transform: translateY(-50%); background: rgba(48,70,56,.12); border-radius: 2px; opacity: 0; transition: opacity .4s ease; }
body.invitation-open .scene-progress { opacity: 1; }
.scene-progress span { display:block; width:100%; height:0%; border-radius:inherit; background: var(--gold); }

/* Chapters */
.experience { position: relative; z-index: 1; }
.chapter { position: relative; height: 175svh; min-height: 920px; background: var(--ivory); }
.chapter .scene { position: sticky; top: 0; height: 100svh; height: 100dvh; min-height: 520px; overflow: hidden; isolation: isolate; display: grid; place-items: center; padding: var(--safe-t) clamp(20px,6vw,34px) var(--safe-b); }
.chapter--cream, .chapter--story, .chapter--portrait, .chapter--countdown, .chapter--rsvp { background: var(--cream); }
.chapter--green, .chapter--we, .chapter--night, .chapter--care, .chapter--closing { background: var(--green-dark); color: var(--ivory); }
.scene__copy { position: relative; z-index: 4; width: min(100%, 520px); }
.scene__copy--center { text-align: center; }
.scene__copy--light { color: var(--ivory); }
.display { margin: 0; font-family: "Amiri",serif; font-weight: 700; line-height: .95; letter-spacing: -.035em; }
.display--names { font-size: clamp(4rem, 19vw, 7.2rem); }
.display--names span { display: block; transform: translateY(calc((.5 - var(--scene-p)) * 12px)); }
.display--names span:last-child { transform: translateY(calc((var(--scene-p) - .5) * 12px)); }
.display--names i { display:block; margin:.1em auto; font-style:normal; font-size:.28em; font-weight:400; color:var(--gold); }
.lead { margin: 1.5rem auto 0; max-width: 25rem; color: var(--muted); font-size: clamp(.92rem,4vw,1.08rem); line-height: 2; }
.scene__copy--light .lead { color: rgba(251,249,244,.73); }
.microcopy { margin: 1rem auto 0; font-size: .77rem; color: rgba(251,249,244,.45); }
.scroll-cue { position:absolute; z-index:5; bottom:calc(var(--safe-b) + 4px); left:50%; display:flex; flex-direction:column; align-items:center; gap:.35rem; transform:translateX(-50%); color:rgba(48,70,56,.52); font-size:.65rem; opacity:calc(1 - var(--scene-p) * 2); }
.scroll-cue span { width:1px; height:28px; background:linear-gradient(var(--gold),transparent); }

.architecture { position:absolute; inset:0; z-index:1; pointer-events:none; }
.architecture--courtyard .arch { position:absolute; left:50%; border:1px solid rgba(48,70,56,.10); border-bottom:0; border-radius:50% 50% 0 0 / 34% 34% 0 0; transform:translateX(-50%) translateY(calc((var(--scene-p) - .5) * -22px)) scale(calc(.94 + var(--scene-p) * .12)); }
.arch--outer { width:min(86vw,430px); height:72svh; bottom:-14svh; }
.arch--inner { width:min(66vw,330px); height:61svh; bottom:-10svh; opacity:.7; }
.axis { position:absolute; left:50%; top:10%; bottom:10%; width:1px; background:linear-gradient(transparent,rgba(185,149,90,.3),transparent); transform:translateX(-50%); }

/* Story: three beats share one pinned scene, so scrolling feels like editing a shot. */
.chapter--story { height: 260svh; min-height: 1380px; }
.story-beats { position:relative; z-index:4; width:min(100%,520px); height:74svh; max-height:680px; }
.beat { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; opacity:0; filter:blur(8px); transform:translateY(28px) scale(.98); pointer-events:none; text-align:right; }
.beat h2 { margin:0; font-family:"Amiri",serif; font-size:clamp(3rem,15vw,5.2rem); line-height:1.05; color:var(--green-dark); }
.beat p:last-child { margin:1.2rem 0 0; max-width:22rem; color:var(--muted); font-size:.95rem; line-height:2; }
.beat__number { position:absolute; top:8%; left:0; font-family:"Amiri",serif; font-size:clamp(4rem,20vw,7rem); color:rgba(185,149,90,.13); font-weight:700; }
.beat--one { opacity:var(--b1,1); filter:blur(calc((1 - var(--b1,1)) * 8px)); transform:translateY(calc((1 - var(--b1,1)) * -18px)); }
.beat--two { opacity:var(--b2,0); transform:translateY(calc((.5 - var(--scene-p)) * 42px)); filter:blur(calc((1 - var(--b2,0)) * 8px)); }
.beat--three { opacity:var(--b3,0); transform:translateY(calc((1 - var(--b3,0)) * 20px)); filter:blur(calc((1 - var(--b3,0)) * 8px)); }
.story-line { position:absolute; width:1px; background:linear-gradient(transparent,rgba(185,149,90,.34),transparent); transform-origin:center; }
.story-line--one { height:125%; right:22%; top:-12%; transform:rotate(19deg) translateY(calc(var(--scene-p) * -40px)); }
.story-line--two { height:115%; left:26%; top:-9%; transform:rotate(-15deg) translateY(calc(var(--scene-p) * 35px)); }
.story-line--three { width:58vw; max-width:320px; height:58vw; max-height:320px; border:1px solid rgba(48,70,56,.07); background:none; border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%) scale(calc(.65 + var(--scene-p) * .65)); }

/* The central 'we' scene turns the emblem into the transition itself. */
.chapter--we { height:190svh; }
.portal span { position:absolute; top:0; bottom:0; width:52%; background:var(--green-deep); z-index:2; }
.portal span:first-child { right:0; transform:translateX(calc(var(--scene-p) * 102%)); }
.portal span:last-child { left:0; transform:translateX(calc(var(--scene-p) * -102%)); }
.display--single { font-size:clamp(9rem,48vw,17rem); color:var(--ivory); opacity:.95; transform:scale(calc(.82 + var(--scene-p) * .22)); }

.chapter--date { height:190svh; }
.date-composition { position:relative; z-index:4; width:min(100%,540px); text-align:center; transform:translateY(calc((.5 - var(--scene-p)) * 16px)); }
.date-weekday { margin:0 0 .2rem; color:var(--muted); }
.display--date { font-size:clamp(5.6rem,28vw,10rem); color:var(--green-dark); }
.date-year { margin:.3rem 0 1.7rem; font-family:"Amiri",serif; font-size:1.45rem; color:var(--gold); }
.date-meta { display:flex; align-items:center; justify-content:center; gap:.9rem; color:var(--muted); font-size:.82rem; }
.date-meta i { width:4px; height:4px; border-radius:50%; background:var(--gold); }
.sun-disc { position:absolute; width:52vw; max-width:310px; aspect-ratio:1; border-radius:50%; left:50%; top:50%; background:radial-gradient(circle,rgba(214,194,155,.22),rgba(214,194,155,.07) 48%,transparent 70%); transform:translate(-50%,-50%) scale(calc(.75 + var(--scene-p) * .55)); }
.date-axis { position:absolute; left:50%; top:0; bottom:0; width:1px; background:rgba(185,149,90,.12); }

.chapter--portrait { height:210svh; }
.portrait-frame { position:absolute; z-index:2; top:7%; left:50%; width:min(82vw,390px); height:58svh; max-height:560px; transform:translateX(-50%) translateY(calc(var(--scene-p) * -6svh)) scale(calc(.9 + var(--scene-p) * .1)); }
.portrait-frame__mask { position:absolute; inset:0; overflow:hidden; border-radius:50% 50% 18px 18px / 28% 28% 18px 18px; box-shadow:0 28px 70px rgba(36,56,45,.15); clip-path:inset(calc((1 - var(--scene-p)) * 18%) 0 0 0 round 50% 50% 18px 18px); }
.portrait-frame img { width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(calc(1.11 - var(--scene-p) * .08)) translateY(calc((.5 - var(--scene-p)) * 10px)); }
.portrait-frame__arch { position:absolute; inset:-9px; border:1px solid rgba(185,149,90,.46); border-radius:50% 50% 22px 22px / 28% 28% 22px 22px; }
.portrait-copy { position:absolute; z-index:5; bottom:10%; right:clamp(20px,7vw,40px); width:min(78vw,340px); padding:1.1rem 1rem 1.2rem; background:linear-gradient(90deg,var(--cream) 76%,rgba(245,240,231,0)); }
.portrait-copy h2 { margin:0; font-family:"Amiri",serif; font-size:clamp(2.35rem,11vw,4rem); line-height:1.15; color:var(--green-dark); }
.portrait-copy p:last-child { color:var(--muted); line-height:2; font-size:.9rem; }

.chapter--night { height:250svh; min-height:1300px; }
.night-composition { position:relative; z-index:5; width:min(100%,480px); }
.night-composition > h2 { margin:0 0 1.4rem; font-family:"Amiri",serif; font-size:clamp(3.6rem,18vw,6.3rem); }
.night-timeline { list-style:none; margin:0; padding:0; display:grid; gap:0; }
.night-timeline li { position:relative; min-height:92px; padding:1rem 3.1rem 1rem 0; border-top:1px solid rgba(214,194,155,.15); opacity:.28; transform:translateX(14px); transition:opacity .4s ease,transform .5s var(--spring); }
.night-timeline li::before { content:""; position:absolute; right:.5rem; top:1.45rem; width:10px; height:10px; border:1px solid var(--gold); border-radius:50%; background:var(--green-dark); box-shadow:0 0 0 6px rgba(185,149,90,.06); }
.night-timeline li::after { content:""; position:absolute; right:.79rem; top:2.1rem; bottom:-.9rem; width:1px; background:rgba(185,149,90,.17); }
.night-timeline li:last-child::after { display:none; }
.night-timeline time { display:block; color:var(--gold-light); font-size:.7rem; }
.night-timeline strong { display:block; margin:.15rem 0; font-family:"Amiri",serif; font-size:1.55rem; }
.night-timeline span { color:rgba(251,249,244,.54); font-size:.78rem; }
.night-timeline li:nth-child(1){opacity:var(--n1,.28);transform:translateX(calc((1 - var(--n1,.28))*12px))}
.night-timeline li:nth-child(2){opacity:var(--n2,.28);transform:translateX(calc((1 - var(--n2,.28))*12px))}
.night-timeline li:nth-child(3){opacity:var(--n3,.28);transform:translateX(calc((1 - var(--n3,.28))*12px))}
.night-timeline li:nth-child(4){opacity:var(--n4,.28);transform:translateX(calc((1 - var(--n4,.28))*12px))}
.night-orbit span { position:absolute; border:1px solid rgba(214,194,155,.09); border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%) rotate(calc(var(--scene-p)*70deg)); }
.night-orbit span:nth-child(1){width:88vw;height:88vw;max-width:520px;max-height:520px}
.night-orbit span:nth-child(2){width:110vw;height:54vw;max-width:680px;max-height:330px;transform:translate(-50%,-50%) rotate(calc(-32deg + var(--scene-p)*45deg))}
.night-orbit span:nth-child(3){width:55vw;height:112vw;max-width:330px;max-height:680px;transform:translate(-50%,-50%) rotate(calc(27deg - var(--scene-p)*50deg))}


/* Venue: address and calendar stay as a dedicated full frame. */
.chapter--venue { height:195svh; min-height:1040px; }
.venue-composition { position:relative; z-index:4; width:min(100%,480px); text-align:center; transform:translateY(calc((.5 - var(--scene-p)) * 10px)); }
.venue-kicker { margin:0 0 .45rem; color:var(--gold); font-size:.72rem; }
.venue-pin { display:grid; place-items:center; width:68px; height:68px; margin:0 auto 1rem; border:1px solid rgba(185,149,90,.35); border-radius:50% 50% 50% 0; transform:rotate(-45deg) scale(calc(.9 + var(--scene-p)*.08)); color:var(--gold); }
.venue-pin i { width:12px; height:12px; border:1px solid currentColor; border-radius:50%; transform:rotate(45deg); }
.venue-composition h2 { margin:.25rem 0 .55rem; font-family:"Amiri",serif; font-size:clamp(3rem,14vw,5.4rem); line-height:1.08; color:var(--green-dark); }
.venue-address { margin:0 0 1.5rem; color:var(--muted); }
.venue-actions { display:grid; gap:.7rem; width:min(100%,330px); margin:auto; }
.action { min-height:50px; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 1.05rem; border-radius:999px; text-decoration:none; font-size:.84rem; font-weight:600; transition:transform .35s var(--spring),background .25s ease; }
.action:active { transform:scale(.975); }
.action--primary { background:var(--green); color:var(--ivory); box-shadow:0 13px 28px rgba(48,70,56,.15); }
.action--ghost { border:1px solid rgba(48,70,56,.2); color:var(--green); background:rgba(255,255,255,.28); }
.map-lines { position:absolute; inset:0; opacity:.28; transform:scale(calc(1.1 - var(--scene-p)*.08)) translateY(calc((.5 - var(--scene-p))*35px)); }
.map-lines svg { width:100%; height:100%; fill:none; stroke:var(--gold); stroke-width:.7; stroke-dasharray:4 8; }

/* Guest comfort / etiquette is one continuous architectural scene, not a stack of cards. */
.chapter--care { height:360svh; min-height:1900px; }
.care-architecture { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.care-architecture span { position:absolute; border:1px solid rgba(214,194,155,.11); border-radius:50% 50% 0 0 / 30% 30% 0 0; left:50%; bottom:-26%; transform:translateX(-50%) scale(calc(.82 + var(--scene-p)*.30)); }
.care-architecture span:nth-child(1){width:min(120vw,620px);height:85svh}.care-architecture span:nth-child(2){width:min(88vw,460px);height:68svh;opacity:.7}.care-architecture span:nth-child(3){width:1px;height:100%;bottom:0;border:0;border-radius:0;background:linear-gradient(transparent,rgba(214,194,155,.18),transparent);transform:translateX(-50%)}
.care-beats { position:relative; z-index:5; width:min(100%,520px); height:78svh; max-height:720px; }
.care-beat { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; opacity:0; filter:blur(10px); transform:translateY(26px); pointer-events:none; }
.care-kicker { margin:0 0 .65rem; color:var(--gold-light); font-size:.75rem; letter-spacing:.01em; }
.care-beat h2 { margin:0; font-family:"Amiri",serif; font-size:clamp(3.1rem,14vw,5.6rem); line-height:1.08; color:var(--ivory); }
.care-beat > p:not(.care-kicker) { margin:1rem 0 0; max-width:25rem; color:rgba(251,249,244,.66); font-size:.9rem; line-height:2.05; }
.care-beat > p + p:not(.care-kicker) { color:rgba(251,249,244,.48); font-size:.82rem; }
.care-beat--one { opacity:var(--c1,1); filter:blur(calc((1 - var(--c1,1))*10px)); transform:translateY(calc((1 - var(--c1,1))*-18px)); }
.care-beat--two { opacity:var(--c2,0); filter:blur(calc((1 - var(--c2,0))*10px)); transform:translateY(calc((1 - var(--c2,0))*22px)); }
.care-beat--three { opacity:var(--c3,0); filter:blur(calc((1 - var(--c3,0))*10px)); transform:translateY(calc((1 - var(--c3,0))*22px)); }
.care-beat--four { opacity:var(--c4,0); filter:blur(calc((1 - var(--c4,0))*10px)); transform:translateY(calc((1 - var(--c4,0))*22px)); }

.chapter--countdown { height:185svh; }
.countdown-composition { position:relative; z-index:4; width:min(100%,520px); text-align:center; }
.countdown-composition h2 { margin:0 0 1.5rem; font-family:"Amiri",serif; font-size:clamp(2.5rem,12vw,4.5rem); color:var(--green-dark); }
.countdown { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; overflow:hidden; border:1px solid rgba(185,149,90,.24); border-radius:24px; background:rgba(185,149,90,.24); box-shadow:0 20px 45px rgba(36,56,45,.07); }
.countdown > div { min-height:118px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(251,249,244,.80); backdrop-filter:blur(8px); }
.countdown strong { font-family:"Amiri",serif; color:var(--green-dark); font-size:clamp(2.5rem,14vw,4rem); line-height:1; font-variant-numeric:tabular-nums; }
.countdown strong.tick { animation:tick .36s var(--spring); }
.countdown span { margin-top:.55rem; color:var(--muted); font-size:.7rem; }
.countdown-finished { font-family:"Amiri",serif; font-size:1.5rem; color:var(--green); }
.countdown-rings span { position:absolute; border:1px solid rgba(48,70,56,.07); border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%) scale(calc(.75 + var(--scene-p)*.35)); }
.countdown-rings span:nth-child(1){width:76vw;height:76vw;max-width:420px;max-height:420px}.countdown-rings span:nth-child(2){width:105vw;height:105vw;max-width:600px;max-height:600px}.countdown-rings span:nth-child(3){width:140vw;height:140vw;max-width:760px;max-height:760px}
@keyframes tick { 0%{transform:translateY(4px) scale(.95);opacity:.5} 100%{transform:none;opacity:1} }


/* RSVP: one calm, touch-friendly final interaction frame. */
.chapter--rsvp { height:215svh; min-height:1160px; }
.rsvp-orbit span { position:absolute; left:50%; top:50%; border:1px solid rgba(185,149,90,.12); border-radius:50%; transform:translate(-50%,-50%) rotate(calc(var(--scene-p)*30deg)); pointer-events:none; }
.rsvp-orbit span:first-child { width:min(118vw,650px); height:min(118vw,650px); }
.rsvp-orbit span:last-child { width:min(82vw,450px); height:min(112vw,610px); transform:translate(-50%,-50%) rotate(calc(-24deg + var(--scene-p)*45deg)); }
.rsvp-composition { position:relative; z-index:5; width:min(100%,500px); }
.rsvp-kicker { margin:0 0 .4rem; color:var(--gold); font-size:.72rem; }
.rsvp-composition > h2 { margin:0; font-family:"Amiri",serif; font-size:clamp(3rem,14vw,5rem); line-height:1.05; color:var(--green-dark); }
.rsvp-intro { margin:.8rem 0 1.2rem; color:var(--muted); font-size:.86rem; line-height:1.9; }
.rsvp-form { display:grid; gap:.85rem; padding:1rem; border:1px solid rgba(185,149,90,.18); border-radius:26px; background:rgba(251,249,244,.76); box-shadow:0 22px 60px rgba(36,56,45,.08); backdrop-filter:blur(8px); }
.rsvp-field { display:grid; gap:.42rem; color:var(--green-dark); font-size:.76rem; }
.rsvp-field > span { padding-inline:.2rem; }
.rsvp-field small { color:var(--muted); font-size:.65rem; font-weight:400; }
.rsvp-field input,.rsvp-field textarea { width:100%; border:1px solid rgba(48,70,56,.16); border-radius:16px; background:rgba(255,255,255,.68); color:var(--green-dark); font:inherit; font-size:.88rem; outline:0; transition:border-color .25s ease,box-shadow .25s ease,background .25s ease; }
.rsvp-field input { min-height:48px; padding:.7rem .9rem; }
.rsvp-field textarea { resize:vertical; min-height:66px; max-height:130px; padding:.8rem .9rem; line-height:1.7; }
.rsvp-field input:focus,.rsvp-field textarea:focus { border-color:rgba(185,149,90,.62); box-shadow:0 0 0 4px rgba(185,149,90,.08); background:#fff; }
.rsvp-choice { margin:0; padding:0; border:0; }
.rsvp-choice legend { margin-bottom:.42rem; padding-inline:.2rem; color:var(--green-dark); font-size:.76rem; }
.rsvp-choice__options { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
.rsvp-choice__options label { position:relative; cursor:pointer; }
.rsvp-choice__options input { position:absolute; opacity:0; pointer-events:none; }
.rsvp-choice__options span { min-height:46px; display:grid; place-items:center; padding:.65rem .55rem; border:1px solid rgba(48,70,56,.16); border-radius:15px; background:rgba(255,255,255,.62); color:var(--green-dark); font-size:.76rem; text-align:center; transition:.25s ease; }
.rsvp-choice__options input:checked + span { border-color:var(--gold); background:rgba(214,194,155,.16); box-shadow:inset 0 0 0 1px rgba(185,149,90,.18); }
.rsvp-field--guests.is-disabled { opacity:.42; }
.rsvp-submit { min-height:50px; display:flex; align-items:center; justify-content:space-between; gap:1rem; border:0; border-radius:999px; padding:.75rem 1.05rem; background:var(--green); color:var(--ivory); font:inherit; font-size:.84rem; font-weight:700; cursor:pointer; box-shadow:0 13px 28px rgba(48,70,56,.15); transition:transform .25s var(--spring),opacity .25s ease; }
.rsvp-submit:active { transform:scale(.98); }
.rsvp-submit:disabled { opacity:.58; cursor:wait; }
.rsvp-status { min-height:1.35rem; margin:0; color:var(--muted); font-size:.72rem; line-height:1.8; text-align:center; }
.rsvp-status.is-success { color:var(--green); }
.rsvp-status.is-error { color:#8b493f; }
.rsvp-honeypot { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; }

.chapter--closing { height:190svh; }
.closing-photo { position:absolute; inset:-4%; z-index:0; opacity:calc(.18 + var(--scene-p)*.12); transform:scale(calc(1.08 - var(--scene-p)*.04)); filter:saturate(.8) contrast(.9); }
.closing-photo img { width:100%; height:100%; object-fit:cover; object-position:center; }
.closing-wash { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(23,38,31,.76),rgba(23,38,31,.92)), radial-gradient(circle at 50% 30%,transparent,rgba(23,38,31,.45)); }
.closing-composition { position:relative; z-index:4; text-align:center; width:min(100%,520px); }
.closing-prelude { margin:0 auto 1.2rem; color:rgba(251,249,244,.7); font-size:.9rem; line-height:2; }
.closing-composition h2 { margin:0; font-family:"Amiri",serif; font-size:clamp(4rem,20vw,7rem); line-height:1.02; color:var(--ivory); transform:scale(calc(.94 + var(--scene-p)*.04)); }
.closing-date { margin:1rem 0 0; color:var(--gold-light); font-size:.74rem; }
.closing-rule { width:1px; height:46px; margin:1.6rem auto; background:linear-gradient(var(--gold),transparent); }
.closing-names { margin:0; font-family:"Amiri",serif; font-size:1.55rem; color:var(--ivory); }

.music-control { position:fixed; z-index:90; left:max(16px,env(safe-area-inset-left)); bottom:max(16px,env(safe-area-inset-bottom)); width:46px; aspect-ratio:1; padding:0; border:1px solid rgba(185,149,90,.35); border-radius:50%; background:rgba(251,249,244,.82); backdrop-filter:blur(12px); box-shadow:0 9px 24px rgba(36,56,45,.12); opacity:0; transform:translateY(10px); transition:.35s var(--ease); }
.music-control.is-shown { opacity:1; transform:none; }
.music-control__disc { display:block; position:absolute; inset:10px; border:1px solid var(--green); border-radius:50%; }
.music-control__disc::before { content:""; position:absolute; inset:6px; border:1px solid rgba(185,149,90,.8); border-radius:50%; }
.music-control__disc i { position:absolute; width:4px; height:4px; border-radius:50%; background:var(--gold); top:50%; left:50%; transform:translate(-50%,-50%); }
.music-control.is-playing .music-control__disc { animation:spin 5s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }


/* Discrete page navigation: scenes stay crisp at every resting point. */
body.invitation-open { overscroll-behavior-y: none; }
.beat, .beat--one, .beat--two, .beat--three,
.care-beat, .care-beat--one, .care-beat--two, .care-beat--three, .care-beat--four {
  filter: none !important;
}

/* Short devices: compositions compress, narrative still occupies a full stage. */
@media (max-height: 670px) {
  .chapter .scene { min-height: 480px; }
  .display--names { font-size: clamp(3.6rem,17vw,5.7rem); }
  .lead { margin-top:1rem; line-height:1.85; }
  .story-beats { height:68svh; }
  .beat h2 { font-size:clamp(2.7rem,13vw,4.1rem); }
  .beat p:last-child { margin-top:.7rem; line-height:1.8; }
  .portrait-frame { top:4%; height:55svh; }
  .portrait-copy { bottom:6%; }
  .night-composition > h2 { margin-bottom:.8rem; font-size:clamp(3.1rem,15vw,4.7rem); }
  .night-timeline li { min-height:76px; padding-block:.65rem; }
  .night-timeline li::before { top:1.08rem; }
  .night-timeline li::after { top:1.76rem; }
  .care-beats { height:72svh; }
  .care-beat h2 { font-size:clamp(2.7rem,12.5vw,4.3rem); }
  .care-beat > p:not(.care-kicker) { line-height:1.85; font-size:.82rem; }
  .countdown > div { min-height:94px; }
  .rsvp-form { gap:.55rem; padding:.8rem; }
  .rsvp-intro { margin:.45rem 0 .7rem; line-height:1.65; }
  .rsvp-field input { min-height:43px; }
  .rsvp-choice__options span { min-height:42px; }
  .rsvp-submit { min-height:44px; }
}


@media (max-width: 360px) {
  .chapter .scene { padding-inline:16px; }
  .display--names { font-size:3.55rem; }
  .beat h2 { font-size:2.8rem; }
  .portrait-copy { right:16px; width:84vw; }
  .countdown > div { min-height:100px; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .opening { grid-template-rows:1fr; }
  .opening__kicker,.opening__hint { display:none; }
  .envelope { --w:min(34vw,calc(84svh * .72),290px); }
  .chapter { min-height:760px; }
  .chapter .scene { min-height:100dvh; padding-block:12px; }
  .scene__copy,.date-composition,.night-composition,.venue-composition,.countdown-composition,.rsvp-composition { transform:scale(.82); }
.portrait-frame { width:33vw;height:80svh;left:29%;top:10%; }
  .portrait-copy { right:55%;bottom:16%;width:38vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .chapter { height:auto; min-height:100svh; }
  .chapter--story,.chapter--night,.chapter--venue,.chapter--care,.chapter--rsvp { height:auto; min-height:100svh; }
  .chapter .scene { position:relative; min-height:100svh; height:auto; padding-block:70px; }
  .beat { position:relative; opacity:1 !important; filter:none !important; transform:none !important; min-height:55svh; }
.care-beat { position:relative; opacity:1 !important; filter:none !important; transform:none !important; min-height:62svh; }
  .care-beats { height:auto; max-height:none; }
  .story-beats { height:auto; max-height:none; }
  .night-timeline li { opacity:1 !important; transform:none !important; }
  .rings { display:none !important; }
  .portrait-frame,.map-lines,.closing-photo { transform:none !important; }
}

/* ===== Curated 7-page edition: gesture chooses a page, the site performs the movement. ===== */
html { scroll-behavior: auto !important; }
body.invitation-open {
  overflow-y: auto;
  overscroll-behavior-y: none;
  scrollbar-width: none;
}
body.invitation-open::-webkit-scrollbar { width: 0; height: 0; }
body.is-page-moving { user-select: none; }

/* Every requested frame is exactly one viewport high. */
.chapter,
.chapter--beginning,
.chapter--we,
.chapter--date,
.chapter--night,
.chapter--venue,
.chapter--rsvp,
.chapter--final {
  height: 100svh !important;
  height: 100dvh !important;
  min-height: 100svh !important;
}
.chapter .scene {
  position: relative !important;
  top: auto !important;
  height: 100svh !important;
  height: 100dvh !important;
  min-height: 100svh !important;
}

/* Rings are visual actors during the slide; the whole empty page remains swipeable. */
.rings { pointer-events: none; touch-action: none; }

/* Keep the full night plan legible when the page is resting. */
.chapter--night .night-timeline li {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

.venue-composition { width:min(100%,520px); }
.venue-composition h2 { line-height:1.06; }
.venue-address {
  max-width: 31rem;
  margin-inline: auto;
  line-height: 1.9;
  text-wrap: balance;
}

/* Final frame: "منتظرتان هستیم" and countdown share one composition, with no empty top. */
.chapter--final { background: var(--cream); color: var(--text); }
.chapter--final .scene {
  align-items: start;
  padding-top: max(44px, 6svh);
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}
.final-composition {
  width: min(100%, 520px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 5;
}
.final-prelude {
  margin: 0 0 .3rem;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.9;
}
.final-title {
  margin: 0;
  font-family: "Amiri", serif;
  font-size: clamp(3.1rem, 15vw, 5.2rem);
  line-height: 1.05;
  color: var(--green-dark);
}
.final-date {
  margin: .45rem 0 0;
  color: var(--gold);
  font-size: .7rem;
}
.final-rule {
  width: 1px;
  height: clamp(18px, 3svh, 30px);
  margin: .65rem auto .55rem;
  background: linear-gradient(var(--gold), transparent);
}
.final-countdown-title {
  margin: 0 0 .7rem;
  font-family: "Amiri", serif;
  font-size: clamp(2rem, 9.8vw, 3.35rem);
  font-weight: 700;
  color: var(--green-dark);
}
.chapter--final .countdown { width:100%; }
.final-names {
  margin: .7rem 0 0;
  font-family: "Amiri", serif;
  font-size: 1.2rem;
  color: var(--green-dark);
}

/* The RSVP is a single page now, so tighten it rather than making the page itself scroll. */
.chapter--rsvp .rsvp-composition { transform-origin: center; }

@media (max-height: 760px) {
  .chapter--rsvp .rsvp-composition { transform: scale(.93); }
  .chapter--final .scene { padding-top: max(28px, 3.5svh); }
  .final-prelude { font-size:.7rem; }
  .final-title { font-size:clamp(2.7rem,12.5vw,4.4rem); }
  .final-rule { margin:.4rem auto; height:18px; }
  .final-countdown-title { font-size:clamp(1.8rem,8.5vw,2.8rem); margin-bottom:.45rem; }
  .chapter--final .countdown > div { min-height:82px; }
  .final-names { margin-top:.45rem; }
}

@media (max-height: 650px) {
  .chapter--rsvp .rsvp-composition { transform: scale(.84); }
  .chapter--night .night-composition { transform: scale(.9); }
  .chapter--venue .venue-composition { transform: scale(.9); }
}

@media (prefers-reduced-motion: reduce) {
  .chapter,
  .chapter--beginning,
  .chapter--we,
  .chapter--date,
  .chapter--night,
  .chapter--venue,
  .chapter--rsvp,
  .chapter--final { height:100dvh !important; min-height:100svh !important; }
  .chapter .scene { height:100dvh !important; min-height:100svh !important; padding-block:var(--safe-t) var(--safe-b); }
}

/* Stable mobile stage: gestures never drag the document or fight the browser chrome. */
body.invitation-open .experience { touch-action: none; }
body.invitation-open a,
body.invitation-open button,
body.invitation-open input,
body.invitation-open textarea,
body.invitation-open select { touch-action: manipulation; }

.chapter,
.chapter--beginning,
.chapter--we,
.chapter--date,
.chapter--night,
.chapter--venue,
.chapter--rsvp,
.chapter--final,
.chapter .scene {
  height: 100svh !important;
  min-height: 100svh !important;
}