/* Landscape planes move independently. Reading panels stay in document flow. */
.parallax-scene{isolation:isolate;overflow:clip;--far-y:0px;--tree-left-y:0px;--tree-right-y:0px;--tree-x:0px;--near-y:0px;--object-y:0px;--object-x:0px;--object-tilt:0deg;--scene-scale:1;--camera-pin:0px;--camera-height:100svh}
.scene-camera{position:absolute;inset:0 0 auto;height:var(--camera-height);transform:translate3d(0,var(--camera-pin),0);pointer-events:none}
.scene-content{position:relative;z-index:4;width:100%;max-width:100%;transform:none}
.scene-scenery{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;contain:paint}
.scene-distant{position:absolute;inset:-230px -60px;background:url('assets/garden-depth.webp') center/cover no-repeat;opacity:.58;transform:translate3d(0,var(--far-y),0) scale(var(--scene-scale));transform-origin:center}
.scene-tree{position:absolute;width:72%;max-width:470px;pointer-events:none;z-index:1}
.scene-tree-left{left:-25%;top:-7%;transform:translate3d(var(--tree-x),var(--tree-left-y),0)}
.scene-tree-right{right:-25%;top:31%;transform:translate3d(calc(-1 * var(--tree-x)),var(--tree-right-y),0)}
.tree-orientation{width:100%;transform-origin:50% 97%}
.scene-tree-right .tree-orientation{transform:scaleX(-1)}
.tree-sway{width:100%;height:auto;transform-origin:42% 94%;animation:tree-wind-left 6.5s ease-in-out infinite alternate;animation-play-state:paused;filter:drop-shadow(0 5px 6px #160e1240)}
.scene-tree-right .tree-sway{animation-name:tree-wind-right;animation-duration:7.7s;animation-delay:-3.1s}
.scene-center-shade{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,transparent,#18161838 20%,#18161866 36%,#18161866 64%,#18161838 80%,transparent)}
.scene-bouquet{position:absolute;z-index:6;width:62%;max-width:350px;bottom:-55px;transform:translate3d(0,var(--near-y),0)}
.scene-bouquet-left{left:-24%}
.scene-bouquet-right{right:-24%;bottom:-10px;transform:translate3d(0,calc(-.72 * var(--near-y)),0) scaleX(-1)}
.bouquet-crop{position:relative;width:100%;aspect-ratio:1.65;overflow:hidden;mask-image:linear-gradient(transparent,#000 24%);-webkit-mask-image:linear-gradient(transparent,#000 24%);transform-origin:45% 85%;animation:flower-wind 5.6s ease-in-out infinite alternate;animation-play-state:paused}
.bouquet-crop img{position:absolute;bottom:0;left:0;width:100%;height:auto}
.scene-bouquet-right .bouquet-crop{animation-duration:6.7s;animation-delay:-2.2s}
.scene-mist{position:absolute;left:-15%;right:-15%;top:40%;height:20%;z-index:1;opacity:.18;background:radial-gradient(ellipse,#f1e5d95c,transparent 65%);animation:mist-drift 17s ease-in-out infinite alternate;animation-play-state:paused}
.invitation-open .scene-active :is(.tree-sway,.bouquet-crop,.scene-mist,.bird-flight,.bird-wing){animation-play-state:running}
.motion-paused :is(.tree-sway,.bouquet-crop,.scene-mist,.bird-flight,.bird-wing){animation-play-state:paused!important}
.depth-item{translate:calc(var(--object-x) * var(--depth-direction,1)) var(--object-y);rotate:calc(var(--object-tilt) * var(--depth-direction,1))}
.parallax-scene .sprig{display:none}
.scene-active :is(.scene-tree,.scene-distant,.scene-bouquet){will-change:transform}

/* The garden is its own clipped stage; the names are genuinely below it. */
.garden.parallax-scene{display:block;height:auto;min-height:0;padding:0;background:#171417}
.garden-animation{position:relative;isolation:isolate;height:clamp(380px,57svh,620px);overflow:hidden;contain:paint}
.garden .scene-camera{height:100%;transform:none}
.garden .garden-bg{inset:-150px -55px;background-image:url('assets/garden-depth.webp');transform:translate3d(0,var(--far-y),0) scale(var(--scene-scale));scale:1.28;z-index:0}
.garden .garden-vignette{z-index:1;background:linear-gradient(#0c0b1044,transparent 38%,#17141745)}
.garden .scene-distant,.garden .scene-center-shade{display:none}
.garden .scene-scenery{z-index:2}
.garden .scene-tree{width:83%;max-width:510px}
.garden .scene-tree-left{left:-31%;top:-13%}
.garden .scene-tree-right{right:-31%;top:-3%}
.garden .scene-bouquet{width:76%;bottom:-35px}
.garden .scene-bouquet-left{left:-32%}
.garden .scene-bouquet-right{right:-32%;bottom:0}
.garden .fireflies{z-index:3}
.garden .garden-overline{z-index:4;top:35px;left:10%;right:10%;font-size:10px;letter-spacing:.12em;color:#fff4df;text-shadow:0 2px 6px #000,0 0 16px #000}
.garden .scene-content{height:auto;display:block;padding:28px 20px 34px;background:#171417;transform:none}
.garden-names{position:relative;width:100%;margin:0;text-shadow:none}
.garden-names .eyebrow{color:#e2cfbc;font-size:11px;letter-spacing:.1em}
.garden .couple-title{display:flex;align-items:baseline;justify-content:center;gap:14px;font-size:clamp(62px,17vw,82px);line-height:1.05;letter-spacing:0;margin:14px 0 7px;color:#fff1da}
.garden .couple-title span{display:inline}
.garden .couple-title i{display:inline;font-size:.55em;line-height:1;color:#dbc49c}
.garden-date{font-size:12px;letter-spacing:.04em;color:#f1e2cd}
.garden-names .text-button{font-size:11px;margin-top:9px;color:#f1e2cd}
.garden .scroll-hint{position:relative;inset:auto;margin:22px 0 0;gap:8px}
.garden .scroll-hint span{font-size:9px;letter-spacing:.04em;color:#d5c4b1}
.garden .scroll-hint i{height:22px}
.garden .scene-tree .tree-orientation,.garden .scene-bouquet .bouquet-crop{opacity:0;transition:opacity 1.6s ease,translate 2.5s var(--ease)}
.garden .scene-tree-left .tree-orientation{translate:-150px 50px}
.garden .scene-tree-right .tree-orientation{translate:150px 35px;transition-delay:.18s}
.garden .scene-bouquet .bouquet-crop{translate:0 140px;transition-delay:.35s}
.scenery-entered .garden .scene-tree .tree-orientation,.scenery-entered .garden .scene-bouquet .bouquet-crop{opacity:1;translate:0 0}
.scenery-entered .garden .garden-bg{animation:camera-discover 5.4s cubic-bezier(.2,.65,.25,1) both}

/* A small flock crosses the open sky, with individual wingbeats. */
.scene-birds{position:absolute;inset:0;z-index:4;overflow:hidden;color:#381420;filter:drop-shadow(0 2px 2px #120c1677)}
.bird-flight{position:absolute;inset:0;animation:birds-cross var(--flight-time) linear var(--flight-delay) infinite;animation-play-state:paused;opacity:0}
.bird{position:absolute;left:-50px;top:var(--bird-top);width:var(--bird-size);height:auto;overflow:visible;fill:currentColor;stroke:none}
.bird g{stroke:#eedfc5;stroke-width:.7;stroke-linejoin:round}
.bird-wing{transform-box:view-box;transform-origin:34px 24px;animation:wingbeat .8s ease-in-out var(--flap-delay) infinite alternate;animation-play-state:paused}
.bird-wing-far{opacity:.75;animation-duration:.83s}
@keyframes birds-cross{0%{translate:-10% 12px;opacity:0}7%{opacity:1}45%{translate:52% -24px;opacity:1}90%{opacity:1}100%{translate:125% 10px;opacity:0}}
@keyframes wingbeat{from{transform:scaleY(1) rotate(-8deg)}to{transform:scaleY(-.38) rotate(10deg)}}

/* Opaque cream cards and transparent dark cards have separate, bounded areas. */
.paper .scene-distant{opacity:.46;filter:saturate(.75)}
.paper .scene-center-shade{background:linear-gradient(90deg,#f2eadb08,#f2eadb45 25%,#f2eadb45 75%,#f2eadb08)}
.paper .scene-content{background:#f4ecdc;border:1px solid #d6c29d;border-radius:130px 130px 8px 8px;box-shadow:0 15px 42px #25151d25;padding:45px 18px 35px!important;color:#38292a}
.rsvp-section.paper .scene-content{border-radius:70px 70px 8px 8px}
.dark .scene-content{background:#181318b8;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:35px 18px;border:1px solid #ebd8bf30;border-radius:100px 100px 8px 8px;color:#fff2df;text-shadow:0 1px 5px #0008}
.dark .parents,.timeline p{color:#f0e2d1;font-size:13px}
.dark .parents strong{color:#fff5e6}
.couple-section:before{display:none}
.date-section .scene-scenery{z-index:1}
.date-section .scene-center-shade{background:linear-gradient(90deg,transparent,#180c1522 20%,#180c1522 80%,transparent)}
.date-section .scene-distant{display:none}
.date-section .date-photo{height:calc(100% + 380px);top:-190px;transform:translate3d(0,var(--far-y),0)}
.date-section .date-shade{z-index:1;background:linear-gradient(#140e1666,#140e16a8 45%,#140e16b8)}
.date-section .scene-content{z-index:3;color:#fff4e1;text-shadow:0 2px 7px #0009}
.gift-section .gift-background,.closing .closing-bg{inset:-230px -60px;background-image:linear-gradient(#130c1277,#130c1299),url('assets/garden-depth.webp');transform:translate3d(0,var(--far-y),0)}
.gift-section .scene-distant,.closing .scene-distant{display:none}
.gift-section .scene-center-shade,.closing .scene-center-shade{opacity:.35}
.glass-card{background:#1c141db8;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-color:#ecdbc080;border-radius:85px 85px 12px 12px;color:#fff3e0;text-shadow:0 1px 5px #0008;padding:40px 22px}
.glass-card p{color:#fff0dd;font-size:14px;line-height:1.85}
.glass-card .btn{text-shadow:none}
.closing .closing-inner{padding:30px 15px;background:#171217ad;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border-radius:130px 130px 8px 8px;text-shadow:0 1px 5px #0008}
.closing p{color:#f3e5d3;font-size:13px}
.blessing>.scene-content>.reveal>p:not(.greeting):not(.bismillah){font-size:13px;line-height:1.9}
.parallax-scene:not(.garden) .scene-bouquet{opacity:.9}
.gallery-section .scene-tree-right,.couple-section .scene-tree-right{top:30%}
.gallery-section .scene-tree-left,.couple-section .scene-tree-left{top:-5%}
.rsvp-section .scene-bouquet{opacity:.7}

/* Warm, informal typography: a handwritten name and rounded everyday text. */
@font-face{font-family:InvitationHand;src:url('assets/handwritten.otf') format('opentype');font-display:swap}
@font-face{font-family:InvitationRound;src:url('assets/rounded.otf') format('opentype');font-display:swap}
@font-face{font-family:InvitationRound;src:url('assets/rounded-medium.otf') format('opentype');font-weight:600 800;font-display:swap}
:root{--sans:InvitationRound,Arial,sans-serif;--hand:InvitationHand,cursive}
body{font-size:14px;line-height:1.8}
h1,h2,h3{font-family:var(--sans);font-weight:400;letter-spacing:-.035em}
.desktop-copy h1,.cover-content h2,.couple-title,.person h3,.closing-name{font-family:var(--hand);font-weight:400;letter-spacing:0}
.desktop-copy h1{font-size:clamp(80px,8.8vw,155px)}
.cover-content h2{font-size:78px;letter-spacing:0}
.desktop-copy p,.cover-intro{font-family:var(--sans);font-style:normal}
.section-title{font-size:33px;line-height:1.23;letter-spacing:-.04em}
.section-title i{font-family:var(--hand);font-size:1.6em;line-height:1.05;font-style:normal;letter-spacing:0;margin-top:5px}
.eyebrow{letter-spacing:.09em}
.person h3{font-size:78px;line-height:1;margin:12px 0 6px}
.person .full-name{font-family:var(--sans);font-size:18px;line-height:1.5}
.event-card h3{font-family:var(--hand);font-size:48px;letter-spacing:0}
.location-note h3{font-size:22px;line-height:1.4;letter-spacing:-.035em}
.timeline h3{font-size:23px;line-height:1.4}
.detail-modal h2{font-family:var(--hand);font-size:48px;font-style:normal;letter-spacing:0}
.closing-name{font-size:63px}
.btn{font-size:12px;letter-spacing:0}
.text-button{letter-spacing:.01em}
.gallery-tip{font-size:8px;letter-spacing:.04em}

@keyframes tree-wind-left{0%{transform:rotate(-3.2deg) skewX(-.6deg)}50%{transform:rotate(.4deg) skewX(.25deg)}100%{transform:rotate(3.6deg) skewX(.85deg)}}
@keyframes tree-wind-right{0%{transform:rotate(3.1deg) skewX(.8deg)}50%{transform:rotate(-.5deg) skewX(-.2deg)}100%{transform:rotate(-3.9deg) skewX(-.85deg)}}
@keyframes flower-wind{from{transform:rotate(-2deg) translateX(-2px)}to{transform:rotate(2deg) translateX(3px)}}
@keyframes mist-drift{from{transform:translate3d(-25px,8px,0) scaleX(.95);opacity:.13}to{transform:translate3d(35px,-12px,0) scaleX(1.15);opacity:.25}}
@keyframes camera-discover{from{scale:1.28;translate:-20px 8px}to{scale:1;translate:0 0}}
@media(max-width:760px){
  .scene-tree{width:78%}.scene-tree-left{left:-30%}.scene-tree-right{right:-30%}
  .garden .scene-tree{width:91%}.garden .scene-tree-left{left:-37%;top:-10%}.garden .scene-tree-right{right:-37%;top:0}
  .paper .scene-content{padding:40px 15px 30px!important;border-radius:100px 100px 8px 8px}
  .dark .scene-content{padding:35px 17px}
  .blessing,.events,.gallery-section,.rsvp-section{padding-left:22px;padding-right:22px}
  .story,.couple-section{padding-left:22px;padding-right:22px}
  .event-date{gap:13px;margin-left:0;margin-right:0}.event-date>span{font-size:10px}
  .location-note .btn{padding-left:12px;padding-right:12px;gap:8px}
  .cover-content h2{font-size:clamp(61px,18vw,78px)}
  .cover-content{left:25px;right:25px}
  .paper .section-title{font-size:32px}
  .date-inner{padding-left:25px;padding-right:25px}
}
@media(prefers-reduced-motion:reduce){
  .scene-camera,.scene-tree,.scene-distant,.scene-bouquet,.scene-content,.garden .garden-bg,.date-section .date-photo,.gift-background,.closing-bg{transform:none!important;will-change:auto!important}
  .depth-item{translate:none;rotate:none}
  .tree-sway,.bouquet-crop,.scene-mist,.bird-flight,.bird-wing{animation:none!important}
  .bird-flight{translate:50% 0;opacity:.8}.bird-flight:nth-child(2){translate:65% 0}.bird-flight:nth-child(3){translate:75% 0}.bird-flight:nth-child(4){translate:85% 0}
  .garden .scene-tree .tree-orientation,.garden .scene-bouquet .bouquet-crop{transition:none;opacity:1;translate:none}
  .garden .garden-bg{animation:none!important;scale:1;translate:none}
}