/* Photographic wizarding stationery and a tangible opening sequence. */
.intro{background:#0d120e;color:#f4e4c5;isolation:isolate}
.intro:before{content:'';position:absolute;inset:-2%;z-index:-2;background-image:url('assets/wizarding-room.png');background-size:cover;background-position:center;transform:scale(1.03);animation:room-breathe 16s ease-in-out infinite alternate}
.intro:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(#080f0b55,#080f0b20 40%,#080f0b99),radial-gradient(ellipse at center,transparent 20%,#0008 100%)}
.intro .eyebrow{color:#ecd4a0;letter-spacing:.18em;text-shadow:0 2px 15px #000;margin-bottom:12px}
.envelope{width:min(610px,94vw);height:auto;aspect-ratio:4/3;border:0;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 22px 25px #0008);transform-style:preserve-3d}
.envelope:after{display:none}
.envelope-art{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;transition:opacity .6s}
.envelope-closed{z-index:5;opacity:1}
.envelope-open{z-index:1;opacity:0;transform:translateY(-8%) scale(1.05);transform-origin:50% 100%}
.envelope-pocket{z-index:3;opacity:0;clip-path:inset(44% 0 0 0);transform:translateY(-8%) scale(1.05);transform-origin:50% 100%}
.letter{z-index:2;inset:auto;left:17%;top:32%;width:66%;height:48%;background:#f5e5c8 url('assets/magical-parchment.png') center/cover;color:#24402c;padding:24px 12px;border:1px solid #a1844b60;box-shadow:0 2px 15px #52351430;line-height:1.4;font-family:'Cormorant Garamond',Georgia,serif;opacity:0;transform:translateY(10px);transition:opacity .3s .4s,transform 1.3s .6s cubic-bezier(.22,1,.36,1)}
.letter .letter-kicker{display:block;font-size:.75rem;letter-spacing:.08em;font-family:'DM Sans',sans-serif;font-style:normal}
.letter strong{display:block;font-weight:500;font-style:italic;font-size:2.25rem;margin:12px 0}
.letter>span:last-child{display:block;font-size:1.25rem;line-height:1.4}
.seal{width:90px;height:90px;top:70%;z-index:6;background:transparent;border:0;border-radius:50%;box-shadow:none;color:transparent;text-shadow:none;animation:hotspot-glow 3s ease-in-out infinite}
.seal:hover{box-shadow:0 0 25px #e7c58550}
.intro.opening .envelope{animation:real-envelope-open 2.85s cubic-bezier(.22,1,.36,1) both}
.intro.opening .envelope-closed{opacity:0;transition-delay:.3s}
.intro.opening .envelope-open,.intro.opening .envelope-pocket{opacity:1;transition-delay:.3s}
.intro.opening .letter{opacity:1;transform:translateY(-175px) rotate(-2deg);box-shadow:0 0 40px #efd19525}
.intro.opening .seal{animation:seal-release .5s both;pointer-events:none}
.intro-note{color:#f3ddb9;text-shadow:0 2px 15px #000;font-size:1.7rem;margin-top:-25px;position:relative;z-index:7;line-height:1.3}
.intro .text-button{color:#f3d395;text-shadow:0 2px 8px #000;margin-top:20px;z-index:7}
.intro .skip{color:#e1cfaf;background:#0d120e66;border-radius:25px;padding:12px 20px}
.intro.opening>.eyebrow{opacity:0;transition:opacity .5s;animation:none}
.intro.opening .intro-note,.intro.opening .text-button{animation:none;opacity:0;transition:opacity .3s}
.couple-frame img{object-position:center;height:430px}
.chapter:nth-of-type(2) .story-photo img{object-position:center;height:280px}
@keyframes hotspot-glow{50%{box-shadow:0 0 25px #e7c58528}}
@keyframes real-envelope-open{0%{transform:translateY(0) rotate(-2deg)}35%{transform:translateY(30px) rotate(0)}100%{transform:translateY(70px) scale(1.06)}}
@keyframes room-breathe{to{transform:scale(1.08)}}
@media(max-width:600px){.intro{padding:20px}.intro:before{background-position:35% center}.envelope{width:100vw;max-width:430px;flex-shrink:0}.intro .eyebrow{font-size:.75rem;letter-spacing:.11em;margin-bottom:25px}.letter{padding:16px 8px;left:16%;width:68%;top:33%;height:53%}.letter strong{font-size:1.6rem;margin:8px 0}.letter .letter-kicker{font-size:.75rem;letter-spacing:0}.letter>span:last-child{font-size:1rem}.intro.opening .letter{transform:translateY(-120px) rotate(-2deg)}.seal{width:70px;height:70px}.intro-note{font-size:1.5rem;margin-top:-5px}.couple-frame img{height:350px}.chapter:nth-of-type(2) .story-photo img{height:260px}}
@media(prefers-reduced-motion:reduce){.intro:before{animation:none;transform:none}.intro.opening .letter{transition:none}.intro .seal{animation:none}.intro.opening>.eyebrow{transition:none}}