/* A scroll score for the garden: physical depth, a quiet page turn, room to read. */
.motion-ready .reveal{opacity:1;transform:none;transition:none}
.motion-ready .motion-reveal{
 opacity:0;
 translate:0 34px;
 transition:opacity .75s cubic-bezier(.22,1,.36,1),translate 1s cubic-bezier(.16,1,.3,1),clip-path 1s cubic-bezier(.16,1,.3,1);
 transition-delay:var(--entrance-delay,0ms);
}
.motion-ready .motion-reveal.motion-heading{
 translate:0 48px;
}
.motion-ready .motion-reveal.motion-copy{translate:0 25px}
.motion-ready .motion-reveal.motion-row{translate:0 20px}
.motion-ready .motion-reveal.motion-entered,
.motion-ready .motion-reveal:focus-within{
 opacity:1;
 translate:0 0;
 clip-path:none;
}
.motion-ready .motion-heading.motion-entered{animation:heading-unfold 1s cubic-bezier(.16,1,.3,1) both}
.motion-ready .motion-heading:focus-within{clip-path:none;animation:none}
/* Apply the wipe after intersection: clipping an unobserved heading can hide it from the observer. */
@keyframes heading-unfold{
 from{clip-path:inset(-12% -3% 100% -3%)}
 to{clip-path:inset(-12% -3% -18% -3%)}
}
.motion-ready #panel .motion-reveal,
.motion-ready .chapter .motion-reveal{
 transition:opacity .75s cubic-bezier(.22,1,.36,1),translate 1s cubic-bezier(.16,1,.3,1),clip-path 1s cubic-bezier(.16,1,.3,1),background .25s,color .25s;
 transition-delay:var(--entrance-delay,0ms);
}
.motion-ready .motion-reveal:focus-within,
.motion-ready #panel .motion-reveal:focus-within,
.motion-ready .chapter .motion-reveal:focus-within{transition:none}

/* The canvas and its accessible petal controls share this axis-aligned transform. */
.motion-ready .stage .rose-art{
 transform:translateX(-50%) translateY(calc(var(--scroll-depth,0)*155px)) scale(calc(1 + var(--scroll-depth,0)*.14));
 transform-origin:50% 42%;
 opacity:clamp(0,calc(1 - var(--scroll-depth,0)*.72),1);
}
.motion-ready .stage .bg{
 translate:0 calc(var(--scroll-depth,0)*90px);
 scale:calc(1.06 + var(--scroll-depth,0)*.045);
 transform-origin:50% 58%;
}
.motion-ready .stage .hero-word{translate:0 calc(var(--scroll-depth,0)*45px)}
.motion-ready .stage .bloom-invitation,
.motion-ready .stage .hero-caption{
 transform:translateY(calc(var(--scroll-depth,0)*-35px));
 opacity:clamp(0,calc(1 - var(--scroll-depth,0)*3),1);
}
.motion-ready .stage .bloom-invitation{transform:translateX(-50%) translateY(calc(var(--scroll-depth,0)*-35px))}
.motion-ready .stage .hero-index,.motion-ready .stage .hero-index:focus-visible{opacity:1}
.motion-ready .stage:has(.garden-trail[open]) .bloom-invitation,
.motion-ready .stage.petal-hovered .bloom-invitation{opacity:0}

/* The frames remain stationary; the printed botanical studies move inside them. */
.motion-ready .feature-art .specimen,
.motion-ready .chapter-plate>.specimen{
 translate:0 var(--plate-drift,0px);
 scale:calc(1.07 + (1 - var(--section-reveal,1))*.07);
 transform-origin:50% 55%;
}
.motion-ready .feature-intro h2,
.motion-ready .section-heading h1,
.motion-ready #work>.wrap>h2,
.motion-ready #max h2,
.motion-ready #contact h2{
 transform:translateY(calc(var(--section-drift,0px)*.38));
}
.motion-ready .section-kicker{
 position:relative;
 border-top-color:transparent!important;
}
.motion-ready .section-kicker:before{
 content:'';
 position:absolute;
 left:0;right:0;top:0;height:1px;
 background:#273b2947;
 transform:scaleX(var(--section-reveal,1));
 transform-origin:left;
 pointer-events:none;
}
.motion-ready .feature-info{border-bottom-color:transparent;position:relative}
.motion-ready .feature-info:after{
 content:'';
 position:absolute;left:0;right:0;bottom:0;height:1px;
 background:var(--rule);
 transform:scaleX(var(--section-reveal,1));
 transform-origin:left;
}
.motion-ready body>nav:after{
 background:linear-gradient(90deg,#b05239,#ead7a4);
 opacity:.85;
}

/* The project is its own reading surface. Fixed controls stay anchored to the window. */
.panel-reading-shade{display:none}
.motion-ready .panel-reading-shade{
 display:block;
 position:fixed;inset:0 0 auto;height:100px;z-index:10;
 background:linear-gradient(#182219 70%,#18221900);
 opacity:clamp(0,calc(var(--panel-depth,0)*4),1);
 pointer-events:none;
}
.motion-ready #panel:before{
 transform:translateY(calc(var(--panel-depth,0)*-64px)) rotate(calc(-18deg + var(--panel-depth,0)*7deg)) scale(calc(1 + var(--panel-depth,0)*.12));
 opacity:calc(.07 + var(--panel-depth,0)*.025);
}
.motion-ready #panel:after{
 content:'';
 position:fixed;left:0;right:0;top:0;height:2px;z-index:111;
 background:linear-gradient(90deg,#b4563e,#e5cf9a);
 transform:scaleX(var(--panel-progress,0));
 transform-origin:left;
 pointer-events:none;
}
.motion-ready #panel #pTitle{
 translate:0 calc(var(--panel-depth,0)*-18px);
 scale:calc(1 - var(--panel-depth,0)*.035);
 transform-origin:left center;
}
.motion-ready #panel #pDeco{translate:0 calc(var(--panel-depth,0)*-9px)}
.motion-ready #panel #pBody p{scroll-margin-top:100px}
.motion-ready #panel .motion-copy.motion-reveal{translate:0 24px}
.motion-ready #panel .motion-row.motion-reveal{translate:0 16px}
.motion-ready #panel .motion-entered.motion-reveal,
.motion-ready #panel .motion-reveal:focus-within{translate:0 0}

@media(max-width:760px){
 .motion-ready .motion-reveal{translate:0 24px}
 .motion-ready .motion-reveal.motion-heading{translate:0 30px}
 .motion-ready .motion-reveal.motion-entered,.motion-ready .motion-reveal:focus-within{translate:0 0}
 .motion-ready .stage .rose-art{transform:translateX(-50%) translateY(calc(var(--scroll-depth,0)*85px)) scale(calc(1 + var(--scroll-depth,0)*.075))}
 .motion-ready .stage .bg{translate:0 calc(var(--scroll-depth,0)*48px);scale:1.065}
 .motion-ready #panel:before{opacity:.055;transform:translateY(calc(var(--panel-depth,0)*-36px)) rotate(calc(-18deg + var(--panel-depth,0)*4deg))}
 .motion-ready #panel #pTitle{translate:0 calc(var(--panel-depth,0)*-10px);scale:calc(1 - var(--panel-depth,0)*.02)}
}
@media(prefers-reduced-motion:reduce){
 .motion-reveal{opacity:1!important;translate:none!important;clip-path:none!important}
 .motion-ready .stage .rose-art{transform:translateX(-50%);opacity:1}
 .motion-ready .stage .bg,.motion-ready .stage .hero-word,
 .motion-ready .feature-art .specimen,.motion-ready .chapter-plate>.specimen,
 .motion-ready #panel #pTitle,.motion-ready #panel #pDeco{translate:none;scale:none}
 .motion-ready .stage .bloom-invitation{transform:translateX(-50%);opacity:1}
 .motion-ready .stage .hero-caption,.motion-ready .feature-intro h2,
 .motion-ready .section-heading h1,.motion-ready #work>.wrap>h2,
 .motion-ready #max h2,.motion-ready #contact h2{transform:none;opacity:1}
 .motion-ready #panel:before{transform:rotate(-18deg)}
 .motion-ready #panel:after{display:none}
 .motion-ready .panel-reading-shade{display:none}
}