/* Emil design engineering. User-requested expressive ambient motion.
   Decorative layers never intercept input; facts stay stationary. */
:root{--motion-out:cubic-bezier(.23,1,.32,1);--motion-flow:cubic-bezier(.65,0,.35,1)}
.hero-line{display:block}
.hero-image{animation:coffee-breath 20s var(--motion-flow) infinite}
.hero-coffee-seal{position:absolute;right:max(56px,calc((100vw - 1280px)/2));bottom:58px;width:180px;height:180px;pointer-events:none;z-index:1}
.seal-float{position:relative;width:100%;height:100%;animation:seal-float 6s var(--motion-flow) infinite}
.seal-float>svg:first-child{position:absolute;inset:0;width:100%;height:100%;fill:var(--yellow)}
.seal-lettering{position:absolute;inset:0;width:100%;height:100%;animation:seal-turn 22s linear infinite;fill:var(--ink)}
.seal-lettering text{font-family:var(--body);font-size:12px;letter-spacing:2px;font-weight:700}
.seal-cup{position:absolute;width:41%;height:41%;left:29.5%;top:28%;fill:none;stroke:var(--ink);stroke-width:3.3;stroke-linecap:round;stroke-linejoin:round}
.cup-steam path{animation:steam-rise 2.9s var(--motion-flow) infinite;transform-origin:center}
.cup-steam path:nth-child(2){animation-delay:-.95s}.cup-steam path:nth-child(3){animation-delay:-1.9s}
.brand-ribbon{overflow:hidden;background:var(--ink);color:var(--yellow);padding:20px 0;pointer-events:none}
.ribbon-track{display:flex;width:max-content;animation:ribbon-flow 30s linear infinite}
.ribbon-group{display:flex;align-items:center;gap:36px;padding-right:36px;flex:none;font:700 42px/1.15 var(--display);letter-spacing:-.025em;white-space:nowrap}
.ribbon-flower{font:400 34px/1 var(--body)}
.coffee-photos{position:relative}
.coffee-orbit{position:absolute;width:108px;height:108px;right:-20px;top:-62px;z-index:1;pointer-events:none}
.orbit-ring{position:absolute;inset:0;border:1px solid var(--ink);border-radius:50%;animation:orbit-turn 13s linear infinite}
.orbit-bean{position:absolute;width:27px;height:40px;left:7px;top:-6px;border-radius:50%;background:var(--ink);transform:rotate(32deg)}
.orbit-bean::after{content:'';position:absolute;width:10px;height:29px;top:5px;left:8px;border-left:2px solid var(--yellow);border-radius:50%;transform:rotate(8deg)}
.orbit-dot{position:absolute;width:14px;height:14px;right:-2px;bottom:17px;border:1px solid var(--ink);background:var(--yellow);border-radius:50%}
.orbit-centre{position:absolute;inset:18px;background:var(--yellow);border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center}
.orbit-centre span{font:700 39px/1 var(--display);transform:rotate(-10deg)}
.corner-scene{position:relative;width:100%;max-width:580px;justify-self:end;isolation:isolate}
.corner-scene>.corner-art{position:relative;z-index:0}
.corner-sun{position:absolute;top:12%;right:14%;width:96px;height:96px;z-index:1;pointer-events:none}
.corner-sun>div{width:100%;height:100%;animation:sun-turn 18s linear infinite}
.corner-sun svg{width:100%;height:100%;fill:var(--yellow)}
.sky-cloud{position:absolute;z-index:1;background:rgba(255,255,255,.86);width:82px;height:21px;border-radius:50px;pointer-events:none;animation:cloud-drift 12s var(--motion-flow) infinite}
.sky-cloud::before,.sky-cloud::after{content:'';position:absolute;bottom:6px;background:inherit;border-radius:50%}
.sky-cloud::before{width:31px;height:31px;left:14px}.sky-cloud::after{width:23px;height:23px;left:41px}
.cloud-one{left:11%;top:24%;animation-delay:-3s}.cloud-two{right:10%;top:43%;width:66px;transform:scale(.8);animation-name:cloud-drift-small;animation-duration:15s;animation-delay:-8s}
.reading-progress{position:absolute;bottom:-1px;left:0;width:100%;height:3px;background:var(--yellow);transform:scaleX(0);transform-origin:left;pointer-events:none}
.button,.social-link,.nav-toggle,.close-button,.viewer-arrow{transition:transform 150ms var(--motion-out),background-color 160ms ease,box-shadow 160ms ease}
.button:active,.social-link:active,.nav-toggle:active,.close-button:active,.viewer-arrow:active{transform:scale(.96)}
.button :is(span,.button-icon){transition:transform 180ms var(--motion-out)}
.gallery-photo img{transition:transform 280ms var(--motion-out)}
.text-link span{transition:transform 180ms var(--motion-out)}
.nav-toggle span{transition:transform 180ms var(--motion-out)}
.navigation-dialog,.image-viewer{transform-origin:center}
.viewer-stage{touch-action:pan-y pinch-zoom;overscroll-behavior:contain}
.viewer-stage img[aria-busy=true]{opacity:1}
.viewer-stage img[hidden]{display:none}
@media(hover:hover) and (pointer:fine){
 .button:hover{transform:translateY(-3px);box-shadow:0 5px 0 rgba(35,41,30,.2)}
 .button:hover :is(span,.button-icon){transform:translate(3px,-3px)}
 .button:active{transform:translateY(0) scale(.97);box-shadow:0 0 0 rgba(35,41,30,0)}
 .gallery-photo:hover img{transform:scale(1.035)}
 .text-link:hover span{transform:translate(3px,-3px)}
 .social-link:hover svg{transform:rotate(-8deg)}
 .social-link svg{transition:transform 180ms var(--motion-out)}
 .close-button:hover{transform:rotate(8deg)}
}
html[data-input="keyboard"]{scroll-behavior:auto}
html[data-input="keyboard"] :is(.button,.social-link,.nav-toggle,.close-button,.viewer-arrow):active{transform:none;transition:none}
html[data-input="keyboard"] .reading-progress{transition:none}
.motion-enabled [data-ambient]{animation-play-state:paused}
.motion-enabled [data-motion-zone].is-in-view [data-ambient]{animation-play-state:running}
html[data-motion-suspended] [data-ambient]{animation-play-state:paused!important}
@keyframes coffee-breath{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes seal-float{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-13px) rotate(3deg)}}
@keyframes seal-turn{to{transform:rotate(360deg)}}
@keyframes steam-rise{0%{opacity:.15;transform:translateY(4px)}35%{opacity:1}100%{opacity:0;transform:translateY(-9px)}}
@keyframes ribbon-flow{to{transform:translateX(-50%)}}
@keyframes orbit-turn{to{transform:rotate(360deg)}}
@keyframes sun-turn{to{transform:rotate(360deg)}}
@keyframes cloud-drift{0%,100%{transform:translateX(-15px)}50%{transform:translateX(23px)}}
@keyframes cloud-drift-small{0%,100%{transform:translateX(12px) scale(.8)}50%{transform:translateX(-19px) scale(.8)}}
@media(max-width:1100px){.hero-coffee-seal{right:36px;width:155px;height:155px}.coffee-orbit{right:-10px;width:88px;height:88px;top:-53px}.orbit-centre{inset:15px}.orbit-centre span{font-size:31px}}
@media(max-width:767px){
 .hero-coffee-seal{width:132px;height:132px;right:22px;bottom:38px}
 .brand-ribbon{padding:16px 0}.ribbon-group{font-size:27px;gap:25px;padding-right:25px}.ribbon-flower{font-size:25px}.ribbon-track{animation-duration:25s}
 .coffee-orbit{width:79px;height:79px;top:-34px;right:5px}.orbit-centre{inset:14px}.orbit-centre span{font-size:29px}.orbit-bean{width:22px;height:32px;left:0;top:-2px}.orbit-bean::after{height:23px;top:4px;left:6px}
 .coffee-photos{margin-top:22px}.corner-scene{max-width:430px;justify-self:center}.corner-sun{width:64px;height:64px;right:12%;top:13%}.sky-cloud{width:61px;height:16px}.sky-cloud::before{width:24px;height:24px;left:10px}.sky-cloud::after{width:20px;height:20px;left:30px}.cloud-one{top:24%}.cloud-two{top:48%;right:8%;width:52px}
}
@media(max-height:650px) and (max-width:767px){.hero-coffee-seal{width:92px;height:92px;bottom:20px}.seal-float{animation-name:seal-turn;animation-duration:30s}}
@media(prefers-reduced-motion:reduce){
 [data-ambient]{animation:none!important;transform:none!important}
 .hero-image{transform:none}.seal-float{transform:rotate(-5deg)!important}
 .ribbon-track{width:100%;display:block}.ribbon-group{font-size:clamp(13px,2.5vw,28px);gap:16px;padding:0 20px;justify-content:center;white-space:normal}.ribbon-group+.ribbon-group{display:none}.ribbon-flower{font-size:18px}.ribbon-group>span:nth-last-child(-n+2){display:none}
 .button:hover,.gallery-photo:hover img,.text-link:hover span,.social-link:hover svg,.close-button:hover{transform:none}
 .button:hover{box-shadow:none}.button,.social-link,.nav-toggle,.close-button,.viewer-arrow{transition:none}
}