/* دعوت‌نامه امیرحسین و مهسا — طراحی مستقل، راست‌به‌چپ و سازگار با موبایل */
:root {
  --forest: #173e37;
  --forest-deep: #102c29;
  --forest-light: #355b52;
  --gold: #b99864;
  --gold-light: #dac39b;
  --cream: #f8f5ee;
  --paper: #fffcf5;
  --ink: #273b34;
  --muted: #728078;
  --serif: 'Noto Naskh Arabic', Georgia, serif;
  --sans: 'Vazirmatn', Tahoma, sans-serif;
  --english: 'Cormorant Garamond', Georgia, serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4rem; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body.page-locked { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid #dfbb77; outline-offset: 5px; }
[hidden] { display: none !important; }
::selection { background: #d2bf94; color: var(--forest-deep); }
.ambient-grain { pointer-events: none; position: fixed; inset: 0; z-index: 200; opacity: .11; 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E"); }

/* 01 — opening scene */
.opening { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse 63% 72% at 50% 47%, #2e5a4e 0%, #1b443c 57%, #11322f 100%); color: #f4eddc; transition: opacity 1s ease, visibility 1s ease; }
.opening.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.opening::before { content: ''; position: absolute; inset: 17px; border: 1px solid rgba(218,195,155,.24); pointer-events: none; }
.opening::after { content: ''; position: absolute; inset: 28px; border: 1px solid rgba(218,195,155,.09); pointer-events: none; }
.opening-aura { pointer-events: none; position: absolute; border-radius: 50%; filter: blur(8px); opacity: .5; }
.opening-aura--one { width: min(66vw,560px); aspect-ratio: 1; background: radial-gradient(circle, rgba(210,188,140,.16), transparent 69%); top: -20%; right: -14%; animation: glowBreath 10s ease-in-out infinite alternate; }
.opening-aura--two { width: min(82vw,690px); aspect-ratio: 1; background: radial-gradient(circle, rgba(245,235,201,.08), transparent 65%); bottom: -30%; left: -15%; animation: glowBreath 11s ease-in-out infinite alternate-reverse; }
.botanical { pointer-events: none; position: absolute; user-select: none; opacity: .34; width: clamp(160px, 27vw, 365px); }
.botanical--opening-right { top: -70px; right: -20px; transform: rotate(188deg); }
.botanical--opening-left { bottom: -85px; left: -28px; transform: rotate(5deg); }
.opening-content { position: relative; z-index: 1; width: 100%; text-align: center; padding: 34px 22px 50px; display: flex; flex-direction: column; align-items: center; }
.eyebrow { margin: 0; font-size: .79rem; letter-spacing: .8px; color: var(--gold); font-weight: 600; }
.eyebrow--light { font-size: .82rem; letter-spacing: .5px; color: #e5d0a9; }
.little-star { display: inline-block; font-size: 1.2em; padding: 0 8px; color: #c9b080; }
.opening-monogram { direction: ltr; margin-top: 9px; font: 500 clamp(36px, 5vw, 56px)/1.1 var(--english); letter-spacing: 3px; color: #e9d6ab; text-shadow: 0 1px 20px #0001; }
.opening-monogram span { font-size: .65em; font-style: italic; vertical-align: 3px; }
.opening-title { margin: 10px 0 2px; font-family: var(--serif); font-size: clamp(21px, 3vw, 29px); font-weight: 500; color: #f7f3e8; }
.opening-subtitle { margin: 3px 0 0; color: #d8c5a5; font-size: .9rem; }
.envelope-button { display: block; position: relative; appearance: none; background: transparent; border: 0; width: min(92vw, 440px); height: min(68vw, 315px); min-height: 210px; margin-top: 3px; padding: 0; cursor: pointer; transform: translateZ(0); }
.envelope-button:disabled { cursor: default; }
.envelope-scene { position: absolute; inset: 0; display: block; perspective: 1300px; }
.envelope-shadow { position: absolute; z-index: 0; width: 78%; height: 22px; background: #030b095e; filter: blur(18px); left: 11%; bottom: 6%; border-radius: 50%; transition: transform 1.4s ease, opacity 1.4s ease; }
.envelope-back, .envelope-front, .envelope-flap { position: absolute; left: 8%; width: 84%; top: 24%; height: 64%; }
.envelope-back { z-index: 1; border-radius: 3px 3px 9px 9px; background: linear-gradient(140deg, #e0d3bc 0%, #e8d9c1 60%, #c7b494 100%); box-shadow: 0 4px 30px rgba(0,0,0,.15); }
.envelope-back::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 47.7%, #b59b71 50%, transparent 50.6%); opacity: .12; }
.envelope-letter { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; left: 19%; width: 62%; top: 29%; height: 57%; border: 1px solid rgba(191,165,123,.72); outline: 4px solid #f6f0e4; outline-offset: -9px; background: linear-gradient(120deg, #fffdf6, #f6f0e3); box-shadow: 0 0 15px #0002; color: #b1976a; transition: transform 1.1s cubic-bezier(.22,.7,.2,1), box-shadow .9s ease; transform: translateY(0); }
.letter-small { margin-top: 27px; font: 500 11px var(--english); letter-spacing: 2px; }
.letter-monogram { margin-top: 2px; font: 600 clamp(30px, 6vw, 45px)/1.05 var(--english); direction: ltr; color: #496a5c; }
.letter-monogram i { font-size: .7em; font-weight: 400; }
.letter-line { display: block; width: 48px; height: 1px; background: #c5ac81; margin-top: 9px; }
.letter-persian { font-family: var(--serif); color: #76664e; font-size: 12px; margin-top: 7px; }
.envelope-front { z-index: 4; overflow: hidden; border-radius: 0 0 9px 9px; pointer-events: none; }
.envelope-fold { display: block; position: absolute; inset: 0; }
.envelope-fold--left { background: linear-gradient(145deg, #e2d1b6, #d5bea0); clip-path: polygon(0 0, 56% 51%, 0 100%); }
.envelope-fold--right { background: linear-gradient(215deg, #e5d6be, #d6c09e); clip-path: polygon(100% 0, 44% 51%, 100% 100%); }
.envelope-fold--bottom { background: linear-gradient(175deg, #eddcc2 0%, #d7c3a4 100%); clip-path: polygon(0 100%, 50% 34%, 100% 100%); }
.envelope-flap { z-index: 5; height: 46%; top: 24%; transform-origin: 50% 0%; transform: rotateX(0deg); backface-visibility: visible; transition: transform .95s cubic-bezier(.4,.04,.16,.97), z-index 0s .47s; background: linear-gradient(150deg, #f0e2cd, #d9c4a7); clip-path: polygon(0 0,100% 0,50% 97%); filter: drop-shadow(0 2px 2px #866c492b); }
.wax-seal { position: absolute; z-index: 6; top: 49%; left: 50%; transform: translate(-50%, -50%); width: clamp(49px, 10vw, 60px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 28% 23%, #d9bb80, #b48b55 74%, #997046); box-shadow: 0 3px 8px #6d513f5b, inset 0 0 0 3px #bfa06b, inset 0 0 0 5px #f0dcb45b; color: #ffefd1; font-size: 21px; transition: opacity .3s ease .1s, transform .55s ease; }
.wax-seal span { border: 1px solid #f4d9a799; border-radius: 50%; width: 38px; height: 38px; display: grid; place-items: center; }
.envelope-button:not(:disabled):hover .envelope-scene { animation: gentleFloat 2.4s ease-in-out infinite; }
.opening--active .envelope-button .envelope-scene { animation: none; }
.opening--active .envelope-flap { transform: rotateX(180deg); z-index: 1; }
.opening--active .wax-seal { opacity: 0; transform: translate(-50%, -50%) scale(.65); }
.opening--active .envelope-letter { transform: translateY(-63%); transition-delay: .53s; box-shadow: 0 7px 30px #1c30263b; }
.opening--active .envelope-shadow { transform: scaleX(1.2); opacity: .44; }
.opening--active .open-help { opacity: 0; }
.open-help { display: flex; align-items: center; gap: 10px; justify-content: center; color: #eadfc9; font-size: .82rem; letter-spacing: .1px; margin: 2px 0 0; opacity: .95; transition: opacity .4s ease; }
.tap-pulse { display: block; width: 7px; height: 7px; border: 1px solid #ead3a7; border-radius: 50%; animation: pulse 1.8s ease-out infinite; }
.opening-bottom { direction: ltr; position: absolute; bottom: min(6vh, 44px); left: 50%; transform: translateX(-50%); white-space: nowrap; display: flex; gap: 14px; align-items: center; color: #cdb98f; opacity: .75; font: 600 10px var(--english); letter-spacing: 2px; }
.opening-bottom span { display: inline-block; width: 38px; height: 1px; background: #b4a17991; }

/* 02 — letter page, masthead and hero */
.invitation { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .9s ease; position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 0%, #fcf9f2, #f5f2ea 58%, #f2eee5); }
.invitation.is-visible { opacity: 1; pointer-events: auto; visibility: visible; }
.topbar { position: relative; z-index: 15; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; max-width: 1100px; margin: auto; padding: 19px 27px 0; color: #456056; direction: ltr; }
.topbar-mark { direction: ltr; font: 600 23px var(--english); letter-spacing: 1px; white-space: nowrap; }
.topbar-mark span { font-style: italic; font-size: .7em; }
.topbar-label { font: 500 11px var(--english); letter-spacing: 2px; white-space: nowrap; }
.music-control { justify-self: end; min-height: 38px; display: flex; align-items: center; justify-content: center; flex-direction: row-reverse; gap: 7px; padding: 7px 11px; border: 1px solid #cec3aa; border-radius: 50px; color: #446054; background: #fffcf1cf; cursor: pointer; font-size: .73rem; direction: rtl; }
.music-control .sound-off { display: none; }
.music-control.is-paused .sound-on { display: none; }
.music-control.is-paused .sound-off { display: block; }
.hero { position: relative; min-height: min(890px, 100svh); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 43px 20px 96px; isolation: isolate; }
.hero::before { content: ''; position: absolute; z-index: -1; width: min(88vw, 740px); height: min(85vw, 740px); border: 1px solid #ba9a6050; border-radius: 50%; top: 49%; left: 50%; transform: translate(-50%, -50%); }
.hero::after { content: ''; position: absolute; z-index: -1; width: min(82vw, 690px); height: min(80vw, 690px); border: 1px solid #ba9a6024; border-radius: 50%; top: 49%; left: 50%; transform: translate(-50%, -50%); }
.botanical--hero-right { top: -55px; right: -19px; transform: rotate(184deg); opacity: .49; }
.botanical--hero-left { bottom: -50px; left: -17px; transform: rotate(4deg); opacity: .5; }
.hero-halo { z-index: -2; pointer-events: none; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 53% at 50% 47%, #ffffffbd 0%, transparent 74%); }
.hero-content { position: relative; margin: 0 auto; }
.hero-first { color: #9b815a; }
.hero-first .eyebrow { font: 500 18px var(--serif); color: #7e7d61; }
.rings-wrap { width: 200px; margin: 8px auto -2px; }
.rings-wrap img { display: block; width: 100%; height: auto; }
.hero-kicker { margin: 3px 0 6px; font-size: .84rem; letter-spacing: .1px; color: #88958a; }
.couple-names { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: clamp(10px, 3vw, 29px); margin: 0; font-family: var(--serif); font-size: clamp(52px, 8vw, 97px); font-weight: 700; line-height: 1.48; color: #28493f; text-shadow: 0 3px 0 #fff4; }
.couple-names em { font-size: .41em; font-style: normal; font-weight: 400; color: #af9464; }
.small-divider { display: flex; justify-content: center; align-items: center; gap: 17px; margin: 14px auto 16px; color: #b69a6b; }
.small-divider span { width: 56px; height: 1px; background: linear-gradient(90deg, transparent, #b79d6a); }
.small-divider span:last-child { transform: rotate(180deg); }
.small-divider i { font: normal 16px Georgia,serif; }
.hero-poem { margin: 0; font-family: var(--serif); font-size: clamp(17px, 2.35vw, 23px); line-height: 2.22; color: #486456; }
.poet { margin: 5px 0 0; color: #aa946e; font: 500 13px var(--serif); }
.scroll-cue { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; color: #7b8b7e; font-size: .74rem; animation: cueMove 2s ease-in-out infinite; }
.reveal { opacity: 0; transform: translateY(18px); animation: revealIntro .85s cubic-bezier(.2,.8,.2,1) forwards; animation-play-state: paused; }
.invitation.is-visible .reveal { animation-play-state: running; }
.hero-first { animation-delay: .18s; }.hero-second { animation-delay: .32s; }.hero-third { animation-delay: .48s; }.hero-fourth { animation-delay: .63s; }.hero-fifth { animation-delay: .78s; }.hero-sixth { animation-delay: .92s; }.hero-seventh { animation-delay: 1.03s; }

/* 02B — illustrated tango dancers: self-contained animated asset + enchanted backdrop */
.hero { min-height: max(805px, 100svh); padding-top: 30px; padding-bottom: 110px; }
.rings-wrap { width: 124px; margin: 2px auto -8px; }
.hero-dance { animation-delay: .8s; }
.hero-fifth { animation-delay: 1.02s; }
.hero-sixth { animation-delay: 1.14s; }
.hero-seventh { animation-delay: 1.26s; }
.dance-stage {
  position: relative; isolation: isolate; display: grid; place-items: center;
  width: min(90vw, 385px); height: 338px; margin: -3px auto 9px;
  user-select: none; -webkit-user-select: none;
}
.dance-aura {
  position: absolute; z-index: -3; width: 74%; aspect-ratio: 1;
  border-radius: 50%; top: 5%; left: 13%;
  background: radial-gradient(circle, #f6dcd2 0%, #f5e8d69e 35%, #fff8ee00 73%);
  filter: blur(13px);
  animation: danceGlow 5s ease-in-out infinite alternate;
}
.dance-orbit {
  position: absolute; z-index: -2; top: 13%; bottom: 6%; left: 13%; right: 13%;
  border: 1px dashed #bfa47b70; border-radius: 50%;
  box-shadow: 0 0 0 8px #e7d6b01a, inset 0 0 38px #e6cfab22;
}
.dance-orbit::before, .dance-orbit::after { content: '✧'; position: absolute; font: 24px Georgia, serif; color: #bd9f69; }
.dance-orbit::before { top: 6%; left: 12%; }
.dance-orbit::after { right: 8%; bottom: 14%; font-size: 16px; }
.dance-picture { display: block; position: relative; z-index: 2; width: min(93%, 333px); margin: -9px auto 0; animation: danceFloat 4.7s ease-in-out infinite; filter: drop-shadow(0 10px 8px #a67b6940); }
.dance-illustration { display: block; width: 100%; height: auto; object-fit: contain; }
.dance-floor { position: absolute; z-index: -1; left: 23%; right: 23%; bottom: 26px; height: 18px; border-radius: 50%; background: #9a7f7154; filter: blur(12px); }
.dance-sparkle { position: absolute; color: #c6a368; font-family: Georgia,serif; pointer-events: none; animation: sparklePulse 3s ease-in-out infinite; }
.dance-sparkle--one { top: 11%; right: 6%; font-size: 27px; }
.dance-sparkle--two { top: 40%; left: 4%; font-size: 14px; animation-delay: -1.2s; }
.dance-sparkle--three { bottom: 23%; right: 9%; font-size: 21px; animation-delay: -2s; }
.dance-petal { position: absolute; z-index: 3; pointer-events: none; width: 10px; height: 17px; border-radius: 90% 10% 65% 15%; background: linear-gradient(145deg,#d897a5,#e5b8be); opacity: .78; animation: waltzPetal 5.5s ease-in-out infinite; }
.dance-petal--one { left: 15%; top: 19%; transform: rotate(-40deg); }
.dance-petal--two { right: 9%; top: 47%; width: 8px; height: 13px; animation-delay: -2s; }
.dance-petal--three { left: 14%; bottom: 21%; width: 7px; height: 12px; animation-delay: -3.4s; }
.dance-caption { position: absolute; z-index: 3; bottom: -7px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 500 18px/1.5 var(--serif); color: #9c8268; letter-spacing: .25px; }
.dance-stage + .small-divider { margin-top: 17px; }
@keyframes danceFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes danceGlow { from { opacity: .55; transform: scale(.94); } to { opacity: .85; transform: scale(1.07); } }
@keyframes sparklePulse { 0%,100% { opacity: .45; transform: scale(.8) rotate(-12deg); } 50% { opacity: 1; transform: scale(1.2) rotate(12deg); } }
@keyframes waltzPetal { 0%,100% { opacity: .35; translate: 0 0; rotate: -16deg; } 50% { opacity: .9; translate: 8px -14px; rotate: 20deg; } }

/* 03 — message card */
.section-wrap { width: min(100% - 36px, 1010px); margin-inline: auto; }
.message-section { padding: 42px 0 71px; }
.invitation-paper { max-width: 795px; margin: auto; position: relative; background: #fffdf7; border: 1px solid #d5c6aa; box-shadow: 0 20px 75px #30423910, 0 2px 8px #30423907; padding: 10px; }
.invitation-paper::before { content: ''; position: absolute; inset: -10px; border: 1px solid #d0c1a370; pointer-events: none; }
.paper-inner { position: relative; min-height: 390px; border: 1px solid #dccbae; padding: 65px 36px 59px; text-align: center; background: radial-gradient(ellipse at 50% 80%, #f9f3e8a0, transparent 62%); }
.paper-corner { position: absolute; color: #b9a078; font-size: 28px; line-height: 1; opacity: .9; }
.paper-corner--tl { top: 8px; left: 17px; transform: rotate(135deg); }
.paper-corner--tr { top: 8px; right: 17px; transform: rotate(45deg); }
.paper-corner--bl { bottom: 8px; left: 17px; transform: rotate(225deg); }
.paper-corner--br { bottom: 8px; right: 17px; transform: rotate(-45deg); }
.section-kicker { color: #b09166; font-size: .8rem; margin: 0 0 13px; }
.message-title { font: 600 clamp(28px, 4vw, 40px)/1.7 var(--serif); color: var(--forest); margin: 0; }
.message-ornament { font-size: 29px; color: #bb9c65; margin: 2px 0 10px; }
.message-copy { font-family: var(--serif); font-size: clamp(17px, 2.2vw, 21px); line-height: 2.2; color: #526457; margin: 15px auto; }
.message-copy--emph { color: #314d41; }
.signature { font-size: .92rem; color: #aa926b; margin: 28px 0 0; }
.signature strong { font-weight: 600; color: #446b54; }

/* 04 — event time and countdown */
.info-section { padding: 26px 0 98px; }
.section-heading { text-align: center; margin-bottom: 34px; }
.section-heading h3 { font: 600 clamp(29px, 4vw, 43px)/1.55 var(--serif); margin: 4px 0 0; color: var(--forest); }
.tiny-ornament { font: 22px Georgia,serif; color: var(--gold); }
.detail-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 23px; max-width: 780px; margin: auto; }
.detail-card { background: #fffdf9c9; border: 1px solid #daccb6; min-height: 221px; padding: 33px 22px 26px; text-align: center; box-shadow: 0 10px 35px #283d3210; position: relative; }
.detail-card::before { position: absolute; content: ''; inset: 7px; border: 1px solid #d9c9aa4d; pointer-events: none; }
.detail-icon { color: #b29368; margin-bottom: 6px; }
.detail-label { color: #9a907e; font-size: .8rem; margin: 3px 0 7px; }
.detail-value { font: 600 clamp(19px, 2.4vw, 25px)/1.9 var(--serif); color: #32574b; margin: 0; }
.detail-hint { color: #a09c91; font-size: .76rem; margin: 2px 0 0; }
.countdown { max-width: 540px; margin: 46px auto 0; text-align: center; }
.countdown-title { color: #607d6b; font-family: var(--serif); font-size: 21px; }
.countdown-grid { direction: rtl; display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.countdown-grid>div { background: #fefcf7; border: 1px solid #d8c8aa; padding: 15px 8px; }
.countdown-grid strong { display: block; font: 600 27px var(--sans); color: var(--forest); }
.countdown-grid span { display: block; font-size: 11px; color: #8c967c; }

/* 05 — location */
.location-section { padding: 13px 0 105px; }
.location-card { position: relative; max-width: 810px; margin: auto; overflow: hidden; padding: 51px 30px 47px; text-align: center; border: 1px solid #8b9f8e; background: radial-gradient(ellipse at 50% 15%, #315b4e 0%, #1d463d 56%, #12352f 100%); box-shadow: 0 18px 55px #0f332b36; color: #f2e8d3; }
.location-card::before { content: ''; position: absolute; inset: 11px; border: 1px solid #c2b18a58; pointer-events: none; }
.location-leaf { position: absolute; width: 220px; opacity: .3; pointer-events: none; }
.location-leaf--one { right: -60px; top: -52px; transform: rotate(190deg); }
.location-leaf--two { left: -50px; bottom: -80px; transform: rotate(0deg); }
.location-card>*:not(.location-leaf) { position: relative; }
.location-pin { color: #cfb487; margin: 0 auto 13px; }
.location-eyebrow { font: 500 13px var(--english); direction: ltr; letter-spacing: 3px; color: #d1b98b; margin: 0; }
.location-card h3 { color: #fff9eb; font: 600 clamp(37px, 5vw, 55px)/1.6 var(--serif); margin: 4px 0 0; }
.location-description { font-size: .81rem; color: #d2c8b0; margin: 0; }
.location-rule { width: 70px; height: 1px; margin: 26px auto 21px; background: #c4ae80; opacity: .75; }
.address { font-family: var(--serif); font-size: clamp(18px, 2.3vw, 21px); line-height: 2.1; color: #f2eee1; max-width: 550px; margin: 0 auto 28px; }
.map-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.primary-btn, .outline-btn { display: inline-flex; justify-content: center; align-items: center; gap: 9px; min-width: 185px; min-height: 49px; padding: 11px 20px; border-radius: 3px; text-decoration: none; font-weight: 600; font-size: .87rem; transition: transform .23s ease, background-color .23s ease, box-shadow .23s ease; }
.primary-btn { background: #d5b882; color: #223b32; box-shadow: 0 7px 20px #10291c53; }
.outline-btn { color: #f1e7d0; border: 1px solid #d4bc8d8c; background: #ffffff0c; }
.primary-btn:hover, .outline-btn:hover { transform: translateY(-3px); }
.primary-btn:hover { background: #e9cea1; }
.outline-btn:hover { background: #f2ebdc15; }
.copy-address { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 22px auto 0; color: #e4d7bd; border: 0; border-bottom: 1px solid #cbb58e71; padding: 3px 2px 6px; background: transparent; font-size: .78rem; cursor: pointer; }
.copy-address:hover { color: #fff; }

/* 06 — footer */
.footer { background: #f0ebdf; padding: 44px 20px 32px; text-align: center; border-top: 1px solid #ddd0b6; }
.footer-flower { font-size: 34px; line-height: 1; color: #bba071; }
.footer p { font-family: var(--serif); font-size: 19px; color: #557062; margin: 11px 0 0; }
.footer .footer-names { font-family: var(--serif); font-size: 26px; color: #244c40; font-weight: 600; }
.footer-names span { color: #ae8a62; font-size: 17px; margin: 0 7px; }
.replay { display: block; margin: 31px auto 37px; border: 0; border-bottom: 1px solid #9ea899; background: transparent; color: #6f8272; padding: 5px 0; cursor: pointer; font-size: .75rem; }
.replay:hover { color: var(--forest); }
.footer-mark { direction: ltr; font: 600 13px var(--english); letter-spacing: 3px; color: #a6a48d; }

/* accents and interactions */
.petals { position: fixed; z-index: 10; inset: 0; overflow: hidden; pointer-events: none; }
.petal { width: 8px; height: 14px; position: absolute; top: -32px; left: var(--left); opacity: .42; border-radius: 90% 0 90% 8%; background: linear-gradient(135deg, #bda36a, #f4dfb6); transform: rotate(-35deg) scale(var(--scale)); animation: petalFall var(--duration) linear var(--delay) infinite; }
.toast { position: fixed; z-index: 300; left: 50%; bottom: 27px; transform: translate(-50%, 20px); white-space: nowrap; pointer-events: none; padding: 12px 19px; color: #fffdf3; background: #1e463d; border: 1px solid #d0b98d; box-shadow: 0 7px 30px #0f261c38; border-radius: 5px; font-size: .82rem; opacity: 0; transition: opacity .25s ease, transform .25s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.observe-reveal { opacity: 0; transform: translateY(31px); transition: opacity .85s ease, transform .85s cubic-bezier(.25,.78,.2,1); }
.observe-reveal.visible { opacity: 1; transform: translateY(0); }
.detail-card:nth-child(2) { transition-delay: .12s; }

@keyframes pulse { 0% { box-shadow: 0 0 0 0 #ddbc82a0; } 80%,100% { box-shadow: 0 0 0 10px #ddbc8200; } }
@keyframes gentleFloat { 0%,100% { transform: translateY(0) rotate(-.5deg); } 50% { transform: translateY(-5px) rotate(.5deg); } }
@keyframes glowBreath { from { opacity: .4; transform: scale(.87); } to { opacity: .85; transform: scale(1.15); } }
@keyframes revealIntro { to { opacity: 1; transform: translateY(0); } }
@keyframes cueMove { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,7px); } }
@keyframes petalFall { 0% { transform: translate3d(0,-20px,0) rotate(0deg) scale(var(--scale)); opacity: 0; } 7% { opacity: .43; } 90% { opacity: .36; } 100% { transform: translate3d(76px,110vh,0) rotate(420deg) scale(var(--scale)); opacity: 0; } }

@media (max-width: 700px) {
  .opening::before { inset: 10px; }.opening::after { inset: 17px; }
  .botanical--opening-right { width: 220px; top: -65px; right: -80px; }
  .botanical--opening-left { width: 230px; bottom: -68px; left: -85px; }
  .opening-content { padding-top: 0; padding-bottom: 10px; }
  .opening-title { font-size: 24px; }
  .opening-monogram { font-size: 44px; }
  .envelope-button { height: 270px; width: min(96vw, 400px); }
  .letter-small { font-size: 10px; margin-top: 23px; }.letter-monogram { font-size: 36px; }
  .open-help { font-size: .78rem; }
  .opening-bottom { bottom: 29px; font-size: 9px; }
  .topbar { padding: 16px 20px 0; grid-template-columns: 1fr auto 1fr; }
  .topbar-label { letter-spacing: 1px; font-size: 9px; }
  .music-control { font-size: 0; width: 36px; height: 36px; min-height: 36px; padding: 0; }
  .music-control svg { width: 16px; }
  .hero { min-height: 780px; min-height: max(725px, 100svh); padding-top: 60px; padding-bottom: 80px; }
  .hero::before { width: 102vw; height: 102vw; }.hero::after { width: 94vw; height: 94vw; }
  .botanical--hero-right { width: 195px; top: 2px; right: -88px; }
  .botanical--hero-left { width: 210px; bottom: -70px; left: -110px; }
  .rings-wrap { width: 188px; margin: 13px auto -5px; }
  .couple-names { gap: 10px; font-size: clamp(47px, 11.4vw, 70px); }
  .hero-poem { line-height: 2.3; font-size: clamp(15.4px, 4.1vw, 19px); }
  .section-wrap { width: min(100% - 45px, 1010px); }
  .message-section { padding: 40px 0 60px; }
  .paper-inner { padding: 54px 19px 52px; }
  .message-title { font-size: 28px; }
  .message-copy { font-size: 17px; }
  .desktop-break { display: none; }
  .detail-cards { gap: 12px; }
  .detail-card { min-height: 204px; padding: 27px 12px 22px; }
  .detail-value { font-size: 19px; }
  .detail-date { font-size: 17px; }
  .info-section { padding-bottom: 78px; }
  .location-section { padding-bottom: 80px; }
  .location-card { padding: 49px 19px 41px; }
  .map-actions { flex-direction: column; }
  .primary-btn, .outline-btn { width: min(100%, 300px); }
}
@media (max-width: 450px) {
  .opening-title { font-size: 21px; }
  .opening-subtitle { font-size: .81rem; }
  .envelope-button { height: 247px; }
  .letter-small { margin-top: 23px; }.letter-monogram { font-size: 31px; }
  .letter-persian { font-size: 10px; }
  .wax-seal span { width: 31px; height: 31px; }
  .topbar { padding-inline: 15px; gap: 5px; }.topbar-label { font-size: 8px; }
  .hero { padding-inline: 12px; }
  .hero-first .eyebrow { font-size: 17px; }
  .couple-names { gap: 6px; font-size: clamp(41px, 11vw, 53px); }
  .hero-poem { font-size: 15.3px; }
  .detail-cards { grid-template-columns: 1fr; max-width: 400px; gap: 14px; }
  .detail-card { min-height: 186px; }
  .section-heading { margin-bottom: 23px; }
  .paper-inner { padding-inline: 12px; }
  .paper-corner { font-size: 22px; }
  .message-title { font-size: 25px; }
  .location-leaf { width: 180px; }
  .address { font-size: 17px; }
}
@media (max-height: 650px) and (min-width: 700px) {
  .opening-content { transform: scale(.78); }
  .opening-bottom { bottom: 12px; }
}
@media (max-height: 690px) and (max-width: 699px) {
  .opening-content { transform: scale(.81); }
  .opening-bottom { bottom: 8px; }
}
@media (max-width: 700px) {
  .hero { min-height: max(790px, 100svh); padding-top: 48px; padding-bottom: 109px; }
  .rings-wrap { width: 105px; margin: 0 auto -8px; }
  .dance-stage { width: min(92vw, 344px); height: 305px; margin: -8px auto 5px; }
  .dance-picture { width: min(93%, 306px); }
  .dance-caption { font-size: 17px; bottom: -4px; }
}
@media (max-width: 450px) {
  .hero { min-height: max(775px, 100svh); padding-top: 32px; }
  .rings-wrap { width: 90px; }
  .dance-stage { width: min(94vw, 300px); height: 258px; margin: -10px auto 10px; }
  .dance-picture { width: min(99%, 278px); margin-top: -3px; }
  .dance-floor { bottom: 14px; }
  .dance-caption { bottom: -15px; font-size: 16px; }
  .dance-stage + .small-divider { margin-top: 27px; }
}
@media (max-height: 700px) and (max-width: 450px) {
  .hero { min-height: 765px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal, .observe-reveal { opacity: 1; transform: none; }
  .scroll-cue { animation: none; }
  .petals { display: none; }
}

/* Keep the opening title and envelope in normal flow on every screen. */
.opening-content { gap: 24px; padding: 40px 22px; }
.opening-title { margin: 0; line-height: 1.9; max-width: 100%; }
.topbar { display: flex; justify-content: center; min-height: 70px; padding-inline: 70px; }
.music-control { position: fixed; top: max(16px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); z-index: 100; }
.music-control[hidden] { display: none; }
@media (max-height: 690px) { .opening-content { gap: 8px; } }

/* Refined invitation lettering and a separate, flowing envelope footer. */
.opening-content { gap: 0; padding: 32px 22px; }
.opening-title { display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: 'Noto Naskh Arabic', 'Times New Roman', serif; font-weight: 500; text-shadow: 0 3px 24px #061f1950; }
.opening-title-intro { font-size: clamp(18px, 3vw, 23px); line-height: 1.7; color: #d6c299; }
.opening-title-names { font-size: clamp(32px, 6vw, 49px); line-height: 1.8; color: #f4e5c7; }
.opening-title-and { display: inline-block; font-size: .62em; color: #c9a86e; margin-inline: .12em; }
.opening-title::after { content: ''; width: 90px; height: 1px; margin-top: 6px; background: linear-gradient(90deg, transparent, #d3b37a, transparent); }
.open-help { position: static; margin: 10px 0 0; line-height: 1.9; flex-wrap: wrap; }
.opening-bottom { position: static; transform: none; margin: 24px 0 0; line-height: 1.8; flex-shrink: 0; }
@media (max-width: 450px) { .opening-title-names { font-size: 34px; } .opening-bottom { gap: 12px; } }
@media (max-height: 690px) { .opening-content { gap: 0; padding-block: 18px; } .opening-bottom { margin-top: 18px; } }