/* The envelope is also the music entry screen: one opening, one gesture. */
.music-gate{background:radial-gradient(ellipse at 50% 25%,#f5e3df,#ede0d4 65%,#d6bbb2);backdrop-filter:none;overflow:hidden;transition:opacity .7s ease,visibility .7s}
.music-gate::before,.music-gate::after{content:'';position:absolute;width:70vmax;height:70vmax;border:1px solid #b58c8655;border-radius:50%;pointer-events:none;animation:splash-orbit 26s linear infinite}
.music-gate::before{top:-50vmax;left:-20vmax}.music-gate::after{bottom:-50vmax;right:-20vmax;animation-direction:reverse}
.music-gate-card{position:relative;isolation:isolate;box-shadow:0 24px 80px #6c3a3b20;animation:envelope-arrive 1.1s cubic-bezier(.2,.7,.2,1) both}
.music-gate-card::before{content:'';position:absolute;inset:10px;border:1px solid #d8b7ad;z-index:-1;pointer-events:none}
.splash-seal{width:90px;height:90px;border-radius:50%;display:grid;place-items:center;margin:0 auto 26px;background:var(--wine);color:#fff3df;outline:1px solid #ad7b78;outline-offset:6px;box-shadow:0 6px 24px #702c4030;animation:seal-breathe 4s ease-in-out infinite}
.splash-seal span{font:28px var(--serif);letter-spacing:2px}.splash-seal i{font-size:20px}
.music-gate.splash-leaving{opacity:0;pointer-events:none}.splash-leaving .music-gate-card{animation:envelope-open .7s cubic-bezier(.5,0,.3,1) forwards}
.wedding-intro .hero-visual>img{animation-play-state:paused}.wedding-intro .effect-controls{visibility:hidden}
.hero-visual::after{content:'';position:absolute;inset:0;background:linear-gradient(145deg,#fbf5ec,#dfc8ba);z-index:6;pointer-events:none;visibility:hidden;transform-origin:50% 0}
.hero-visual.hero-unrolling::after{visibility:visible;animation:hero-unroll 1.6s cubic-bezier(.55,.05,.25,1) forwards}
.hero-visual.hero-unrolling::before{content:'';position:absolute;left:0;right:0;top:0;height:45px;z-index:7;background:linear-gradient(#b88e7f,#fff7e6 45%,#b18c7b);box-shadow:0 12px 22px #291d2444;pointer-events:none;animation:paper-roll 1.6s cubic-bezier(.55,.05,.25,1) forwards}
.js-reveal .reveal{transition:opacity .9s ease,translate .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--reveal-delay,0ms)}
.js-reveal .reveal:not(.is-visible){translate:0 36px}
.living-photo{--photo-parallax:0px;--tilt-x:0deg;--tilt-y:0deg}
.couple-photo{overflow:visible;transform:perspective(1000px) rotate(-3deg) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transition:transform .4s ease}
.photo-frame{overflow:hidden}.couple-photo img{translate:0 var(--photo-parallax);animation:photo-breathe 16s ease-in-out infinite alternate;animation-play-state:paused}
.gallery-item button{transform:perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transition:transform .4s ease}
.gallery-item img{translate:0 var(--photo-parallax);animation:photo-breathe 18s ease-in-out infinite alternate;animation-delay:-5s;animation-play-state:paused}
.gallery-item:nth-child(even) img{animation-direction:alternate-reverse;animation-delay:-9s}
.hero-visual>img{translate:0 var(--photo-parallax);animation:photo-breathe 20s ease-in-out infinite alternate;animation-play-state:paused}
.closing{overflow:hidden}.closing>img{translate:0 var(--photo-parallax);animation:photo-breathe 22s ease-in-out infinite alternate;animation-play-state:paused}
.photo-awake>img,.photo-awake .photo-frame>img{animation-play-state:running}
.couple-photo::after{content:'';position:absolute;inset:14px 14px 70px;pointer-events:none;background:linear-gradient(115deg,transparent 25%,#fff8e212 45%,transparent 65%);background-size:250% 100%;animation:photo-light 12s ease-in-out infinite;animation-play-state:paused}
.couple-photo.photo-awake::after{animation-play-state:running}
.motion-paused .living-photo>img,.motion-paused .photo-frame>img,.motion-paused .couple-photo::after{animation-play-state:paused}
@keyframes envelope-arrive{from{opacity:0;transform:translateY(24px) rotate(-3deg)}to{opacity:1;transform:none}}
@keyframes envelope-open{to{transform:perspective(900px) rotateX(-12deg) translateY(-35px) scale(1.04);opacity:0}}
@keyframes seal-breathe{50%{transform:scale(1.035);box-shadow:0 8px 32px #702c4040}}
@keyframes splash-orbit{to{transform:rotate(360deg) scale(1.12)}}
@keyframes hero-unroll{0%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(100% 0 0 0)}}
@keyframes paper-roll{0%{top:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}
@keyframes photo-breathe{from{transform:scale(1.075) translateX(-.4%)}to{transform:scale(1.12) translateX(.4%)}}
@keyframes photo-light{0%,100%{background-position:100% 0}50%{background-position:0 0}}
@media(max-width:760px){.splash-seal{width:74px;height:74px;margin-bottom:22px}.music-gate-card{padding:35px 26px}.music-gate-card .eyebrow{font-size:9px;letter-spacing:1.5px}.music-gate-card p{font-size:14px}.hero-visual>img{animation-duration:24s}.couple-photo{transform:rotate(-3deg)}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}.music-gate,.music-gate-card,.splash-seal,.music-gate::before,.music-gate::after{animation:none!important;transition:none!important}
 .hero-visual.hero-unrolling::before,.hero-visual.hero-unrolling::after{display:none}
 .living-photo>img,.photo-frame>img,.couple-photo::after{animation:none!important;translate:none!important;transform:none!important}
 .couple-photo{transform:rotate(-3deg)}.gallery-item button{transform:none}
 .js-reveal .reveal{opacity:1!important;translate:none!important;transition:none!important}
}
/* Give the opening enough time and contrast to read as an unfolding letter. */
.music-gate-card{perspective:1000px}
.music-gate-card::after{content:'';position:absolute;inset:0 0 auto;height:44%;background:linear-gradient(155deg,#f1dfcf,#d4b3a5);clip-path:polygon(0 0,100% 0,50% 75%);opacity:.4;pointer-events:none;transform-origin:top;z-index:-1}
.splash-leaving .music-gate-card::after{animation:letter-flap .95s ease forwards}
.hero-visual.hero-unrolling::after,.hero-visual.hero-unrolling::before{animation-duration:2.3s}
.hero-visual.hero-unrolling::after{background:linear-gradient(145deg,#fff8ed 70%,#bb9282);box-shadow:0 18px 35px #24121f55}
.js-reveal .reveal:not(.is-visible){translate:0 55px;filter:blur(3px)}
.js-reveal .reveal{transition:opacity 1.05s ease,translate 1.05s cubic-bezier(.2,.7,.2,1),filter 1.05s ease;transition-delay:var(--reveal-delay,0ms);filter:blur(0)}
.gallery-item img,.gallery-item:nth-child(3n + 2) img,.gallery-item:nth-child(even) img{height:auto;object-fit:contain}
.gallery-item button{background:#eee5dc;overflow:hidden;translate:0 clamp(-12px,var(--photo-parallax),12px)}
.gallery-item img{animation-name:gallery-drift;animation-duration:13s;translate:none}
.closing{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;min-height:0;padding:0;background:#f0e4da;color:var(--wine);text-align:left;overflow:hidden}
.closing>img{position:relative;inset:auto;display:block;width:100%;height:auto;align-self:center;aspect-ratio:auto;object-fit:contain;object-position:center;background:#e4d5c9;animation-name:closing-drift;translate:0 clamp(-12px,var(--photo-parallax),12px)}
.closing-shade{display:none}
.closing-content{padding:55px clamp(25px,4vw,75px)}
.closing h2{font-size:clamp(36px,4.2vw,66px)}
.closing-content .eyebrow,.closing-content>p,.heart-tap-status{color:#765d58}
.closing-content>.script{color:var(--wine)}
.closing .love-button{color:var(--wine);border-color:#ad8a8b}
.closing .love-button:hover{background:#ead4d1}
@keyframes letter-flap{to{transform:rotateX(170deg);opacity:0}}
@keyframes gallery-drift{from{transform:scale(1.01) translateX(-.3%)}to{transform:scale(1.045) translateX(.3%)}}
@keyframes closing-drift{from{transform:scale(1)}to{transform:scale(1.025)}}
@media(max-width:760px){.closing{grid-template-columns:1fr;text-align:center}.closing>img{aspect-ratio:auto;max-height:560px;object-fit:contain}.closing-content{padding:42px 7% 60px}.closing h2{font-size:42px}}
@media(prefers-reduced-motion:reduce){.js-reveal .reveal{filter:none!important}.splash-leaving .music-gate-card::after{animation:none}.closing>img{transform:none!important}.gallery-item button{translate:none!important}}