.armita-intro .intro-layout{align-items:start}
.armita-intro .intro-note.invitation-garden{position:relative;isolation:isolate;width:100%;max-width:440px;aspect-ratio:9/16;margin:110px auto 0;padding:0;border:0;transform:none;background:url('assets/invitation-garden.webp') center/100% 100% no-repeat;box-shadow:0 18px 44px #574d2420;border-radius:5px;overflow:hidden}
.armita-intro .invitation-garden:before{display:none}
.garden-art{position:absolute;inset:0;pointer-events:none}
.garden-words{position:absolute;top:25%;left:32%;right:12%;text-align:center;color:#5a343c}
.invitation-garden .note-label{display:block;font:14px/1.5 var(--serif);letter-spacing:.8px;color:#596040}
.invitation-garden .garden-words p{font:clamp(25px,2.5vw,36px)/1.3 var(--serif);letter-spacing:-.4px;margin:26px 0 22px;color:#63333f}
.invitation-garden .garden-line{display:block}.invitation-garden .note-signature{font:44px/1.3 'Parisienne',cursive;color:#733843}
.garden-pending .garden-line{opacity:0}
.garden-fairy{position:absolute;left:7%;top:30%;width:27%;height:23%;transform-origin:45% 78%}
.garden-fairy-body,.garden-fairy-wings,.garden-fairy-arm,.garden-flower,.garden-butterfly span{position:absolute;background-image:url('assets/invitation-sprites.webp');background-repeat:no-repeat;background-size:300% 200%}
.garden-fairy-body{inset:0;background-position:0 0;z-index:2}
.garden-fairy-wings{inset:-20% 15% 20% -15%;background-position:100% 0;transform-origin:80% 75%;z-index:1}
.garden-fairy-arm{width:65%;height:65%;top:25%;left:46%;background-position:50% 0;transform-origin:10% 45%;z-index:3}
.garden-flower{width:22%;height:25%;transform-origin:50% 96%}.garden-bells{left:0;top:7%;background-position:50% 100%}.garden-lavender{right:-2%;top:48%;background-position:100% 100%}
.garden-butterfly{position:absolute;left:60%;top:58%;width:19%;aspect-ratio:1;transform-origin:center}.garden-butterfly span{inset:0;background-position:0 100%;transform-origin:50% 50%}.butterfly-left{clip-path:inset(0 50% 0 0)}.butterfly-right{clip-path:inset(0 0 0 50%)}
.garden-live .garden-flower{animation:garden-breeze 4s ease-in-out infinite alternate}.garden-live .garden-lavender{animation-delay:-1.6s;animation-duration:5.4s}
.garden-live .garden-fairy-wings{animation:garden-wing .8s ease-in-out infinite alternate}
.garden-live .garden-butterfly{animation:garden-orbit 14s ease-in-out infinite}
.garden-live .butterfly-left{animation:butterfly-beat .22s ease-in-out infinite alternate}.garden-live .butterfly-right{animation:butterfly-beat .22s ease-in-out infinite alternate-reverse}
.garden-glitter{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}
@keyframes garden-breeze{from{transform:rotate(-2deg)}to{transform:rotate(3deg)}}
@keyframes garden-wing{from{transform:perspective(300px) rotateY(-10deg) rotate(-2deg)}to{transform:perspective(300px) rotateY(35deg) rotate(3deg)}}
@keyframes butterfly-beat{from{transform:perspective(250px) rotateY(-12deg)}to{transform:perspective(250px) rotateY(68deg)}}
@keyframes garden-orbit{0%,100%{transform:translate(0,0) rotate(-12deg)}25%{transform:translate(-70%,-150%) rotate(18deg)}50%{transform:translate(55%,-260%) rotate(-22deg)}75%{transform:translate(55%,90%) rotate(15deg)}}
@media(max-width:850px){.armita-intro .intro-note.invitation-garden{margin-top:36px;width:min(100%,410px)}.invitation-garden .garden-words p{font-size:34px}}
@media(max-width:430px){.invitation-garden .garden-words p{font-size:29px}.invitation-garden .note-signature{font-size:39px}.invitation-garden .note-label{font-size:14px;letter-spacing:0}}
@media(prefers-reduced-motion:reduce){.invitation-garden *{animation:none!important}.garden-pending .garden-line{opacity:1}}

/* Align the recovered sprite landmarks with the mushroom and shoulder. */
.armita-intro .intro-note.invitation-garden{aspect-ratio:948/1659}
.garden-fairy{left:3.2%;top:32%;width:28%;height:18%;transform-origin:41.4% 82.6%}
.garden-fairy-body{background-size:300% 177.777778%;filter:url('#garden-ink')}
.garden-fairy-arm{width:70%;height:62.222%;left:37.5%;top:10.5%;transform-origin:31.25% 42%;filter:url('#garden-ink')}
.garden-fairy-wings{inset:auto;left:-24%;top:-41%;width:95%;height:84.44%;transform-origin:79.69% 83%;filter:url('#garden-ink')}
.garden-flower,.garden-butterfly span{filter:url('#garden-ink')}
.garden-butterfly{width:24%;aspect-ratio:512/424}
.garden-butterfly span{background-size:300% 241.51%;background-position:0 100%;transform-origin:48.63% 39.39%}
.garden-bells{left:1%;top:5%;width:17%;height:20%}
.garden-lavender{right:0;top:54%;width:18%;height:24%}

.garden-fairy{top:30.6%}
.garden-fairy-wings{left:-28.4%;top:-30%}
.garden-palm{position:absolute;left:76.76%;top:38.48%;width:1px;height:1px}
.butterfly-left{clip-path:inset(0 51.37% 0 0)}.butterfly-right{clip-path:inset(0 0 0 48.63%)}
.garden-live .butterfly-right{animation-name:butterfly-beat-right;animation-direction:alternate}
@keyframes butterfly-beat-right{from{transform:perspective(250px) rotateY(12deg)}to{transform:perspective(250px) rotateY(-68deg)}}

/* Match the chapter's cream while preserving the botanical ink colors. */
.armita-intro .intro-note.invitation-garden{background-color:#f3ecdd;background-image:linear-gradient(#f3ecdd70,#f3ecdd70),url('assets/invitation-garden.webp');box-shadow:0 12px 30px #574d240c;border-radius:2px}
.invitation-garden:after{content:'';position:absolute;inset:0;z-index:8;pointer-events:none;box-shadow:inset 0 0 18px 7px #f3ecddcc}
/* Stalks sway around their illustrated roots, independently of the text cue. */
.invitation-garden .garden-bells{left:0;top:6%;width:25%;height:29%;transform-origin:40.625% 96.3%}
.invitation-garden .garden-lavender{right:0;top:49%;width:25%;height:31%;transform-origin:73.438% 96.3%}
.invitation-garden .garden-flower{animation:garden-wind-bells 4.8s ease-in-out infinite;animation-play-state:paused}
.invitation-garden .garden-lavender{animation-name:garden-wind-lavender;animation-duration:6.2s;animation-delay:-2.1s}
.invitation-garden.garden-breeze-live .garden-flower{animation-play-state:running}
@keyframes garden-wind-bells{0%,100%{transform:rotate(-4deg)}35%{transform:rotate(6deg)}65%{transform:rotate(1deg)}82%{transform:rotate(3deg)}}
@keyframes garden-wind-lavender{0%,100%{transform:rotate(3deg)}40%{transform:rotate(-7deg)}70%{transform:rotate(-2deg)}}

/* The botanical illustration now sits directly on the chapter, without a card. */
.armita-intro .intro-note.invitation-garden{background:none;box-shadow:none;border:0;border-radius:0;overflow:visible}
.invitation-garden:after{display:none}
.garden-botanical{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;filter:none;pointer-events:none}

/* Seat follows the completed mushroom illustration. */
.garden-fairy{top:34.8%}

/* Blend only the outer empty margin; keep original illustration colors. */
.garden-botanical{mask-image:linear-gradient(to right,transparent,#000 2%,#000 98%,transparent),linear-gradient(to bottom,transparent,#000 2%,#000 98%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent,#000 2%,#000 98%,transparent),linear-gradient(to bottom,transparent,#000 2%,#000 98%,transparent);-webkit-mask-composite:source-in}
/* Alpha-only center blend: expose the actual chapter without recoloring ink. */
.garden-botanical{
 mask-image:linear-gradient(to right,transparent,#000 2%,#000 98%,transparent),linear-gradient(to bottom,transparent,#000 2%,#000 98%,transparent),radial-gradient(ellipse 33% 39% at 50% 43%,transparent 0%,transparent 58%,#000 100%);
 mask-composite:intersect,intersect;
 -webkit-mask-image:linear-gradient(to right,transparent,#000 2%,#000 98%,transparent),linear-gradient(to bottom,transparent,#000 2%,#000 98%,transparent),radial-gradient(ellipse 33% 39% at 50% 43%,transparent 0%,transparent 58%,#000 100%);
 -webkit-mask-composite:source-in,source-in;
}
/* Center invitation copy within the clear botanical opening. */
.invitation-garden .garden-words{left:25%;right:25%;top:27%;text-align:center}
.invitation-garden .garden-words p{font-size:clamp(25px,2.3vw,32px);letter-spacing:-.4px;line-height:1.35}
@media(max-width:850px){.invitation-garden .garden-words p{font-size:30px}}
@media(max-width:430px){.invitation-garden .garden-words{left:23%;right:23%}.invitation-garden .garden-words p{font-size:26px}}