@font-face{font-family:"Basileus";src:url("assets/BASILEUS.TTF") format("truetype");font-display:swap}
*{box-sizing:border-box}
:root{--ink:#3d2b54;--gold:#c99a42;--gold-light:#f5d98d;--lav:#bba9e8;--pink:#f4c8df;--sky:#bfe9f5;--cream:#fff9ed}
html{scroll-behavior:smooth;scroll-padding-top:12px}
body{margin:0;background:#d8d0f0;color:var(--ink);font-family:"Nunito",sans-serif;overflow-x:hidden}
body.locked{overflow:hidden}
button,a{-webkit-tap-highlight-color:transparent}
.opening{min-height:100svh;min-height:100dvh;position:relative;overflow:hidden;background:#8ec4ef;isolation:isolate}
.opening-sky{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse at 50% 42%,#fff6d4 0%,rgba(255,214,150,.45) 24%,transparent 50%),linear-gradient(180deg,#6eb6ef 0%,#b7ddf8 22%,#f8d4ea 62%,#f4c4b0 100%)}
.opening-art{position:absolute;z-index:1;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%);object-fit:cover;object-position:center 46%;pointer-events:none;user-select:none}
.opening-art-open{z-index:2;opacity:0;filter:brightness(1.22) saturate(1.04)}
.opening.is-opening .opening-art-open,.opening.is-open .opening-art-open{opacity:1;transition:opacity 1.15s ease .12s}
.opening-wash{position:absolute;z-index:3;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 46%,rgba(255,252,246,.84) 0%,rgba(255,247,230,.62) 16%,rgba(255,255,255,.28) 34%,rgba(255,255,255,.08) 52%,transparent 68%)}
.opening.is-opening .opening-wash,.opening.is-open .opening-wash{opacity:1;transition:opacity 1.15s ease .55s}
.celestial{position:absolute;z-index:4;inset:0;pointer-events:none;overflow:hidden}
.rays{position:absolute;left:50%;top:44%;width:150vmax;height:150vmax;transform:translate(-50%,-50%) scale(.35);opacity:0;background:repeating-conic-gradient(from 0deg,transparent 0 7deg,rgba(255,244,196,.72) 8deg 10deg,transparent 11deg 18deg);-webkit-mask-image:radial-gradient(circle,#000 0%,transparent 64%);mask-image:radial-gradient(circle,#000 0%,transparent 64%);mix-blend-mode:screen}
.flash{position:absolute;inset:0;opacity:0;background:radial-gradient(circle at 50% 44%,#fff 0%,#fff4c8 18%,rgba(255,220,140,.55) 42%,transparent 70%)}
.spark{position:absolute;left:50%;top:44%;width:7px;height:7px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;box-shadow:0 0 10px 4px rgba(255,226,140,.95);opacity:0}
.spark.star{width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:0;background:transparent;box-shadow:none}
.spark.star:before{content:"✦";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff8df;font-size:18px;line-height:1;text-shadow:0 0 12px #ffe08a,0 0 22px #fff}
.opening.is-opening .rays{animation:rays-burst 1.55s ease-out forwards}
.opening.is-opening .flash{animation:divine-flash 1.4s ease-out forwards}
.opening.is-opening .spark{animation:spark-fly 1.45s ease-out var(--delay,0s) forwards}
.eyebrow{font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;font-weight:800;color:#85649c;margin:0 0 14px}
h2{font-family:"Cinzel",serif}
.enter-button{position:absolute;z-index:6;left:50%;bottom:max(6.5vh,24px);transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);padding:16px 28px;font-size:clamp(1rem,3.4vw,1.15rem);line-height:1.25;text-align:center}
.opening.is-opening .enter-button{animation:button-away .5s ease forwards;pointer-events:none}
.opening-reveal{position:absolute;z-index:8;left:50%;top:44%;transform:translate(-50%,-50%);width:min(90vw,720px);padding:0 8px;text-align:center;pointer-events:none}
.invite-line{margin:0 auto;max-width:18em;opacity:0}
.invite-kicker{display:block;color:#6d5228;font-family:"Cinzel",serif;font-size:clamp(.78rem,2.5vw,1.05rem);font-weight:700;letter-spacing:.32em;line-height:1.4;text-indent:.32em;text-transform:uppercase;text-shadow:0 0 16px rgba(255,255,255,.95)}
.invite-kicker:after{content:"";display:block;width:108px;height:9px;margin:8px auto 10px;background:linear-gradient(#c6a15a,#c6a15a) left center/38px 1px no-repeat,linear-gradient(#c6a15a,#c6a15a) right center/38px 1px no-repeat,radial-gradient(circle,#b8893a 0 2.5px,transparent 3px) center/9px 9px no-repeat}
.invite-body{display:block;color:#241c14;font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(1.45rem,4.8vw,2.35rem);font-style:italic;font-weight:600;line-height:1.18;text-shadow:0 0 18px rgba(255,255,255,.92),0 1px 0 rgba(255,255,255,.7)}
.invite-name{margin:12px 0 0;color:#111;font-family:"Basileus","Cinzel",serif;font-size:clamp(4.4rem,15vw,8.6rem);font-weight:400;line-height:.82;letter-spacing:.04em;opacity:0;text-shadow:0 0 22px rgba(255,255,255,.85)}
.swipe-hint{position:absolute;z-index:8;left:50%;bottom:max(3.2vh,16px);width:max-content;max-width:calc(100% - 36px);margin:0;transform:translateX(-50%);color:#4a3824;font-family:"Cinzel",serif;font-size:clamp(.68rem,2.4vw,.84rem);font-weight:700;letter-spacing:.14em;line-height:1.45;text-align:center;text-transform:uppercase;opacity:0;pointer-events:none;text-shadow:0 0 12px rgba(255,255,255,.95),0 1px 0 #fff}
.swipe-hint i{display:block;margin-top:1px;font-style:normal;font-size:1.25rem;letter-spacing:0;line-height:1}
.opening.is-open .invite-line{animation:invite-in 1.7s ease .45s forwards}
.opening.is-open .invite-name{animation:name-in 1.85s cubic-bezier(.16,.84,.32,1) 2.2s forwards}
.opening.is-open .swipe-hint{animation:hint-in 1s ease 3.7s forwards}
.opening.is-open .swipe-hint i{animation:hint-bob 1.6s ease-in-out 4.7s infinite}
.gold-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #f8dfa0;border-radius:999px;background:linear-gradient(135deg,#f8e2a2,#c49342);color:#4c3155;padding:14px 22px;text-decoration:none;font:800 .9rem "Nunito",sans-serif;box-shadow:0 6px 0 #9b713e,0 12px 25px #3d2b5440;cursor:pointer;transition:transform .2s,box-shadow .2s}
.gold-button:hover{transform:translateY(-2px);box-shadow:0 8px 0 #9b713e,0 16px 28px #624a7d22}
.gold-button.enter-button{padding:16px 28px;font-size:clamp(1rem,3.4vw,1.15rem)}
.enter-button:hover{transform:translateX(-50%) translateY(-2px)}
.cloud{position:absolute;z-index:5;width:230px;height:80px;border-radius:100px;background:linear-gradient(180deg,#fffdfd,#e9d9f4);filter:drop-shadow(0 10px 18px #8774b322);opacity:.88;pointer-events:none}
.cloud:before,.cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}
.cloud:before{width:115px;height:115px;left:30px;top:-50px}.cloud:after{width:140px;height:140px;right:25px;top:-70px}
.cloud-a{left:-65px;bottom:7%;animation:drift 18s linear infinite}.cloud-b{right:-70px;bottom:20%;transform:scale(1.25);animation:drift-reverse 24s linear infinite}.cloud-c{left:12%;top:15%;transform:scale(.55);animation:drift 27s linear infinite}.cloud-d{right:8%;top:23%;transform:scale(.7);animation:drift-reverse 20s linear infinite}
.hero-float{position:absolute;z-index:1;width:min(34vw,170px);height:auto;pointer-events:none;user-select:none;filter:drop-shadow(0 12px 16px rgba(70,45,100,.2));animation:hero-bob 6s ease-in-out infinite}
.hero-left{left:-2%}
.hero-right{right:-2%;animation-duration:7.4s;animation-delay:-2.2s}
.hero-high{top:6%}
.hero-mid{top:28%;width:min(42vw,220px)}
.hero-low{bottom:4%}
.welcome .hero-left{top:8%}.welcome .hero-right{top:auto;bottom:-30px;right:-20px;width:min(28vw,140px)}
.memories .hero-right{width:min(26vw,130px)}.memories .hero-left{width:min(28vw,140px)}
.party .hero-left{top:2%;bottom:auto;width:min(28vw,140px)}.party .hero-right{top:18%;bottom:auto;width:min(24vw,120px)}
@keyframes hero-bob{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-18px) rotate(5deg)}}
.chapter{position:relative;overflow:hidden;text-align:center;padding:100px 20px;isolation:isolate}
.chapter-inner{position:relative;z-index:3;max-width:950px;margin:auto}
.welcome{min-height:82vh;display:grid;place-items:center;background:linear-gradient(180deg,#c2b4ec,#f4d4e6 48%,#fdf1e7)}
h2{font-size:clamp(2rem,6vw,4rem);line-height:1.14;margin:0 0 20px;color:#76528f}
h2 em{font-style:normal;color:#b77b9c}
.story{max-width:640px;margin:0 auto 26px;font-size:clamp(1rem,2.5vw,1.2rem);line-height:1.8;color:#5c4a70}
.laurel{color:#bc914d;letter-spacing:.1em;margin:25px auto}
.scroll-hint{font-size:.8rem;letter-spacing:.08em;color:#866b9d}
.cloud-small{transform:scale(.7);opacity:.55}.cloud-e{left:-90px;top:25%;animation:drift 23s linear infinite}
.descent{position:relative;min-height:82vh;overflow:hidden;display:grid;place-items:center;background:linear-gradient(#fdf1e7 0%,#b7e7f5 35%,#9ed6e8 58%,#8ac6a3 100%)}
.mountain{position:absolute;bottom:-2%;left:50%;transform:translateX(-50%);width:0;height:0;border-left:clamp(170px,42vw,460px) solid transparent;border-right:clamp(170px,42vw,460px) solid transparent;border-bottom:clamp(300px,56vw,610px) solid #bba9dc;filter:drop-shadow(20px 15px 0 #e8d6ef)}
.mountain:after{content:"";position:absolute;left:clamp(-80px,-10vw,-30px);top:clamp(100px,20vw,210px);width:0;height:0;border-left:clamp(90px,17vw,190px) solid transparent;border-right:clamp(90px,17vw,190px) solid transparent;border-bottom:clamp(180px,28vw,300px) solid #d8c9ed}
.cloud-layer{width:65vw;max-width:650px;height:140px;opacity:.86}.cloud-f{left:-10%;top:15%;animation:drift 20s linear infinite}.cloud-g{right:-10%;bottom:16%;transform:scale(1.2);animation:drift-reverse 26s linear infinite}
.descent-caption{position:relative;z-index:3;text-align:center;padding:30px;background:#fff8;border-radius:24px;backdrop-filter:blur(4px);margin-top:20vh}
.descent-caption span{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase}.descent-caption h2{margin:8px 0 0}
.memories{background:linear-gradient(180deg,#b9e8f2,#f6e6ed 22%,#f7d9e4 100%)}
.photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:800px;margin:40px auto}
.photo-frame{margin:0;padding:12px 12px 18px;background:#fffaf0;border:2px solid #d3ad69;border-radius:8px;box-shadow:0 14px 28px #654e7920;transform:rotate(2deg)}
.photo-frame:nth-child(2){transform:rotate(-3deg);margin-top:35px}.photo-frame:nth-child(3){transform:rotate(2deg)}
.photo-frame img{display:block;width:100%;height:280px;object-fit:cover;object-position:center 32%;border-radius:3px;background:#e8d8f0}
.photo-large img{object-position:center 62%}
.photo-frame:nth-child(2) img{object-position:center 42%}
.photo-frame figcaption{font:600 .82rem Cinzel,serif;color:#785d83;margin-top:12px}
.photo-placeholder{display:none;height:260px;place-content:center;gap:7px;background:linear-gradient(135deg,#e6d8f4,#fbe2e8);color:#755b8b}
.photo-placeholder span{font-size:2rem}.photo-placeholder small{font-size:.7rem}
.baby-hero{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:25px;color:#bd8d40;font-size:2rem}
.baby-hero span{font:700 1rem/1.5 Cinzel,serif;color:#775b8b}
.party{background:linear-gradient(180deg,#f7d9e4,#f9ebd7 50%,#c2e6ee);padding-top:240px;padding-bottom:90px}
.pony{top:16px;right:12px;left:auto;width:min(32vw,150px);z-index:2}
.cloud-h{right:-90px;top:8%;opacity:.5;animation:drift-reverse 21s linear infinite}
.details-card{max-width:540px;margin:34px auto 40px;padding:28px 24px;background:#fffaf0d9;border:2px solid #d6b56f;border-radius:20px;box-shadow:0 20px 50px #74598b1c;text-align:left}
.detail{display:flex;align-items:flex-start;gap:16px;padding:16px 0;border-bottom:1px solid #e7d8c6}.detail-icon{font-size:1.5rem}.detail small{display:block;letter-spacing:.16em;color:#a37a42;font-size:.68rem;font-weight:800}.detail strong{display:block;font:700 1.05rem Cinzel,serif;color:#6f4c83;margin:6px 0}.detail p{margin:0;color:#6d5a77}
.details-card .gold-button{display:flex;width:100%;margin-top:18px;text-align:center}.rsvp-button{background:linear-gradient(135deg,#e7c5e9,#b7a0d7);box-shadow:0 6px 0 #8d75a7,0 12px 25px #624a7d22}.closing{font-size:1.05rem;line-height:1.8}.signature{font-size:clamp(1.4rem,4vw,2.5rem);margin:20px 0 10px}.final-name{font-family:"Basileus","Cinzel",serif;font-size:clamp(3.4rem,12vw,6.4rem);font-weight:400;line-height:.85;letter-spacing:.04em;color:#111;text-shadow:0 0 18px rgba(255,255,255,.9)}
footer{text-align:center;padding:20px;background:#a994ca;color:#fff9ed;font-size:.75rem;letter-spacing:.08em}
.sound-toggle{position:fixed;z-index:20;right:14px;top:14px;border:1px solid #fff8;border-radius:999px;padding:10px 14px;background:#fff9;color:#6d4f83;box-shadow:0 4px 18px #3d2b5422;cursor:pointer}
@keyframes drift{from{translate:-4vw 0}to{translate:110vw 0}}@keyframes drift-reverse{from{translate:5vw 0}to{translate:-115vw 0}}
@keyframes button-away{to{opacity:0;transform:translateX(-50%) translateY(14px) scale(.96)}}
@keyframes divine-flash{0%{opacity:0}20%{opacity:.2}46%{opacity:.92}100%{opacity:0}}
@keyframes rays-burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.28) rotate(0deg)}28%{opacity:.95}100%{opacity:0;transform:translate(-50%,-50%) scale(1.08) rotate(26deg)}}
@keyframes spark-fly{0%{opacity:0;transform:translate(0,0) scale(.2)}18%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1)}}
@keyframes invite-in{from{opacity:0;transform:translateY(22px);filter:blur(7px)}to{opacity:1;transform:none;filter:none}}
@keyframes name-in{0%{opacity:0;transform:translateY(26px) scale(.78);filter:blur(8px)}100%{opacity:1;transform:none;filter:none}}
@keyframes hint-in{from{opacity:0;transform:translateX(-50%) translateY(12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes hint-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@media(min-width:900px){.photo-grid{grid-template-columns:1.2fr 1fr 1fr}.photo-large{transform:rotate(-2deg);margin-top:-5px}.photo-frame img{height:320px}.photo-large img{height:420px}.opening-art{object-position:center 44%}}
@media(max-aspect-ratio:4/5){
  .opening-art{width:100%;height:78%;top:47%;object-fit:cover;object-position:center 50%;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 7%,#000 90%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 7%,#000 90%,transparent 100%)}
  .opening-reveal{top:46%;width:min(92vw,560px)}
  .opening-wash{background:radial-gradient(ellipse at 50% 46%,rgba(255,252,246,.9) 0%,rgba(255,246,226,.7) 20%,rgba(255,255,255,.34) 38%,transparent 62%)}
  .enter-button{bottom:max(4.5vh,18px);padding:14px 20px}
  .cloud-a{bottom:1%}.cloud-b{bottom:8%}
}
@media(max-width:560px){.hero-float{width:86px}.pony{width:112px;top:10px;right:6px}.hero-mid{width:108px}.hero-left{left:-18px}.hero-right{right:-18px}.chapter{padding:78px 18px}.welcome{min-height:75vh}.photo-grid{gap:12px}.photo-frame{padding:7px 7px 13px}.photo-frame img{height:230px}.photo-large img{height:300px}.photo-frame figcaption{font-size:.67rem}.details-card{padding:20px 17px}.descent{min-height:70vh}.invite-line{max-width:12.4em}.invite-kicker{letter-spacing:.18em;text-indent:.18em;font-size:.74rem}.invite-body{font-size:1.32rem}.swipe-hint{letter-spacing:.12em;font-size:.64rem;bottom:max(3vh,16px)}.party{padding-top:186px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;scroll-behavior:auto!important}}

.chapter-inner,.descent-caption,.photo-frame,.details-card{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.chapter-inner.revealed,.descent-caption.revealed,.photo-frame.revealed,.details-card.revealed{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.chapter-inner,.descent-caption,.photo-frame,.details-card{opacity:1;transform:none;transition:none}}