/* Emil design engineering: compositor motion, fast controls, generous ambient timing. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--ease-drawer:cubic-bezier(.32,.72,0,1)}
.hero{overflow:hidden}
.brand-ribbon{overflow:hidden;background:var(--mint);padding:23px 0;color:var(--ink)}
.ribbon-track{display:flex;width:max-content}
.ribbon-group{display:flex;align-items:center;justify-content:space-around;flex-shrink:0;min-width:100vw;gap:36px;padding-right:36px}
.ribbon-group>span{font-family:Bricolage,Arial,sans-serif;font-size:clamp(32px,4.1vw,60px);line-height:1.1;font-weight:600;letter-spacing:-.04em;white-space:nowrap}
.ribbon-flower{width:37px;height:37px;flex:none}
.about-closer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:25px}
.about .about-closer .text-link{margin-top:0}
.brand-orbit{width:140px;height:140px;flex:none}
.brand-orbit svg{width:100%;height:100%;display:block;overflow:visible}
.orbit-ring{transform-origin:80px 80px}
.breakfast-feature{position:relative;isolation:isolate;overflow:hidden}
.feature-layout{position:relative;z-index:1}
.feature-glow{position:absolute;width:min(760px,90vw);aspect-ratio:1;right:-14%;top:-20%;pointer-events:none;background:radial-gradient(ellipse,rgba(165,203,187,.2),rgba(165,203,187,.06) 40%,transparent 70%);z-index:0}
.feature-ritual{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:400px;margin:27px 0}
.coffee-steam{width:104px;height:106px;position:relative;flex:none;color:var(--mint)}
.coffee-bowl{position:absolute;left:9px;bottom:15px;width:71px;height:43px;border:2px solid currentColor;border-radius:3px 3px 24px 24px;background:var(--ink);z-index:1}
.coffee-handle{position:absolute;right:9px;bottom:29px;width:23px;height:24px;border:2px solid currentColor;border-radius:50%}
.coffee-saucer{position:absolute;left:3px;bottom:7px;width:86px;height:2px;background:currentColor;border-radius:50%}
.steam-line{position:absolute;left:27px;bottom:64px;width:9px;height:23px;border-left:2px solid currentColor;border-radius:50%;opacity:.7}
.steam-line:nth-child(2){left:44px;height:29px}
.steam-line:nth-child(3){left:61px;height:20px}
.footer-signoff-wrap{position:relative;margin-block:68px 52px}
.footer-signoff{max-width:calc(100% - 170px)}
.footer-flower{position:absolute;right:8px;top:28px;width:124px;height:124px;color:var(--mint)}
.button,.social-link,.menu-toggle,.close-button,.viewer-arrow,.viewer-zoom,.quick-actions a{transition:transform 160ms var(--ease-out),background-color 160ms ease}
.button .icon,.text-link .icon,.quick-actions a .icon{transition:transform 180ms var(--ease-out)}
.social-link svg{transition:transform 180ms var(--ease-out)}
.button:active,.social-link:active,.menu-toggle:active,.close-button:active,.viewer-arrow:active,.viewer-zoom:active,.quick-actions a:active{transform:scale(.97)}
.text-link{position:relative}
.text-link::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 200ms var(--ease-out)}
.gallery-link:focus-visible .zoom-hint{opacity:1}
.gallery-link:active .zoom-hint{transform:scale(.93)}
.zoom-hint{transition:opacity 180ms ease,transform 180ms var(--ease-out)}
.desktop-nav a[aria-current="location"]::after{transform:scaleX(1)}
#viewer-image{touch-action:pan-y pinch-zoom}
.image-dialog.is-zoomed #viewer-image{touch-action:pan-x pan-y pinch-zoom}
.keyboard-input{scroll-behavior:auto}
.keyboard-input :is(a,button,dialog,.reveal,#viewer-image),.keyboard-input a::after,.keyboard-input .icon{transition:none!important}

@media(hover:hover) and (pointer:fine){
 .desktop-nav a:hover::after{transform:scaleX(1)}
 .social-link:hover,.close-button:hover,.viewer-zoom:hover{background:var(--mint-pale)}
 .site-footer .social-link:hover{background:#345e51}
 .social-link:hover svg{transform:translateY(-2px) rotate(-6deg)}
 .button:hover{transform:translateY(-2px)}
 .button-mint:hover{background:#b5d8c8}
 .button-white:hover{background:#eaf1ec}
 .button-dark:hover{background:#153b30}
 .button:hover .icon,.text-link:hover .icon,.quick-actions a:hover .icon{transform:translate(4px,-3px)}
 .text-link:hover::after{transform:scaleX(1)}
 .menu-photo:hover img,.gallery-link:hover img{transform:scale(1.045)}
 .gallery-link:hover .zoom-hint{opacity:1;transform:rotate(90deg)}
 .viewer-arrow:hover{background:var(--mint)}
 .button:active{transform:scale(.97)}
}

@media(prefers-reduced-motion:no-preference){
 .ambient-loop{animation-play-state:paused}
 .hero-image{animation:daydream-breathe 16s var(--ease-in-out) infinite;animation-play-state:paused}
 .ribbon-track{animation:daydream-flow 28s linear infinite;animation-play-state:paused}
 .orbit-float{animation:daydream-float 6s ease-in-out infinite;animation-play-state:paused}
 .orbit-ring{animation:daydream-turn 24s linear infinite;animation-play-state:paused}
 .feature-glow{animation:daydream-light 14s ease-in-out infinite;animation-play-state:paused}
 .steam-line{animation:daydream-steam 2.8s ease-in-out infinite;animation-play-state:paused}
 .steam-line:nth-child(2){animation-delay:-1.8s}
 .steam-line:nth-child(3){animation-delay:-.9s}
 .footer-flower{animation:daydream-turn 20s linear infinite;animation-play-state:paused}
 .is-in-view .ambient-loop{animation-play-state:running}
 .document-hidden .ambient-loop,.dialog-active .ambient-loop{animation-play-state:paused}
 .hero-content{animation:daydream-enter 650ms var(--ease-out) both}
 .js-reveal .reveal{transition:opacity 550ms var(--ease-out),transform 550ms var(--ease-out);transition-delay:var(--reveal-delay,0ms)}
 .js-reveal .reveal.waiting{opacity:0;transform:translateY(28px) scale(.985)}
 .menu-grid>.reveal:nth-child(2),.gallery-grid>.reveal:nth-child(3n + 2){--reveal-delay:55ms}
 .menu-grid>.reveal:nth-child(3),.gallery-grid>.reveal:nth-child(3n){--reveal-delay:110ms}
 @keyframes daydream-breathe{0%,100%{transform:scale(1.025) translate3d(0,0,0)}50%{transform:scale(1.11) translate3d(-.8%,.6%,0)}}
 @keyframes daydream-flow{to{transform:translate3d(-50%,0,0)}}
 @keyframes daydream-float{0%,100%{transform:translateY(4px) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
 @keyframes daydream-turn{to{transform:rotate(360deg)}}
 @keyframes daydream-light{0%,100%{transform:translate3d(-9%,8%,0) scale(.85);opacity:.55}50%{transform:translate3d(10%,22%,0) scale(1.15);opacity:1}}
 @keyframes daydream-steam{0%{opacity:0;transform:translate3d(0,10px,0) scaleY(.7)}35%{opacity:.9}100%{opacity:0;transform:translate3d(7px,-24px,0) scaleY(1.25)}}
 @keyframes daydream-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
}
@media(min-width:1024px){
 .brand-ribbon{padding:14px 0}
 .ribbon-group{gap:28px;padding-right:28px}
 .ribbon-group>span{font-size:clamp(30px,2.5vw,36px)}
 .ribbon-flower{width:24px;height:24px}
}
@media(max-width:767px){
 .brand-ribbon{padding:20px 0}
 .ribbon-group{gap:23px;padding-right:23px}
 .ribbon-flower{width:26px;height:26px}
 .about-closer{margin-top:20px;gap:14px}
 .brand-orbit{width:112px;height:112px}
 .feature-ritual{gap:12px;margin-block:24px}
 .coffee-steam{width:92px;transform:scale(.9);transform-origin:right center}
 .feature-glow{right:-30%;top:3%}
 .footer-signoff-wrap{margin-block:42px 34px}
 .footer-signoff{max-width:none}
 .footer-flower{width:49px;height:49px;right:0;top:5px}
 .js-reveal .reveal{--reveal-delay:0ms!important}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
 .ambient-loop,.hero-image,.reveal{transform:none!important}
 .js-reveal .reveal.waiting{opacity:1}
 .button:active,.social-link:active,.menu-toggle:active,.close-button:active,.viewer-arrow:active,.viewer-zoom:active,.quick-actions a:active,.button:hover,.button:hover .icon,.text-link:hover .icon,.quick-actions a:hover .icon,.social-link:hover svg,.menu-photo:hover img,.gallery-link:hover img,.gallery-link:hover .zoom-hint{transform:none}
 .ribbon-track{width:100%;display:block}
 .ribbon-group{justify-content:center;flex-wrap:wrap;gap:12px 18px;padding:0 18px}
 .ribbon-group>span{font-size:clamp(22px,3vw,38px)}
 .ribbon-copy{display:none}
 .ribbon-flower{width:21px;height:21px}
 .steam-line{opacity:.65}
}
