/* Four overlapping canopies open in sequence, with perspective and a camera push. */
.forest-gate{position:absolute;inset:0;overflow:hidden;perspective:1200px;background:#101512}
.forest-distance{position:absolute;inset:-3%;background:url('assets/garden-depth.webp') center 35%/cover;transform:scale(1.05)}
.forest-curtain{position:absolute;top:-8%;width:140%;height:116%;transform-origin:50% 100%;will-change:transform}
.forest-curtain img{width:100%;height:100%;object-fit:fill;transform-origin:35% 95%;animation:canopy-breathe 9s ease-in-out infinite alternate}
.forest-left{left:-68%;--exit:-76%;--turn:-24deg}
.forest-right{right:-68%;--exit:76%;--turn:24deg}
.forest-right img{scale:-1 1;animation-delay:-4s}
.forest-rear{filter:brightness(.65);top:-17%;width:150%;height:121%;z-index:1}
.forest-front{z-index:2}
.forest-shade{position:absolute;inset:0;z-index:3;background:linear-gradient(#070b0a45,transparent 30%,#100b0d66 70%,#100b0da6);pointer-events:none}
.cover-top,.cover-content{z-index:4}
.cover-content{background:radial-gradient(ellipse,#100b0de8 15%,#100b0d99 55%,transparent 75%)}
.cover.is-opening{animation:forest-entry 8s linear both}
.cover.is-opening .forest-front.forest-left{animation:canopy-open 3.2s .4s cubic-bezier(.3,.55,.2,1) both}
.cover.is-opening .forest-front.forest-right{animation:canopy-open 3.2s 1.6s cubic-bezier(.3,.55,.2,1) both}
.cover.is-opening .forest-rear.forest-left{animation:canopy-open 3.2s 2.8s cubic-bezier(.3,.55,.2,1) both}
.cover.is-opening .forest-rear.forest-right{animation:canopy-open 3.2s 4s cubic-bezier(.3,.55,.2,1) both}
.cover.is-opening .forest-distance{animation:forest-approach 8s ease-in-out both}
@keyframes canopy-breathe{from{rotate:-1deg}to{rotate:1.5deg}}
@keyframes canopy-open{from{transform:translateX(0) rotateY(0)}to{transform:translateX(var(--exit)) rotateY(var(--turn)) scale(1.12)}}
@keyframes forest-approach{to{transform:scale(1.28)}}
@keyframes forest-entry{0%,86%{opacity:1}100%{opacity:0}}
/* Flowers sit outside the photograph, leaving faces and captions unobstructed. */
.floral-frame{position:relative;isolation:isolate;margin:38px auto 35px;max-width:342px}
.floral-frame> .portrait-window,.floral-frame> .oval-photo,.floral-frame> .story-image,.floral-frame> .closing-portrait{margin:0;width:100%;max-width:none}
.floral-frame.flower-oval{width:218px;margin:0 auto 28px}
.floral-frame.flower-story{margin:0 auto 45px;max-width:none}
.floral-frame.flower-closing{width:235px;margin:0 auto 45px}
.floral-frame.flower-gallery{grid-column:1/-1;width:100%;max-width:none;margin:0}
.frame-flower{position:absolute;width:39%;height:43%;bottom:3%;z-index:4;pointer-events:none;opacity:0;translate:var(--flower-x) 24px;scale:.86;transition:opacity .8s ease,translate 1.3s cubic-bezier(.2,.7,.2,1),scale 1.3s ease}
.frame-flower-left{left:-15%;--flower-x:-22px}
.frame-flower-right{right:-15%;--flower-x:22px;transition-delay:.2s}
.frame-flower-crop{position:absolute;inset:0;overflow:hidden;mask-image:linear-gradient(transparent,#000 22%);transform:rotate(-13deg)}
.frame-flower-right .frame-flower-crop{transform:scaleX(-1) rotate(-13deg)}
.frame-flower-crop img{position:absolute;bottom:0;left:-5%;width:150%;max-width:none;height:auto;object-fit:contain}
.flowers-visible .frame-flower{opacity:1;translate:0 0;scale:1}
@media(prefers-reduced-motion:reduce){.forest-curtain img,.cover.is-opening,.cover.is-opening .forest-curtain,.cover.is-opening .forest-distance{animation:none}.frame-flower{transition:none;opacity:1;translate:0 0;scale:1}}
/* Stagger the ornament after the photograph is fully revealed. */
.flower-oval>.oval-photo{opacity:0;scale:.94;transition:opacity .7s ease,scale .9s ease}
.flower-oval.flowers-visible>.oval-photo{opacity:1;scale:1}
.flower-oval .frame-flower{transition-delay:0s}
.flower-oval.flowers-visible .frame-flower-right{transition-delay:.9s}
.flower-oval.flowers-visible .frame-flower-left{transition-delay:1.8s}
@media(prefers-reduced-motion:reduce){.flower-oval>.oval-photo{opacity:1;scale:1;transition:none}.flower-oval .frame-flower{transition:none!important}}