/* Emil motion layer: ambient loops use composited transforms/opacity;
   controls remain immediate for keyboard and reduced-motion users. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-drawer:cubic-bezier(.32,.72,0,1);--ease-ambient:cubic-bezier(.45,0,.55,1)}

/* One real hero photo, with a slow, continuous camera movement. */
.hero-picture img{transform-origin:55% 58%;animation:hero-breathe 12s var(--ease-ambient) infinite alternate}
@keyframes hero-breathe{from{transform:scale(1)}to{transform:scale(1.08)}}
.hero-seal{position:absolute;right:max(64px,calc((100vw - 1280px)/2));top:calc(var(--header) + 44px);width:154px;height:154px;border-radius:50%;background:rgba(247,248,245,.94);color:var(--green);pointer-events:none;animation:seal-float 5s var(--ease-ambient) infinite alternate}
.seal-orbit{width:100%;height:100%;animation:seal-turn 22s linear infinite}
.seal-orbit text{fill:currentColor;font:600 10.8px Manrope,Arial,sans-serif;letter-spacing:1.9px}
.seal-sun{position:absolute;inset:50% auto auto 50%;width:50px;height:50px;transform:translate(-50%,-50%);fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round}
@keyframes seal-float{from{transform:translateY(-6px) rotate(-3deg)}to{transform:translateY(7px) rotate(3deg)}}
@keyframes seal-turn{to{transform:rotate(360deg)}}

/* Duplicated decorative text gives the loop an exact seamless distance. */
.brand-marquee{overflow:hidden;background:var(--paper);color:var(--green);padding-block:29px;border-bottom:1px solid var(--line);pointer-events:none;contain:paint}
.marquee-track{display:flex;width:max-content;animation:marquee-flow 26s linear infinite}
.marquee-group{display:flex;align-items:center;gap:38px;flex:none;padding-right:38px;font-size:clamp(30px,3.5vw,51px);line-height:1.35;letter-spacing:-.045em;white-space:nowrap}
.marquee-group em{font-family:var(--serif);font-weight:400;letter-spacing:-.035em}
.marquee-flower{font-size:.65em;line-height:1;display:inline-block;animation:seal-turn 15s linear infinite}
@keyframes marquee-flow{to{transform:translateX(-50%)}}

/* Coffee illustration and a soft sweep of light stay separate from the photo. */
.coffee-copy{position:relative;isolation:isolate;overflow:hidden}
.coffee-copy::before{content:"";position:absolute;inset:-35% auto -35% -75%;width:62%;z-index:-1;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);transform:translateX(0) rotate(20deg);animation:coffee-light 9s var(--ease-ambient) infinite}
@keyframes coffee-light{0%{transform:translateX(-30%) rotate(20deg);opacity:0}18%{opacity:.85}75%{opacity:.85}100%{transform:translateX(350%) rotate(20deg);opacity:0}}
.coffee-kicker{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:8px;min-height:72px}
.coffee-kicker .coffee-label{margin:0}
.coffee-ritual{width:91px;height:88px;flex:none;overflow:visible;fill:none;stroke:var(--green);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.steam path{transform-box:fill-box;transform-origin:center;animation:steam-rise 3.1s var(--ease-ambient) infinite}
.steam path:nth-child(2){animation-delay:-1s}.steam path:nth-child(3){animation-delay:-2s}
.cup-rock{transform-origin:55px 95px;animation:cup-sway 5s var(--ease-ambient) infinite alternate}
@keyframes steam-rise{0%{transform:translateY(5px) scaleX(.85);opacity:.1}35%{opacity:.85}100%{transform:translateY(-14px) scaleX(1.1);opacity:0}}
@keyframes cup-sway{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}

/* Once-only entrances. Focused content is never left visually hidden. */
.motion-ready [data-reveal]{transition:opacity 620ms var(--ease-out),transform 620ms var(--ease-out);transition-delay:var(--reveal-delay,0ms)}
.motion-ready [data-reveal]:not(.is-revealed){opacity:0;transform:translateY(25px)}
.motion-ready [data-reveal].is-revealed,.motion-ready [data-reveal]:focus-within{opacity:1;transform:none}

/* Tactile controls, with hover exclusively on precise pointing devices. */
.button,.icon-button,.menu-toggle,.close-button,.mobile-actions a{transition:transform 150ms var(--ease-out),background-color 180ms ease,color 180ms ease}
.button>span,.text-link>span,.gallery-caption>span,.mobile-actions a>span{transition:transform 200ms var(--ease-out)}
.text-link{transition:color 180ms ease}
.gallery-item img{transition:transform 550ms var(--ease-out)}
.gallery-caption{transition:color 180ms ease}
.mobile-actions{transition:opacity 200ms var(--ease-out),transform 240ms var(--ease-drawer),visibility 240ms}
.button:active,.icon-button:active,.menu-toggle:active,.close-button:active,.mobile-actions a:active{transform:scale(.97);transition-duration:100ms}
.desktop-nav a,.navigation-dialog nav a{position:relative}
.desktop-nav a::after,.navigation-dialog nav a::after{content:"";position:absolute;bottom:1px;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform 220ms var(--ease-out)}
@media(hover:hover) and (pointer:fine){
 .button:hover{transform:translateY(-2px)}
 .button:hover>span,.text-link:hover>span,.mobile-actions a:hover>span{transform:translate(3px,-3px)}
 .icon-button:hover{transform:translateY(-2px)}
 .close-button:hover{transform:rotate(8deg)}
 .gallery-item:hover img{transform:scale(1.04)}
 .gallery-item:hover .gallery-caption>span{transform:translate(3px,-3px)}
 .desktop-nav a:hover::after,.navigation-dialog nav a:hover::after{transform:scaleX(1);transform-origin:left}
 .button:active,.icon-button:active,.close-button:active{transform:scale(.97)}
}

/* Native dialog semantics remain in charge of focus, Escape and the backdrop. */
dialog{transform-origin:center}
dialog::backdrop{opacity:1;transition:opacity 180ms ease}
dialog[data-closing]::backdrop{opacity:0}
@starting-style{dialog[data-animated][open]::backdrop{opacity:0}}
.lightbox-stage{touch-action:pan-y pinch-zoom}
.lightbox-stage img{user-select:none;-webkit-user-drag:none}

/* Stop work outside the viewport or in a background tab, without a UI switch. */
.motion-ready [data-ambient]:not(.is-inview) *,.motion-ready [data-ambient]:not(.is-inview) *::before,.motion-ready [data-ambient]:not(.is-inview) *::after,
html.motion-suspended [data-ambient] *,html.motion-suspended [data-ambient] *::before,html.motion-suspended [data-ambient] *::after{animation-play-state:paused!important}

html.keyboard-mode{scroll-behavior:auto}
.keyboard-mode [data-reveal],.keyboard-mode .button,.keyboard-mode .icon-button,.keyboard-mode .menu-toggle,.keyboard-mode .close-button,.keyboard-mode .mobile-actions,.keyboard-mode .mobile-actions a{transition:none!important}
.keyboard-mode dialog::backdrop{transition:none!important}
.keyboard-mode .button:active,.keyboard-mode .icon-button:active,.keyboard-mode .menu-toggle:active,.keyboard-mode .close-button:active,.keyboard-mode .mobile-actions a:active{transform:none}
@media(min-width:1024px){
 .brand-marquee{padding-block:18px}
 .brand-marquee .marquee-group{font-size:clamp(26px,2vw,30px)}
 .marquee-group{gap:26px;padding-right:26px}
}
@media(max-width:1023px){.hero-seal{right:32px;top:calc(var(--header) + 32px);width:130px;height:130px}.coffee-ritual{width:76px;height:74px}}
@media(max-width:767px){
 .hero-seal{right:22px;top:calc(var(--header) + 26px);width:108px;height:108px}
 .seal-sun{width:37px;height:37px}
 .brand-marquee{padding-block:22px}
 .marquee-group{font-size:31px;gap:25px;padding-right:25px}
 .marquee-track{animation-duration:30s}
 .coffee-kicker{min-height:66px;margin-bottom:6px}
 .coffee-ritual{width:74px;height:72px}
 .motion-ready [data-reveal]{transition-duration:520ms;transition-delay:0ms}
 .hero-picture img{animation-duration:14s}
}
@media(max-height:600px){.hero-seal{width:90px;height:90px;top:calc(var(--header) + 18px)}.seal-sun{width:31px;height:31px}}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after,*::backdrop{animation:none!important;transition:none!important}
 html{scroll-behavior:auto}
 .hero-picture img,.hero-seal,.seal-orbit,.marquee-track,.marquee-flower,.steam path,.cup-rock{transform:none}
 .steam path{opacity:.55}
 .coffee-copy::before{display:none}
 .motion-ready [data-reveal],.motion-ready [data-reveal]:not(.is-revealed){opacity:1;transform:none}
 .gallery-item:hover img,.button:hover,.icon-button:hover,.close-button:hover,.button:active,.icon-button:active,.menu-toggle:active,.close-button:active,.mobile-actions a:active{transform:none}
 .button:hover>span,.text-link:hover>span,.gallery-item:hover .gallery-caption>span,.mobile-actions a:hover>span{transform:none}
 .brand-marquee{padding-inline:22px}
 .marquee-track{display:block;width:100%}
 .marquee-group{white-space:normal;flex-wrap:wrap;justify-content:center;gap:12px 20px;padding:0;font-size:clamp(23px,3vw,38px)}
 .marquee-group+.marquee-group{display:none}
 .marquee-flower{font-size:.55em}
}