:root {
  --ivory: #fbf8f3;
  --cream: #f1e7dc;
  --rose: #dca8a2;
  --rose-deep: #a76464;
  --wine: #553133;
  --gold: #b89456;
  --ink: #352b2a;
  --white: #fffdfa;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
  --shadow: 0 30px 80px rgba(67, 44, 43, .18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ivory); }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--ivory); font-family: var(--sans); }
body.is-locked { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
.skip-link { position: fixed; z-index: 1000; top: 1rem; left: 1rem; transform: translateY(-200%); padding: .8rem 1rem; color: var(--ink); background: white; }
.skip-link:focus { transform: none; }

.opening { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; min-height: 100svh; overflow: hidden; color: var(--white); background: #392a2b; transition: opacity 1s ease, visibility 1s; }
.opening.is-open { opacity: 0; visibility: hidden; pointer-events: none; }
.opening__portrait { position: absolute; inset: 0; }
.opening__portrait img { filter: saturate(.8); transform: scale(1.04); animation: openingZoom 12s ease-out both; }
.opening__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(37,22,23,.86), rgba(48,27,28,.54) 52%, rgba(22,15,15,.18)), linear-gradient(0deg, rgba(31,21,20,.45), transparent 50%); }
.opening__glow { position: absolute; z-index: 1; width: 42rem; height: 42rem; border-radius: 50%; opacity: .28; background: #e5bfa3; filter: blur(120px); transform: translate(-46vw, -38vh); }
.opening__content { position: relative; z-index: 2; width: min(90vw, 780px); margin-right: min(28vw, 26rem); text-align: center; }
.opening h1 { margin: .6rem 0 1.1rem; font-family: var(--serif); font-size: clamp(3rem, 6.7vw, 6.7rem); font-weight: 500; line-height: .93; letter-spacing: -.035em; text-wrap: balance; }
.opening__subtitle { width: min(100%, 630px); margin: 0 auto 2.3rem; font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.75rem); font-style: italic; color: rgba(255,255,255,.86); }
.opening__hint { margin: 1rem 0 0; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; opacity: .58; }
.eyebrow, .chapter { margin: 0 0 1rem; font-size: .69rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.chapter--light { color: #ead3ae; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: .8rem; min-height: 3.5rem; padding: .8rem 1.5rem; border: 1px solid transparent; border-radius: 999px; cursor: pointer; font-size: .76rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; transition: transform .3s ease, background .3s ease, color .3s ease, box-shadow .3s ease; }
.button:hover { transform: translateY(-3px); }
.button:focus-visible, .music-control:focus-visible, .text-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.button--primary { color: var(--wine); background: var(--white); box-shadow: 0 14px 35px rgba(15,8,8,.2); }
.button--primary:hover { background: #f0d9cb; }
.button--light { color: var(--wine); background: var(--white); }
.button--ghost { color: var(--white); border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.08); backdrop-filter: blur(10px); }

.progress { position: fixed; z-index: 80; top: 0; left: 0; width: 100%; height: 3px; background: rgba(255,255,255,.15); }
.progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--rose), var(--gold)); }
.story-nav { position: fixed; z-index: 79; right: 1.35rem; top: 50%; display: grid; gap: .75rem; transform: translateY(-50%); }
.story-nav a { display: block; width: 6px; height: 6px; border-radius: 50%; background: rgba(92,65,62,.3); box-shadow: 0 0 0 1px rgba(255,255,255,.35); transition: transform .25s, background .25s; }
.story-nav a.is-active { transform: scale(1.8); background: var(--gold); }
.music-control { position: fixed; z-index: 82; right: 1.25rem; bottom: 1.25rem; display: flex; align-items: center; gap: .65rem; min-height: 2.9rem; padding: .7rem 1rem; color: var(--white); border: 1px solid rgba(255,255,255,.32); border-radius: 999px; cursor: pointer; background: rgba(54,37,36,.68); box-shadow: 0 10px 30px rgba(31,18,18,.2); backdrop-filter: blur(12px); }
.music-control__label { font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; }
.music-control__bars { display: flex; align-items: center; gap: 2px; height: 13px; }
.music-control__bars i { width: 2px; height: 4px; background: #f4d2c3; }
.music-control.is-playing i { animation: equalizer .7s ease-in-out infinite alternate; }
.music-control.is-playing i:nth-child(2) { animation-delay: -.25s; }.music-control.is-playing i:nth-child(3) { animation-delay: -.45s; }
.music-control.is-unavailable { opacity: .65; }

.scene { position: relative; min-height: 100svh; overflow: hidden; }
.scene__content { position: relative; z-index: 3; width: min(88vw, 920px); }
.scene__content--center { text-align: center; }
.scene__content--left { align-self: end; width: min(85vw, 760px); margin: 0 0 10vh 8vw; color: var(--white); }
.scene h2 { margin: 0; font-family: var(--serif); font-size: clamp(2.8rem, 6vw, 6.2rem); font-weight: 500; line-height: .98; letter-spacing: -.035em; text-wrap: balance; }
.lead { max-width: 650px; margin: 1.7rem auto 0; font-family: var(--serif); font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.35; color: #766261; }
.lead--light { margin-left: 0; color: rgba(255,255,255,.85); }
.text-link { display: inline-flex; gap: .6rem; margin-top: 2.4rem; color: var(--wine); font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-decoration: none; text-transform: uppercase; }

.scene--intro { display: grid; place-items: center; padding: 7rem 1rem; background: radial-gradient(circle at 50% 40%, #fffdf9 0, #f7f0e8 58%, #ebdcd2 100%); }
.scene--intro h2 { max-width: 850px; }
.ambient { position: absolute; border-radius: 50%; filter: blur(4px); }
.ambient--one { width: 58vw; height: 58vw; opacity: .26; border: 1px solid var(--rose); box-shadow: inset 0 0 100px #eacac2; }
.scroll-cue { position: absolute; bottom: 2rem; left: 50%; width: 1px; height: 54px; overflow: hidden; background: rgba(78,54,51,.2); }
.scroll-cue span { display: block; width: 100%; height: 55%; background: var(--gold); animation: scrollCue 2s infinite; }

.scene--photo { display: flex; align-items: end; }
.photo-full, .photo-overlay { position: absolute; inset: 0; }
.photo-full img { object-position: 50% 38%; transform: scale(1.08); }
.photo-overlay { background: linear-gradient(90deg, rgba(31,21,21,.78) 0, rgba(39,22,24,.33) 60%, transparent), linear-gradient(0deg, rgba(26,16,17,.72), transparent 52%); }
.scene--photo h2 { max-width: 760px; }

.scene--arrival { display: grid; align-items: center; padding: clamp(5rem, 10vw, 9rem) 7vw; background: var(--ivory); }
.arrival-grid { display: grid; grid-template-columns: minmax(230px, .9fr) minmax(320px, 1.15fr) minmax(160px, .55fr); align-items: center; gap: clamp(2rem, 5vw, 6rem); max-width: 1380px; margin: auto; }
.portrait-card { position: relative; margin: 0; background: white; box-shadow: var(--shadow); }
.portrait-card--large { height: min(70vh, 750px); padding: .65rem; transform: rotate(-2deg); }
.portrait-card--small { align-self: end; height: min(38vh, 410px); padding: .55rem; transform: translateY(4rem) rotate(3deg); }
.portrait-card__number { position: absolute; right: -1.2rem; bottom: -2rem; font-family: var(--serif); font-size: 7rem; color: rgba(184,148,86,.22); }
.arrival-copy h2 { font-size: clamp(2.7rem, 4.6vw, 5rem); }
.arrival-copy .lead { margin-left: 0; }
.script-word { margin: 0 0 .8rem; font-family: var(--serif); font-size: clamp(2rem, 3.5vw, 4rem); font-style: italic; color: var(--rose-deep); }
.gold-line { display: block; width: 80px; height: 1px; margin-top: 2rem; background: var(--gold); }

.scene--memories { padding: clamp(6rem, 10vw, 10rem) 0; background: #efe2d9; }
.memories-heading { width: min(86vw, 880px); margin: 0 auto 4rem; text-align: center; }
.memories-heading h2 { font-size: clamp(2.7rem, 5vw, 5.3rem); }
.memories-heading .script-word { margin-top: 1rem; }
.filmstrip { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 1.2rem; width: 112vw; margin-left: -6vw; }
.memory-card { height: min(54vw, 620px); margin: 0; padding: .55rem; background: #fff; box-shadow: var(--shadow); }
.memory-card--up { transform: rotate(-1.5deg); }.memory-card--down { transform: translateY(3.2rem) rotate(1.5deg); }
.swipe-hint, .filmstrip-nav { display: none; }
.names-card { position: relative; z-index: 2; width: min(88vw, 690px); margin: 8rem auto 0; padding: 3.6rem 2rem; border: 1px solid rgba(184,148,86,.48); text-align: center; background: rgba(255,253,250,.84); backdrop-filter: blur(12px); }
.names-card__ornament { position: absolute; top: -1rem; left: calc(50% - 1rem); width: 2rem; color: var(--gold); background: #efe2d9; }
.names-card p { font-family: var(--serif); font-size: 1.25rem; font-style: italic; color: #866e6b; }
.names-card h3 { margin: .3rem 0 0; font-family: var(--serif); font-size: clamp(2.8rem, 6vw, 5.5rem); font-weight: 500; }
.names-card em { color: var(--gold); font-weight: 400; }

.scene--meaning { display: grid; grid-template-columns: 46% 54%; min-height: 110svh; background: #432c2e; }
.meaning-photo { min-height: 100%; overflow: hidden; }
.meaning-photo img { transform: scale(1.12); }
.meaning-panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(5rem, 8vw, 9rem) clamp(2.5rem, 7vw, 8rem); color: var(--white); }
.meaning-panel h2 { font-size: clamp(2.5rem, 4.2vw, 4.5rem); }
.meaning-list { margin: 2.6rem 0 0; padding: 0; list-style: none; }
.meaning-list li { display: flex; align-items: center; gap: 1.2rem; padding: .9rem 0; border-bottom: 1px solid rgba(255,255,255,.12); font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.8rem); }
.meaning-list span { font-family: var(--sans); font-size: .62rem; letter-spacing: .15em; color: var(--gold); }
.meaning-final { margin: 2rem 0 0; color: #e8c8bb; font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 2rem); font-style: italic; }
.meaning-dedication { max-width: 680px; margin: 2rem 0 0; padding: 1.5rem 0 0 1.4rem; border-top: 1px solid rgba(255,255,255,.14); border-left: 2px solid var(--gold); font-family: var(--sans); font-size: clamp(.82rem, 1.1vw, 1rem); line-height: 1.8; color: rgba(255,255,255,.78); }

.scene--pause { display: grid; place-items: center; padding: 7rem 1rem; background: #faf4ed; }
.scene--pause .scene__content { max-width: 720px; }
.scene--pause h2 { font-size: clamp(4rem, 10vw, 9rem); color: var(--wine); }
.pause-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(240px, .7fr) minmax(340px, 1fr); align-items: center; gap: clamp(2rem, 7vw, 7rem); width: min(90vw, 1180px); }
.memory-video { position: relative; width: min(100%, 390px); aspect-ratio: 9 / 16; max-height: 70svh; margin: 0 auto; padding: .55rem; background: white; box-shadow: var(--shadow); transform: rotate(-2deg); }
.memory-video video { display: block; width: 100%; height: 100%; object-fit: cover; background: #e8d9d1; }
.video-sound { position: absolute; left: 50%; bottom: 1.3rem; transform: translateX(-50%); width: max-content; max-width: calc(100% - 2rem); padding: .75rem 1rem; color: white; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; cursor: pointer; background: rgba(55,35,37,.72); backdrop-filter: blur(10px); font-size: .65rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.video-sound:hover { background: rgba(55,35,37,.92); }
.pause-collage { position: absolute; inset: 0; }
.pause-collage figure { position: absolute; width: clamp(120px, 17vw, 270px); height: clamp(170px, 26vw, 400px); margin: 0; padding: .45rem; opacity: .56; background: white; box-shadow: var(--shadow); }
.pause-collage figure:nth-child(1) { top: 8%; left: 4%; transform: rotate(-7deg); }
.pause-collage figure:nth-child(2) { right: 3%; bottom: 6%; transform: rotate(7deg); }
.pause-collage figure:nth-child(3) { top: 9%; right: 15%; width: clamp(95px, 12vw, 190px); height: clamp(135px, 18vw, 280px); transform: rotate(3deg); }
.heartbeat { display: block; margin-top: 2rem; font-family: var(--serif); font-size: 3rem; color: var(--rose-deep); animation: heartbeat 1.8s ease-in-out infinite; }

.scene--question { display: grid; place-items: center; min-height: 115svh; padding: 7rem 1rem; color: white; }
.question-backdrop, .question-shade { position: absolute; inset: 0; }
.question-backdrop img { object-position: 50% 45%; transform: scale(1.04); }
.question-shade { background: linear-gradient(0deg, rgba(44,22,26,.84), rgba(73,39,44,.5)), radial-gradient(circle at center, transparent, rgba(25,14,16,.42)); backdrop-filter: blur(1px); }
.question-content { position: relative; z-index: 2; width: min(92vw, 990px); text-align: center; }
.question-prelude { font-family: var(--serif); font-size: clamp(1.4rem, 2.5vw, 2.2rem); font-style: italic; color: #f5ddd2; }
.question-content h2 small, .question-content h2 strong { display: block; }
.question-content h2 small { margin-bottom: .2rem; font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 3rem); font-style: italic; font-weight: 400; }
.question-content h2 strong { font-size: clamp(4rem, 12vw, 10rem); font-weight: 500; letter-spacing: .02em; line-height: .84; }
.question-main { margin: 2.2rem 0 .7rem; font-family: var(--serif); font-size: clamp(1.45rem, 3vw, 2.5rem); }
.question-note { color: rgba(255,255,255,.78); }
.answer-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }

.celebration { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; overflow: auto; padding: 2rem 1rem; background: rgba(51,30,32,.84); backdrop-filter: blur(10px); }
.celebration[hidden] { display: none; }
#confettiCanvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.celebration__card { position: relative; z-index: 2; width: min(94vw, 740px); padding: clamp(2.2rem, 6vw, 4.5rem); text-align: center; background: var(--ivory); box-shadow: 0 30px 100px rgba(15,7,8,.35); }
.celebration__card h2 { margin: .5rem 0 1rem; font-family: var(--serif); font-size: clamp(3rem, 7vw, 5.8rem); font-weight: 500; line-height: .95; color: var(--wine); }
.celebration__card > p:not(.eyebrow) { font-family: var(--serif); font-size: 1.35rem; color: #755f5d; }
.celebration__card .celebration__promise { margin: .8rem auto 0; font-size: 1.05rem; font-style: italic; color: var(--rose-deep); }
.celebration__heart { display: block; font-size: 3.3rem; color: var(--rose-deep); animation: heartbeat 1.5s infinite; }
.celebration__photos { display: flex; justify-content: center; height: 170px; margin: 2rem 0 2.5rem; }
.celebration__photos img { width: 135px; border: 6px solid white; box-shadow: 0 12px 28px rgba(47,30,30,.17); }
.celebration__photos img:nth-child(1) { transform: rotate(-8deg); }.celebration__photos img:nth-child(2) { z-index: 2; transform: translateY(-12px); }.celebration__photos img:nth-child(3) { transform: rotate(8deg); }
.celebration .button--primary { color: white; background: var(--wine); }
.whatsapp-confirmation { margin: 0 auto 1.2rem; padding: 1.25rem; border: 1px solid rgba(184,148,86,.35); background: rgba(255,255,255,.58); }
.celebration__card .whatsapp-confirmation p { margin: 0 0 .3rem; font-family: var(--serif); font-size: 1.25rem; color: var(--wine); }
.whatsapp-confirmation > span { display: block; margin-bottom: 1rem; font-size: .72rem; color: #806e6c; }
.whatsapp-confirmation__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .65rem; }
.button--whatsapp { min-height: 2.9rem; padding: .65rem 1rem; color: white; background: #287b59; font-size: .66rem; text-decoration: none; }
.button--whatsapp:hover { background: #1f6649; }

.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1.05s ease, transform 1.05s cubic-bezier(.2,.7,.2,1); }
.reveal--delay { transition-delay: .15s; }
.reveal.is-visible { opacity: 1; transform: none; }

@keyframes openingZoom { from { transform: scale(1.12); } to { transform: scale(1.02); } }
@keyframes equalizer { to { height: 13px; } }
@keyframes scrollCue { from { transform: translateY(-110%); } to { transform: translateY(210%); } }
@keyframes heartbeat { 0%,100% { transform: scale(1); } 20% { transform: scale(1.16); } 35% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes swipeHint { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

@media (max-width: 900px) {
  .opening__content { margin-right: 0; }
  .opening__portrait img { object-position: 61% center; }
  .opening__veil { background: linear-gradient(0deg, rgba(35,21,23,.92), rgba(50,27,30,.38)); }
  .arrival-grid { grid-template-columns: 1fr 1fr; }
  .arrival-copy { grid-column: 1 / -1; grid-row: 1; text-align: center; }
  .arrival-copy .lead { margin-left: auto; }
  .gold-line { margin-inline: auto; }
  .portrait-card--large { height: 55vh; }.portrait-card--small { height: 36vh; transform: translateY(2rem) rotate(3deg); }
  .filmstrip { display: flex; width: 100%; margin-left: 0; padding: 1rem 8vw 3.5rem; gap: 1rem; overflow-x: auto; scroll-padding-inline: 8vw; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .filmstrip::-webkit-scrollbar { display: none; }
  .memory-card { flex: 0 0 min(68vw, 430px); height: auto; aspect-ratio: 3 / 4; scroll-snap-align: center; scroll-snap-stop: always; }
  .memory-card--up, .memory-card--down { transform: none; }
  .swipe-hint { display: flex; align-items: center; justify-content: center; gap: .65rem; margin: -2.3rem 0 .8rem; font-size: .66rem; letter-spacing: .11em; text-transform: uppercase; color: #806a68; }
  .swipe-hint span { color: var(--gold); font-size: 1rem; animation: swipeHint 1.5s ease-in-out infinite; }
  .filmstrip-nav { display: flex; justify-content: center; gap: .55rem; }
  .filmstrip-nav button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(85,49,51,.2); transition: width .25s ease, border-radius .25s ease, background .25s ease; }
  .filmstrip-nav button[aria-current="true"] { width: 24px; border-radius: 999px; background: var(--rose-deep); }
  .scene--meaning { grid-template-columns: 1fr; }
  .meaning-photo { height: 72svh; }.meaning-panel { min-height: 100svh; }
}

@media (max-width: 600px) {
  .opening__content { width: 88vw; padding-top: 18svh; }
  .opening h1 { font-size: clamp(2.65rem, 13vw, 4rem); line-height: .95; }
  .opening__subtitle { font-size: 1.15rem; line-height: 1.35; }
  .opening__hint { max-width: 260px; margin-inline: auto; line-height: 1.5; }
  .button { min-height: 3.25rem; }
  .story-nav { display: none; }
  .music-control { right: .8rem; bottom: max(.8rem, env(safe-area-inset-bottom)); padding: .65rem .8rem; }
  .scene h2 { font-size: clamp(2.4rem, 12vw, 3.5rem); line-height: 1; }
  .lead { font-size: clamp(1.2rem, 6vw, 1.55rem); }
  .scene__content--left { width: 84vw; margin: 0 0 8vh 8vw; }
  .scene--photo { min-height: 108svh; }
  .photo-full img { object-position: 55% center; }
  .scene--arrival { padding: 6rem 1.2rem; }
  .arrival-grid { gap: 1rem; }
  .portrait-card--large { height: 42vh; }.portrait-card--small { height: 30vh; }
  .portrait-card__number { font-size: 5rem; }
  .scene--memories { padding-top: 5.5rem; }
  .memories-heading { width: 88vw; margin-bottom: 1.5rem; }
  .memories-heading h2 { font-size: clamp(2.35rem, 11.5vw, 3.35rem); }
  .filmstrip { padding-inline: 8vw 14vw; gap: .8rem; }
  .memory-card { flex-basis: 78vw; aspect-ratio: 3 / 4; padding: .38rem; }
  .names-card { margin-top: 3rem; padding: 2.7rem 1rem; }
  .names-card h3 { font-size: clamp(2.7rem, 14vw, 4.1rem); line-height: .92; }
  .meaning-photo { height: 70svh; }.meaning-photo img { object-position: center 30%; }
  .meaning-panel { padding: 5rem 1.4rem; }
  .meaning-list li { padding: 1rem 0; }
  .meaning-dedication { padding-left: 1rem; font-size: .86rem; }
  .pause-collage figure { opacity: .3; }
  .pause-collage figure:nth-child(3) { display: none; }
  .pause-inner { grid-template-columns: 1fr; gap: 3rem; }
  .memory-video { width: min(72vw, 320px); max-height: 58svh; }
  .scene--pause { padding-block: 5rem; }
  .question-backdrop img { object-position: center; }
  .question-content h2 strong { font-size: clamp(3.2rem, 17vw, 5.1rem); line-height: .88; }
  .question-main { font-size: 1.35rem; }
  .answer-actions { flex-direction: column; align-items: stretch; padding-inline: 1.2rem; }
  .celebration { place-items: start center; padding: .75rem; }
  .celebration__card { width: 100%; padding: 2rem 1rem 1.2rem; }
  .celebration__card h2 { font-size: clamp(2.7rem, 13vw, 4rem); }
  .celebration__photos { height: 112px; margin: 1.4rem 0 1.7rem; }.celebration__photos img { width: 88px; border-width: 4px; }
  .whatsapp-confirmation { padding: 1rem .8rem; }
  .whatsapp-confirmation__actions { flex-direction: column; }
  .button--whatsapp { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}