/* Emil design engineering stage: visible ambient motion, quick interruptible UI.
   Only decorative content loops. Business details and review excerpts stay still. */
: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)}
.ambient-loop{animation-play-state:running}
.motion-ready .ambient-loop{animation-play-state:paused}
.motion-ready [data-ambient].is-in-view .ambient-loop{animation-play-state:running}
.motion-suspended .ambient-loop,.has-dialog .ambient-loop{animation-play-state:paused!important}

/* The image remains fully visible; ambient motion lives in the surrounding graphic layers. */
.hero-picture{transform:none}
.hero-badge{position:absolute;right:max(var(--gutter),calc((100vw - 1180px)/2));bottom:62px;pointer-events:none}
.habit-badge{position:relative;width:150px;height:150px;border-radius:50%;background:var(--paper);color:var(--accent);box-shadow:0 0 0 1px rgb(255 253 243 / .25),0 0 0 9px rgb(255 253 243 / .09)}
.badge-ring{width:100%;height:100%;fill:currentColor;animation:badge-orbit 24s linear infinite}
.badge-ring text{font:600 11.5px var(--body);letter-spacing:2px}
.badge-centre{position:absolute;inset:44px;display:grid;place-items:center;border:1px solid currentColor;border-radius:50%}
.badge-centre>.icon{width:33px;height:33px;stroke-width:1.4}
@keyframes badge-orbit{to{transform:rotate(360deg)}}

/* Coffee steam is an illustration, not a treatment applied to food photography. */
.menu-heading{position:relative;padding-right:180px;min-height:140px}
.coffee-ritual{position:absolute;right:12px;top:0;display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--accent);font-family:var(--display);font-size:17px;line-height:1.15;letter-spacing:-.03em;text-align:center;pointer-events:none}
.steam-cup{position:relative;width:78px;height:77px;padding-top:17px}
.steam-cup>.icon{width:70px;height:70px;stroke-width:1.1}
.steam-cup>.icon path:nth-child(2),.steam-cup>.icon path:nth-child(3){opacity:0}
.steam{position:absolute;top:14px;left:27px;width:10px;height:29px;border-left:2px solid currentColor;border-radius:50%;opacity:0;animation:steam-rise 3.2s var(--ease-in-out) infinite}
.steam-two{left:39px;animation-delay:-1.05s}
.steam-three{left:51px;animation-delay:-2.1s}
@keyframes steam-rise{0%{transform:translate3d(-3px,14px,0) rotate(-15deg) scale(.8);opacity:0}20%{opacity:.8}75%{opacity:.55}100%{transform:translate3d(4px,-18px,0) rotate(14deg) scale(1.15);opacity:0}}

/* A garden breeze: two leaf marks, a floating caption and a passing soft light. */
.garden-panel{position:relative;isolation:isolate;overflow:hidden}
.garden-copy{position:relative;isolation:isolate}
.garden-leaves{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;color:var(--accent)}
.floating-leaf{position:absolute;display:block;opacity:.19;animation:leaf-drift 7s var(--ease-in-out) infinite alternate}
.floating-leaf>.icon{width:94px;height:94px;stroke-width:.8}
.leaf-one{right:15px;top:18px}
.leaf-two{right:22px;bottom:13px;animation-name:leaf-drift-reverse;animation-duration:9s;animation-delay:-4s}
.leaf-two>.icon{width:67px;height:67px}
@keyframes leaf-drift{from{transform:translate3d(-4px,9px,0) rotate(-19deg)}to{transform:translate3d(7px,-12px,0) rotate(19deg)}}
@keyframes leaf-drift-reverse{from{transform:translate3d(6px,-8px,0) rotate(24deg)}to{transform:translate3d(-8px,10px,0) rotate(-15deg)}}
.garden-figure figcaption{animation:garden-note-float 6s var(--ease-in-out) infinite alternate;transform-origin:15% 50%;pointer-events:none}
@keyframes garden-note-float{from{transform:translate3d(0,0,0) rotate(-1.5deg)}to{transform:translate3d(0,-10px,0) rotate(1.5deg)}}
.garden-light{position:absolute;inset:-25% -70%;background:linear-gradient(110deg,transparent 38%,rgb(255 255 255 / .12) 47%,rgb(255 255 255 / .2) 51%,transparent 60%);pointer-events:none;animation:garden-light-pass 12s var(--ease-in-out) infinite}
@keyframes garden-light-pass{0%,15%{transform:translate3d(-30%,0,0);opacity:0}35%,65%{opacity:1}85%,100%{transform:translate3d(30%,0,0);opacity:0}}

/* Continuous brand type; two identical groups make the loop seamless. */
.brand-ribbon{margin-top:44px;padding-block:22px;overflow:hidden;border-block:1px solid var(--line);color:var(--accent);pointer-events:none}
.ribbon-track{display:flex;width:max-content;animation:brand-flow 28s linear infinite}
.ribbon-group{display:flex;flex:none;align-items:center;gap:36px;padding-right:36px;font-family:var(--display);font-size:clamp(42px,5.4vw,78px);font-weight:500;line-height:1.15;letter-spacing:-.04em;white-space:nowrap}
.ribbon-group>.icon{width:42px;height:42px;stroke-width:1.1}
@keyframes brand-flow{to{transform:translate3d(-50%,0,0)}}

.footer-heading{display:flex;align-items:center;justify-content:space-between;gap:35px;margin-bottom:43px}
.footer-heading .footer-title{margin:0;font-size:clamp(52px,5.4vw,78px);letter-spacing:-.04em}
.footer-badge{flex:none;pointer-events:none}
.footer-badge .habit-badge{width:125px;height:125px;background:transparent;color:var(--paper);box-shadow:none;border:1px solid rgb(255 253 243 / .4)}
.footer-badge .badge-centre{inset:38px;border:0}
.footer-badge .badge-ring{animation-direction:reverse;animation-duration:28s}

/* Explicit, small touch feedback. Hover movement only exists for a fine pointer. */
.button,.icon-button,.gallery-button,.menu-tabs button{transition:transform 150ms var(--ease-out),background-color 180ms ease,color 180ms ease}
.button:active,.icon-button:active,.menu-tabs button:active{transform:scale(.97)}
.gallery-button:active{transform:scale(.987)}
.button>.icon,.text-link>.icon{transition:transform 200ms var(--ease-out)}
.gallery-button>img,.menu-card .portrait>img{transition:filter 260ms var(--ease-out)}
.gallery-enlarge{transition:transform 230ms var(--ease-out),background-color 180ms ease,color 180ms ease}
@media(hover:hover) and (pointer:fine){
 .text-link:hover,.review-link:hover{color:var(--accent)}
 .icon-button:hover{background:rgb(0 0 0 / .06)}
 .button:hover{background:#902218;border-color:#902218}
 .button-light:hover{background:#ede9da;border-color:#ede9da}
 .button-outline:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
 .desktop-nav a:hover{text-decoration:underline;text-underline-offset:6px;color:var(--accent)}
 html:not(.is-scrolled) .site-header .desktop-nav a:hover{color:var(--paper)}
 html:not(.is-scrolled) .site-header .icon-button:hover{background:rgb(255 253 243 / .16)}
 .gallery-button:hover .gallery-enlarge{background:var(--accent);color:var(--paper)}
 .site-footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
 .site-footer .icon-button:hover{background:rgb(255 253 243 / .12)}
 .lightbox .icon-button:hover{background:rgb(255 255 255 / .12)}
 .button:hover>.icon,.text-link:hover>.icon{transform:translate3d(3px,-3px,0)}
 .gallery-button:hover>img,.menu-card .portrait:hover>img{filter:brightness(1.045) contrast(1.015)}
 .gallery-button:hover .gallery-enlarge{transform:translateY(-3px)}
 .header-tools .social a:hover>svg,.footer-social a:hover>svg{transform:translateY(-2px)}
 .social a>svg{transition:transform 180ms var(--ease-out)}
}

/* A single sliding background makes tab changes read as movement between pages. */
.menu-tabs{--tab-gap:8px;--tab-x:22px;position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--tab-gap);padding:10px var(--tab-x)}
.menu-tabs button{position:relative;z-index:1;background:transparent}
.menu-tabs button[aria-selected=true]{background:transparent;color:var(--paper);border-color:transparent}
.menu-tab-indicator{position:absolute;top:10px;bottom:10px;left:var(--tab-x);width:calc((100% - var(--tab-x)*2 - var(--tab-gap))/2);background:var(--ink);transition:transform 220ms var(--ease-out);pointer-events:none}
.menu-tabs[data-active=lunch] .menu-tab-indicator{transform:translateX(calc(100% + var(--tab-gap)))}
.lightbox-image{touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-drag:none}
.lightbox .dialog-bar{position:relative}
.image-loading-indicator{position:absolute;left:22px;right:22px;bottom:0;height:2px;overflow:hidden;opacity:0;pointer-events:none}
.image-loading-indicator::before{content:'';display:block;width:35%;height:100%;background:var(--paper);transform:translateX(-110%)}
.lightbox[aria-busy=true] .image-loading-indicator{opacity:.65}
.lightbox[aria-busy=true] .image-loading-indicator::before{animation:image-loading 1s linear infinite}
@keyframes image-loading{to{transform:translateX(400%)}}
html[data-input=keyboard] .button,html[data-input=keyboard] .icon-button,html[data-input=keyboard] .text-link>.icon,html[data-input=keyboard] .menu-tabs button,html[data-input=keyboard] .menu-tab-indicator,html[data-input=keyboard] .gallery-button{transition:none}
html[data-input=keyboard] .button:active,html[data-input=keyboard] .icon-button:active,html[data-input=keyboard] .menu-tabs button:active,html[data-input=keyboard] .gallery-button:active{transform:none}

@media(max-width:1023px){
 .hero-badge .habit-badge{width:130px;height:130px}.hero-badge .badge-centre{inset:39px}
 .menu-heading{padding-right:150px}.coffee-ritual{right:0}
 .floating-leaf>.icon{width:70px;height:70px}.leaf-one{right:5px;top:6px}.leaf-two>.icon{width:50px;height:50px}
 .footer-heading{gap:20px}.footer-heading .footer-title{font-size:clamp(52px,6.3vw,67px)}.footer-badge .habit-badge{width:105px;height:105px}.footer-badge .badge-centre{inset:31px}
}
@media(min-width:1024px){
 .hero-badge .habit-badge{width:128px;height:128px}.hero-badge .badge-centre{inset:38px}
 .menu-heading{padding-right:150px;min-height:122px}.coffee-ritual{right:4px;font-size:16px}.steam-cup{width:68px;height:69px}.steam-cup>.icon{width:62px;height:62px}
 .footer-heading{margin-bottom:34px}.footer-badge .habit-badge{width:112px;height:112px}.footer-badge .badge-centre{inset:34px}
}
@media(max-width:767px){
 .hero-badge{right:24px;top:103px;bottom:auto}.hero-badge .habit-badge{width:104px;height:104px}.hero-badge .badge-centre{inset:32px}.badge-centre>.icon{width:26px;height:26px}
 .menu-heading{padding-right:0;min-height:0}.coffee-ritual{position:relative;top:auto;right:auto;flex-direction:row;justify-content:flex-start;gap:17px;text-align:left;font-size:18px;margin:20px 0 0;padding-top:4px}.coffee-ritual>span br{display:none}.steam-cup{height:63px;width:62px;padding-top:11px}.steam-cup>.icon{width:58px;height:58px}.steam{height:22px;left:21px;top:12px}.steam-two{left:31px}.steam-three{left:41px}
 .brand-ribbon{margin-top:35px;padding-block:19px}.ribbon-group{font-size:48px;gap:25px;padding-right:25px}.ribbon-group>.icon{width:31px;height:31px}.ribbon-track{animation-duration:24s}
 .garden-copy{padding-top:41px}.floating-leaf>.icon{width:65px;height:65px}.leaf-one{right:6px;top:6px}.leaf-two{right:7px;bottom:7px}.leaf-two>.icon{width:47px;height:47px}
 .garden-figure figcaption{max-width:calc(100% - 38px);left:18px}
 .footer-heading{align-items:flex-start;gap:12px;margin-bottom:28px}.footer-heading .footer-title{font-size:44px;max-width:calc(100% - 82px)}.footer-title span{white-space:normal}.footer-badge{padding-top:6px}.footer-badge .habit-badge{width:76px;height:76px}.footer-badge .badge-centre{inset:23px}.footer-badge .badge-centre>.icon{width:22px;height:22px}
 .menu-tabs{--tab-gap:6px;--tab-x:10px}.image-loading-indicator{left:14px;right:14px}
}
@media(max-width:359px){.hero-badge{right:18px;top:96px}.hero-badge .habit-badge{width:90px;height:90px}.hero-badge .badge-centre{inset:28px}.footer-heading .footer-title{font-size:39px}.ribbon-group{font-size:42px}}
@media(max-height:550px) and (orientation:landscape){.hero-badge{top:100px;right:24px;bottom:auto}.hero-badge .habit-badge{width:88px;height:88px}.hero-badge .badge-centre{inset:27px}}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 .hero-picture,.garden-figure figcaption,.floating-leaf{transform:none}
 .steam{opacity:.5;transform:none}.garden-light{display:none}
 .brand-ribbon{padding:24px}.ribbon-track{width:100%;display:block;transform:none}.ribbon-group{justify-content:center;flex-wrap:wrap;white-space:normal;font-size:clamp(27px,4.3vw,64px);gap:12px 22px;padding:0;text-align:center}.ribbon-group:nth-child(2){display:none}.ribbon-group>.icon{display:none}
 .button:active,.icon-button:active,.gallery-button:active,.menu-tabs button:active{transform:none}
 .gallery-button:hover>img,.menu-card .portrait:hover>img,.button:hover>.icon,.text-link:hover>.icon,.gallery-button:hover .gallery-enlarge,.social a:hover>svg{transform:none;filter:none}
 .lightbox[aria-busy=true] .image-loading-indicator::before{width:100%;transform:none}
}