.hero-image{object-position:center 42%;animation:pan 16s 3.4s ease-in-out infinite alternate}
.hero-image-next{object-position:center 67%;animation:crossfade 16s 3.4s ease-in-out infinite both,pan 16s 3.4s ease-in-out infinite alternate}
.hero-copy{animation:hero-arrive 1s 2.8s both}
.opening-message{position:fixed;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;padding:24px;text-align:center;background:#fff;color:#252725;pointer-events:none;animation:opening-away 3.4s both}
.opening-message p{font-size:clamp(.875rem,1.2vw,1rem);letter-spacing:.06em;animation:opening-copy .9s .15s both}
.opening-message>span{font:400 clamp(1.1rem,2.2vw,2rem)/1.4 Arial,sans-serif;animation:opening-copy 1s .3s both}
.header>.brand,.header>.menu{animation:controls-arrive 3.4s both}
.hero .scroll,.hero .motion-toggle{animation:hero-arrive 1s 3s both}
.manifesto:before{display:none}
.brand-profile-visual.roaster-visual{padding:0}
.roaster-visual img{width:100%;height:100%;object-fit:cover;object-position:center 48%}
@keyframes opening-copy{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes opening-away{0%,65%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes controls-arrive{0%,75%{opacity:0}100%{opacity:1}}
@keyframes hero-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:620px){.opening-message{gap:9px}.hero-image{object-position:48% center}.hero-image-next{object-position:center 67%}}
@media(prefers-reduced-motion:reduce){.opening-message{display:none}.hero-image,.hero-copy,.hero-wash,.header>.brand,.header>.menu,.hero .scroll{opacity:1}}