/* A carved teak Joglo entrance: fixed frame, two independently hinged leaves. */
.cover{background:#0c0b0c}
.joglo-scene{position:absolute;inset:0;overflow:hidden;perspective:1600px;background:#09090a}
.joglo-art{position:absolute;left:50%;top:0;height:100%;aspect-ratio:2/3;min-width:100%;transform:translateX(-50%);transform-origin:50% 65%;perspective:1400px}
.joglo-frame{position:absolute;inset:0;width:100%;height:100%;stroke:none;z-index:3;pointer-events:none}
.joglo-opening{position:absolute;left:20%;top:36.1%;width:60.1%;height:47.8%;background:url('assets/garden-depth.webp') center 35%/cover;box-shadow:inset 0 0 28px #000c;z-index:1}
.joglo-door{position:absolute;top:36.1979%;height:47.526%;width:29.9805%;z-index:2;backface-visibility:hidden;transform-style:preserve-3d;background:#29170e}
.joglo-door svg{display:block;width:100%;height:100%;stroke:none;overflow:hidden}
.joglo-door-left{left:20.0195%;transform-origin:0 50%}
.joglo-door-right{left:50%;transform-origin:100% 50%}
.cover-top{top:4svh;text-shadow:0 2px 8px #000}
.cover-top .mini-flower{display:none}
.cover-content{bottom:16svh;left:40px;right:40px;padding:20px 12px;background:linear-gradient(transparent,#100b0dc7 18%,#100b0dd9 82%,transparent);text-shadow:0 2px 7px #000}
.cover-intro{font-size:14px;color:#f3dfc7}
.cover-content h2{font-size:76px;margin:8px 0 12px}
.cover-date{font-size:10px}
.cover-content .guest-block{margin:19px 0 16px}
.cover-content .cover-note{font-size:9px;color:#fff0db;opacity:.85}
.cover .open-btn{text-shadow:none;background:#f4e7d0;box-shadow:0 5px 20px #0005}
.cover.is-opening{animation:enter-joglo 4.7s linear both;pointer-events:none}
.cover.is-opening .joglo-door-left{animation:teak-left 3.4s .3s cubic-bezier(.22,.7,.18,1) both}
.cover.is-opening .joglo-door-right{animation:teak-right 3.4s .45s cubic-bezier(.22,.7,.18,1) both}
.cover.is-opening .joglo-art{animation:through-joglo 4.7s cubic-bezier(.23,.65,.2,1) both}
.cover.is-opening .cover-content,.cover.is-opening .cover-top{animation:gate-copy-away .45s ease both}
@keyframes teak-left{0%{transform:rotateY(0);filter:brightness(1)}100%{transform:rotateY(-106deg);filter:brightness(.5)}}
@keyframes teak-right{0%{transform:rotateY(0);filter:brightness(1)}100%{transform:rotateY(106deg);filter:brightness(.5)}}
@keyframes through-joglo{0%,35%{transform:translateX(-50%) scale(1)}100%{transform:translateX(-50%) scale(1.7)}}
@keyframes enter-joglo{0%,72%{opacity:1}100%{opacity:0}}
@keyframes gate-copy-away{to{opacity:0;translate:0 14px}}

/* Smaller composited motion, stable text and no animated blur on whole cards. */
.reveal,.reveal[data-effect=zoom]{filter:none;transition:opacity .75s var(--ease),transform 1s var(--ease)}
.reveal.is-visible{filter:none}
.dark .scene-content,.closing .closing-inner{backdrop-filter:none;-webkit-backdrop-filter:none}
.glass-card{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.tree-sway{filter:none}
.scene-tree,.scene-distant,.scene-bouquet{backface-visibility:hidden}

/* Two understated, one-time shadow-theatre crossings. */
.wayang-interlude{height:190px;position:relative;isolation:isolate;overflow:clip;contain:paint;background:radial-gradient(ellipse at 50% 52%,#5a303148,transparent 65%),#171417;--cross-distance:240px}
.wayang-interlude:before,.wayang-interlude:after{content:'';position:absolute;left:18%;right:18%;height:1px;background:linear-gradient(90deg,transparent,#cdb08566,transparent)}
.wayang-interlude:before{top:15px}.wayang-interlude:after{bottom:15px}
.wayang-light{position:absolute;inset:20px 12%;background:radial-gradient(ellipse,#d5b98922,transparent 68%);opacity:.8}
.wayang-actor{position:absolute;top:10px;left:calc(50% - 57px);width:114px;height:170px;opacity:0;animation:none;will-change:transform}
.has-played .wayang-actor{animation:puppet-cross-left 6.5s ease-in-out 1 both;animation-play-state:paused}
.wayang-actor img{height:100%;width:100%;object-fit:contain;transform-origin:50% 95%;animation:none}
.wayang-from-left{z-index:2}
.wayang-from-right{z-index:1}
.has-played .wayang-from-right{animation-name:puppet-cross-right}
.wayang-from-right img{scale:-1 1;animation-delay:-.8s;filter:brightness(.88)}
.invitation-open .wayang-interlude.is-in-view .wayang-actor,.invitation-open .wayang-interlude.is-in-view .wayang-actor img{animation-play-state:running}
.wayang-interlude:not(.is-in-view) .wayang-actor{will-change:auto}
.motion-paused .wayang-actor,.motion-paused .wayang-actor img{animation-play-state:paused!important}
@keyframes puppet-cross-left{0%{transform:translate3d(calc(-1 * var(--cross-distance)),0,0);opacity:0}12%{opacity:1}38%{transform:translate3d(-55px,-6px,0)}48%{transform:translate3d(-35px,-4px,0)}62%{transform:translate3d(45px,5px,0);opacity:1}87%{opacity:1}100%{transform:translate3d(var(--cross-distance),0,0);opacity:0}}
@keyframes puppet-cross-right{0%{transform:translate3d(var(--cross-distance),0,0);opacity:0}12%{opacity:1}38%{transform:translate3d(55px,7px,0)}48%{transform:translate3d(35px,5px,0)}62%{transform:translate3d(-45px,-3px,0);opacity:1}87%{opacity:1}100%{transform:translate3d(calc(-1 * var(--cross-distance)),0,0);opacity:0}}
@keyframes puppet-sway{from{rotate:-3deg}to{rotate:3deg}}

/* A full-height wordless finale. Water, mist and foliage have their own planes. */
.finale{padding:0;background:#121113;min-height:100svh}
.finale-animation{height:100svh;min-height:680px;position:relative;overflow:clip;isolation:isolate}
.waterfall-landscape{position:absolute;left:50%;top:0;height:100%;aspect-ratio:2/3;min-width:100%;translate:-50% 0;transform:translate3d(0,calc(var(--far-y) * .12),0) scale(1.04);transform-origin:50% 50%}
.waterfall-landscape>img{display:block;width:100%;height:100%;object-fit:cover}
.water-stream{position:absolute;background:repeating-linear-gradient(178deg,transparent 0 8px,#fff4d86b 11px,transparent 18px 32px),repeating-linear-gradient(91deg,transparent 0 7px,#fff8dd55 8px,transparent 10px 14px);background-size:100% 64px,100% 100%;mix-blend-mode:screen;opacity:.5;mask-image:radial-gradient(ellipse,#000 35%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse,#000 35%,transparent 72%);animation:water-flow 1.4s linear infinite;animation-play-state:paused}
.water-stream-upper{left:40.5%;top:27.8%;width:15%;height:9.3%;rotate:-3deg}
.water-stream-lower{left:43%;top:36.6%;width:21%;height:6%;animation-duration:1s;animation-delay:-.7s}
.waterfall-spray{position:absolute;left:32%;top:39.7%;width:42%;height:5%;border-radius:50%;background:radial-gradient(ellipse,#fff1d879,transparent 70%);animation:water-spray 4.8s ease-in-out infinite alternate;animation-play-state:paused}
.lake-shimmer{position:absolute;left:7%;right:6%;top:43%;bottom:0;background:repeating-linear-gradient(179deg,transparent 0 5px,#f3d7ab44 6px,transparent 7px 15px);mask-image:linear-gradient(transparent,#0008 9%,#0003 70%,transparent);-webkit-mask-image:linear-gradient(transparent,#0008 9%,#0003 70%,transparent);mix-blend-mode:screen;opacity:.25;animation:lake-ripple 6s linear infinite;animation-play-state:paused}
.finale .scene-camera{height:100%;transform:none}
.finale .scene-distant,.finale .scene-center-shade{display:none}
.finale .scene-tree{width:68%;max-width:480px}
.finale .scene-tree-left{left:-42%;top:6%}
.finale .scene-tree-right{right:-42%;top:12%}
.finale .scene-bouquet{width:65%;bottom:-35px}
.finale .scene-bouquet-left{left:-35%}.finale .scene-bouquet-right{right:-35%}
.finale .scene-mist{top:38%;height:10%;opacity:.12}
.finale .scene-birds{color:#efe1c5;opacity:.8}
.finale .bird g{stroke:#23151a;stroke-width:.65}
.invitation-open .finale.scene-active :is(.water-stream,.waterfall-spray,.lake-shimmer){animation-play-state:running}
.motion-paused :is(.water-stream,.waterfall-spray,.lake-shimmer){animation-play-state:paused!important}
@keyframes water-flow{to{background-position:0 128px,0 12px}}
@keyframes water-spray{from{opacity:.4;transform:translateX(-8px) scale(.9)}to{opacity:.8;transform:translateX(9px) scale(1.15)}}
@keyframes lake-ripple{from{background-position:0 0;transform:scaleX(.99)}to{background-position:12px 45px;transform:scaleX(1.02)}}

/* Auto-scroll always has a visible pause control and yields to guest input. */
.auto-scroll-toggle{position:fixed;z-index:55;right:70px;bottom:105px;display:flex;align-items:center;gap:7px;min-height:39px;padding:8px 13px;border:1px solid #d6c09966;border-radius:30px;background:#28191de8;color:#f3dfc4;box-shadow:0 4px 12px #0002;font-size:10px;line-height:1.3;transition:opacity .3s,background .3s}
.auto-scroll-toggle svg{width:14px;height:14px;flex:none}
.auto-scroll-toggle .auto-play{fill:currentColor;stroke:none;width:12px}
.auto-scroll-toggle .auto-pause{display:none;stroke-width:2.5}
.auto-scroll-toggle.is-running .auto-pause{display:block}
.auto-scroll-toggle.is-running .auto-play{display:none}
.bottom-nav{transition:opacity .5s,visibility .5s}
.at-finale .bottom-nav{opacity:0;visibility:hidden;pointer-events:none}
.at-finale .auto-scroll-toggle{right:70px;bottom:24px;width:39px;padding:10px;justify-content:center}
.at-finale .auto-scroll-toggle span{display:none}
.at-finale .music-toggle{bottom:24px}
.music-toggle{transition:bottom .4s}

@media(max-width:760px){
 .cover-content{left:30px;right:30px;bottom:15svh;padding:20px 8px}
 .cover-content h2{font-size:clamp(61px,17vw,75px)}
 .cover-intro{font-size:12px}.cover-content .guest-block{margin:16px 0 14px}
 .wayang-interlude{height:180px;--cross-distance:195px}
 .wayang-actor{top:10px;height:160px;width:108px;left:calc(50% - 54px)}
 .auto-scroll-toggle{right:max(65px,calc((100vw - 430px)/2));bottom:101px}
 .at-finale .auto-scroll-toggle{right:max(65px,calc((100vw - 430px)/2))}
}
@media(max-height:740px){.cover-content{bottom:10svh;padding-top:14px;padding-bottom:14px}.cover-content h2{font-size:60px}.cover-content .cover-note{display:none}.cover-top{top:3svh}}
@media(prefers-reduced-motion:reduce){
 .cover.is-opening,.cover.is-opening .joglo-art,.cover.is-opening .joglo-door,.cover.is-opening .cover-content,.cover.is-opening .cover-top{animation:none!important}
 .wayang-actor,.wayang-actor img,.water-stream,.waterfall-spray,.lake-shimmer{animation:none!important}
 .wayang-from-left{transform:translateX(-65px);opacity:1}.wayang-from-right{transform:translateX(65px);opacity:1}
 .waterfall-landscape{transform:none}
}

/* Compact gunungan keeps the verse inside its silhouette, away from the frame. */
.verse.verse-gunungan{width:230px;max-width:100%;height:307px;margin:28px auto 5px;padding:0;border:0;perspective:850px}
.gunungan-turn{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.gunungan-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.gunungan-back{transform:rotateY(180deg)}
.gunungan-outline{display:block;width:100%;height:100%;fill:none;stroke:#c9ae7c;stroke-width:1.1}
.gunungan-body{fill:#54202d;stroke:#ab8757;stroke-width:1.8}
.gunungan-rim{stroke:#dec89f;stroke-width:.75;fill:none}
.gunungan-stem{fill:#54202d;stroke:#ab8757}
.gunungan-flower{stroke:#dbc398;fill:none;stroke-width:1;opacity:.8}
.gunungan-copy{position:absolute;top:42%;left:16%;right:16%;color:#fff1de;text-align:center}
.verse-gunungan .gunungan-copy p{font-family:var(--sans);font-style:normal;font-size:11.2px;line-height:1.65;letter-spacing:0;margin:0 0 11px;color:#fff1de}
.gunungan-copy>span{display:block;font-size:8px;line-height:1.6;letter-spacing:.01em;color:#eed5b1}
.verse-gunungan.has-turned .gunungan-turn{animation:gunungan-once 1.65s cubic-bezier(.22,.65,.25,1) 1 both}
@keyframes gunungan-once{0%{transform:rotateY(-180deg)}100%{transform:rotateY(0)}}
@media(prefers-reduced-motion:reduce){.verse-gunungan.has-turned .gunungan-turn{animation:none}.has-played .wayang-actor{animation:none!important}}