/* Emil motion pass. Ambient decoration is independent of readable content.
   Loops run only on screen. JS manages pause, visibility and input modality. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.65,0,.35,1)}
.hero{padding-bottom:180px}
.hero-bottom{position:absolute;bottom:80px;left:0;right:0;width:100%;display:flex;align-items:flex-end;justify-content:space-between;gap:30px}
.hero-scroll{display:flex;align-items:center;gap:14px;font-size:10px;font-weight:700;letter-spacing:.12em;min-height:44px;text-shadow:0 1px 4px #0009}
.scroll-track{width:42px;height:2px;background:#fff5;overflow:hidden}
.scroll-track i{display:block;width:100%;height:100%;background:#fff;animation:coffee-flow 2.8s var(--ease-in-out) infinite}
.coffee-seal{position:relative;flex-shrink:0;width:146px;height:146px;border-radius:50%;background:var(--red);color:var(--paper);box-shadow:0 6px 30px #0001}
.seal-ring{position:absolute;inset:0;width:100%;height:100%;animation:coffee-turn 24s linear infinite}
.seal-ring text{fill:currentColor;font:600 12px var(--body);letter-spacing:2px}
.seal-number{position:absolute;inset:35px 0 auto;text-align:center;font:600 61px/1 var(--display)}
.seal-small{position:absolute;inset:100px 0 auto;text-align:center;font-size:9px;letter-spacing:.2em}
.coffee-ribbon{overflow:hidden;background:var(--red);color:var(--paper);padding-block:14px;user-select:none}
.ribbon-track{display:flex;width:max-content;animation:coffee-marquee 30s linear infinite}
.ribbon-group{display:flex;align-items:center;gap:28px;padding-right:28px;flex-shrink:0;font:600 clamp(34px,3.4vw,52px)/1.08 var(--display);letter-spacing:-.015em;white-space:nowrap}
.ribbon-group i{font-style:normal;font-size:.65em}
.menu-heading{display:flex;align-items:center;justify-content:space-between;gap:32px}
.coffee-drawing{width:240px;flex-shrink:0;color:var(--red);margin:0 7% 40px 0;text-align:center}
.floating-cup{width:100%;height:auto;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;animation:coffee-float 5.5s var(--ease-in-out) infinite}
.cup-body{fill:var(--red)}
.floating-cup text{fill:var(--paper);stroke:none;font:600 48px var(--display)}
.steam path{animation:coffee-steam 3.6s var(--ease-in-out) infinite}
.steam path:nth-child(2){animation-delay:-1.2s}.steam path:nth-child(3){animation-delay:-2.4s}
.coffee-drawing>span{display:block;font-size:9px;letter-spacing:.14em;font-weight:700;margin-top:18px}
.ritual-kicker{display:flex;align-items:center;gap:16px;color:var(--red);margin-bottom:24px;font-size:10px;font-weight:700;letter-spacing:.12em}
.ritual-star{display:block;font:400 64px/1 Arial,sans-serif;animation:coffee-turn 18s linear infinite}
[data-ambient] .ambient-loop{animation-play-state:paused}
html.motion-ready [data-ambient].ambient-visible .ambient-loop{animation-play-state:running}
html.motion-suspended .ambient-loop{animation-play-state:paused!important}
.footer-bottom{padding-bottom:80px}
.button,.close-button,.image-nav,.nav-toggle,.social-links a{transition:transform 180ms var(--ease-out),background 180ms,color 180ms}
.button>span{transition:transform 220ms var(--ease-out)}
.desktop-nav a:after{transition:transform 220ms var(--ease-out);transform-origin:right}
.text-link>span{transition:transform 220ms var(--ease-out)}
.gallery-button img{transition:transform 400ms var(--ease-out)}
.enlarge{width:44px;height:44px;transition:transform 220ms var(--ease-out),opacity 220ms}
.close-button{transition:transform 180ms var(--ease-out),background 180ms}
.ritual-tabs{border:1px solid var(--line);padding:4px;gap:4px;max-width:390px}
.ritual-tabs [role="tab"]{border:0;min-height:44px;position:relative;isolation:isolate}
.ritual-tabs [role="tab"]:before{content:'';position:absolute;inset:0;z-index:-1;background:var(--red);opacity:0;transform:scale(.94);transition:opacity 180ms,transform 220ms var(--ease-out)}
.ritual-tabs [role="tab"][aria-selected="true"]{color:var(--paper)}
.ritual-tabs [role="tab"][aria-selected="true"]:before{opacity:1;transform:none}
.lightbox-stage>img{touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-drag:none}
.lightbox-toolbar{font-variant-numeric:tabular-nums}
@media(hover:hover) and (pointer:fine){
 .desktop-nav a:hover:after{transform:scaleX(1);transform-origin:left}
 .social-links a:hover,.text-link:hover,.phone:hover,.navigation-dialog nav>a:hover,.quick-info a:hover strong{color:var(--red)}
 .social-links a:hover{transform:translateY(-3px)}
 .button:hover{transform:translateY(-3px)}
 .button-light:hover{background:var(--surface)}
 .button-clear:hover{background:var(--paper);color:var(--ink)}
 .button-red:hover{background:#8c1f20;border-color:#8c1f20}
 .button:hover>span,.text-link:hover>span{transform:translate(3px,-3px)}
 .gallery-button:hover img{transform:scale(1.035)}
 .gallery-button:hover .enlarge{opacity:1;transform:translate(-3px,-3px)}
 .close-button:hover{transform:rotate(90deg)}
 .image-nav:hover,.lightbox .close-button:hover{background:#ffffff15}
 .image-nav:hover{transform:translateX(3px)}.image-nav.previous:hover{transform:translateX(-3px)}
 [role="tab"]:hover{color:var(--red);background:var(--surface)}
 .ritual-tabs [aria-selected="true"]:hover{color:var(--paper);background:none}
}
html:not(.keyboard-input) .button:active,html:not(.keyboard-input) .close-button:active,html:not(.keyboard-input) .image-nav:active,html:not(.keyboard-input) .nav-toggle:active{transform:scale(.97);transition-duration:100ms}
html.keyboard-input{scroll-behavior:auto}
html.keyboard-input :is(button,a,summary span,[role="tab"]:before){transition:none!important}
@keyframes coffee-turn{to{transform:rotate(360deg)}}
@keyframes coffee-marquee{to{transform:translateX(-50%)}}
@keyframes coffee-float{0%,100%{transform:translateY(4px) rotate(-5deg)}50%{transform:translateY(-10px) rotate(4deg)}}
@keyframes coffee-steam{0%{opacity:0;transform:translateY(10px)}30%,60%{opacity:.8}100%{opacity:0;transform:translateY(-10px)}}
@keyframes coffee-flow{0%{transform:translateX(-105%)}55%,100%{transform:translateX(105%)}}
@media(max-width:1023px){.coffee-drawing{width:185px;margin-right:0}.coffee-seal{width:122px;height:122px}.seal-number{top:29px;font-size:50px}.seal-small{top:84px;font-size:8px}}
@media(max-width:767px){
 .hero{padding-bottom:24px}.hero-inner{align-self:flex-end}.hero-copy{transform:none}.hero-bottom{top:112px;bottom:auto;gap:14px}.hero-scroll{max-width:185px;gap:10px;font-size:8px;letter-spacing:.08em;line-height:1.7}.scroll-track{width:26px;flex-shrink:0}.hero-scroll>span:last-child{display:none}
 .coffee-seal{width:106px;height:106px}.seal-number{top:25px;font-size:44px}.seal-small{top:73px;font-size:7px}
 .coffee-ribbon{padding-block:18px}.ribbon-group{font-size:48px;gap:24px;padding-right:24px}.ribbon-track{animation-duration:26s}
 .menu-heading{position:relative;display:block}.menu-heading .section-heading{padding-top:0}.coffee-drawing{position:absolute;right:0;top:-12px;width:100px;margin:0}.coffee-drawing>span{display:none}.menu-heading h2{font-size:48px}.menu-heading .eyebrow{max-width:170px;font-size:10px}.menu-heading .section-heading>p:last-child{max-width:210px}
 .ritual-kicker{margin-bottom:18px;gap:12px;font-size:9px}.ritual-star{font-size:48px}.ritual-tabs{max-width:none}
 .enlarge{width:44px;height:44px}
}
@media(max-width:370px){.coffee-drawing{width:78px;top:0}.menu-heading h2{font-size:43px}.menu-heading .eyebrow{max-width:155px;font-size:9px}.hero-scroll{max-width:150px}.coffee-seal{width:94px;height:94px}.seal-number{top:22px;font-size:39px}.seal-small{top:65px}}
@media(max-height:650px){.coffee-seal{width:94px;height:94px}.seal-number{top:22px;font-size:39px}.seal-small{top:65px}}
@media(min-width:768px) and (max-height:620px){.hero-bottom{bottom:24px}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}.ambient-loop{animation:none!important}.steam path{opacity:.7}
 *,*:before,*:after{transition:none!important;animation:none!important}
 .button:hover,.gallery-button:hover img,.close-button:hover,.social-links a:hover,.button:active{transform:none!important}
}