/* Lightweight motion using existing artwork only. */
.story-viewport{overflow:hidden}
.story-viewport .story-track{overflow:visible;scroll-snap-type:none}
.story-track article{flex-shrink:0}
/* Settle once into the original still-layout coordinates. */
.hero{overflow:visible}
.hero>.petal{animation:petal-drop 2.2s linear 1 backwards,petal-sway 2.2s ease-in-out 1 backwards;pointer-events:none}
.hero>.petal-1{animation-delay:.1s}
.hero>.petal-2{animation-delay:.35s}
.hero>.petal-3{animation-delay:.6s}
.hero>.petal-4{animation-delay:.85s}
.hero>.petal-5{animation-delay:1.1s}
/* Separate the uninterrupted fall from the gentle sideways sway. */
@keyframes petal-drop{
 from{translate:0 -190px;opacity:0}
 to{translate:0 0}
}
@keyframes petal-sway{
 0%{margin-left:-8px;rotate:-7deg}
 50%{margin-left:6px;rotate:5deg}
 100%{margin-left:0;rotate:0deg}
}
.logos.logo-marquee{display:flex;justify-content:flex-start;gap:0;padding:0;width:100%;height:auto;overflow:hidden;flex-wrap:nowrap}
.logo-group{display:flex;flex:none;align-items:center;justify-content:flex-start;gap:1.4vw;width:max-content;padding:0 .7vw;animation:logo-scroll 40s linear infinite}
.logos .logo-group img{flex-shrink:0;width:max(140px,16vw);max-width:none;height:auto;max-height:6.6vw;object-fit:contain;transform:none}
.logos .logo-group img:first-child{width:max(82px,9.5vw);max-width:none}
.logos .logo-group img:nth-child(4){width:max(116px,13.5vw);max-width:none}
@keyframes logo-scroll{to{transform:translateX(-100%)}}
.logo-marquee:hover .logo-group{animation-play-state:paused}

footer{position:relative}

@media(max-width:767px){.logos .logo-group img{max-height:58px}}
@media(prefers-reduced-motion:reduce){.hero>.petal,.logo-group{animation:none!important}.logo-marquee .logo-group:last-child{display:none}.logos.logo-marquee{overflow:auto}}

.dots button[aria-pressed="true"]{background:var(--gradient);transform:scale(1.2)}
.dots button{transition:background .25s,transform .25s}
.cta,.closing-cta{transition:transform .22s ease-out}
@media(hover:hover){
 .cta:hover,.closing-cta:hover{transform:translateY(-2px)}
}
.cta:focus-visible,.closing-cta:focus-visible{transform:translateY(-2px)}
.cta:active,.closing-cta:active{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
 .cta,.closing-cta,.dots button{transition:none}
 .cta:hover,.closing-cta:hover,.cta:focus-visible,.closing-cta:focus-visible,.cta:active,.closing-cta:active{transform:none}
}

/* A very light lift, with room for the shadow inside the slider clip. */
.story-viewport{padding:6px;margin:-6px}
.story-track article{border-radius:12px;box-shadow:0 2px 5px rgba(50,62,86,.045)}

/* Gentle scroll offset, independent of the one-time petal entrance. */
.hero>.petal{transform:translateY(var(--petal-scroll,0px))}
.hero>.petal-4{transform:translateY(var(--petal-scroll,0px)) rotate(18deg)}
.hero>.petal-5{transform:translateY(var(--petal-scroll,0px)) rotate(-25deg)}
@media(prefers-reduced-motion:reduce){.hero{--petal-scroll:0px!important}}

/* Only JS-observed content waits for its own entry into the viewport. */
.reveal-pending{opacity:0}
@media(prefers-reduced-motion:reduce){.reveal-pending{opacity:1}}

/* Soft edges let the continuous logo ribbon enter and leave quietly. */
.logos.logo-marquee{mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}

/* Scroll drift uses transform, leaving the entrance translate/scale independent. */
.about-main-frame{transform:translateY(var(--about-main-scroll,0px));transition:transform 180ms ease-out}
.about-sub{transform:translateY(var(--about-sub-scroll,0px));transition:transform 180ms ease-out}
@media(prefers-reduced-motion:reduce){
 .about-main-frame,.about-sub{transform:none;transition:none}
}