/* emil-design-eng: long, decorative motion sets the cafe's pace;
   transform/opacity feedback stays brief and keyboard actions stay immediate.
   Every moving ornament is decorative; facts and original image assets stay intact. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-drawer:cubic-bezier(.32,.72,0,1);--ease-loop:cubic-bezier(.45,0,.55,1)}
.hero-content{position:relative;z-index:1}
.hero-seal{position:absolute;right:20px;bottom:24px;width:130px;height:130px;border-radius:50%;background:#242522;display:grid;place-items:center;pointer-events:none;box-shadow:0 8px 24px #0002}
.hero-seal>img{width:58px;height:58px;border-radius:50%;object-fit:cover}
.seal-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--brand-gold);stroke-width:.65}
.seal-ring text{fill:var(--brand-gold);stroke:none;font-family:Lili Sans,Arial,sans-serif;font-size:10.7px;font-weight:600;letter-spacing:1.8px}
.brand-ribbon{overflow:hidden;background:var(--brand-gold);color:#242522;padding-block:24px;contain:paint}
.ribbon-track{display:flex;width:max-content}
.ribbon-unit{display:flex;align-items:center;gap:28px;padding-right:28px;min-width:100vw;flex-shrink:0;white-space:nowrap;font-family:Lili Display,Georgia,serif;font-size:58px;line-height:1.1;letter-spacing:-.025em}
.ribbon-outline{color:transparent;-webkit-text-stroke:1px #242522}
.ribbon-unit i{display:block;width:20px;height:20px;border:1px solid currentColor;border-radius:50%;position:relative;flex-shrink:0}
.ribbon-unit i::after{content:"";position:absolute;inset:5px;border-radius:50%;background:currentColor}
.ritual-section{position:relative;isolation:isolate;overflow:hidden}
.ritual-section>.container{position:relative;z-index:1}
.ritual-atmosphere{position:absolute;inset:0 0 auto;height:550px;overflow:hidden;pointer-events:none;color:var(--brand-gold)}
.orbit{position:absolute;border:1px solid currentColor;border-radius:50%;opacity:.28}
.orbit-one{width:310px;height:310px;right:-170px;top:54px}
.orbit-two{width:260px;height:260px;left:-176px;top:210px;opacity:.15}
.orbit i{position:absolute;width:12px;height:12px;left:50%;top:-6px;border-radius:50%;background:currentColor}
.orbit i+i{width:7px;height:7px;left:4%;top:70%}
.steam-lines{position:absolute;left:-92px;top:64px;width:180px;height:320px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;opacity:.43}
.steam-lines g{transform-box:fill-box;transform-origin:center}
.footer-greeting{padding-bottom:22px;margin-bottom:32px;position:relative}
.footer-greeting p{font-family:Lili Display,Georgia,serif;font-size:46px;line-height:1.12;letter-spacing:-.025em}
.greeting-rule{position:absolute;inset:auto 0 0;height:1px;background:var(--line);overflow:hidden}
.greeting-rule i{display:block;width:24%;height:100%;background:var(--brand-gold);transform:translateX(-120%)}
.button,.social-link,.nav-toggle,.dialog-close,.lightbox-close,.lightbox-controls button,.mobile-dock a{transition:transform 150ms var(--ease-out),background-color 180ms ease,color 180ms ease,opacity 150ms ease}
.button:active,.social-link:active,.nav-toggle:active,.dialog-close:active,.lightbox-close:active,.lightbox-controls button:active,.mobile-dock a:active{transform:scale(.965)}
.button span,.text-link span,.gallery-caption>span,.social-link svg{transition:transform 240ms var(--ease-out)}
.portrait img{transition:transform 280ms var(--ease-out)}
.desktop-nav a{position:relative}
.desktop-nav a::after{content:"";position:absolute;inset:auto 0 6px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 200ms var(--ease-out)}
.desktop-nav a:focus-visible::after{transform:scaleX(1)}
.lightbox-counter{font-size:12px;align-self:center;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.lightbox-image{touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}
.lightbox.is-loading .lightbox-image{opacity:.22}
.lightbox.is-loading .lightbox-counter{opacity:.55}
.lightbox-image[hidden]{display:none}
.lightbox-controls{gap:12px}
html[data-input="keyboard"]{scroll-behavior:auto}
html[data-input="keyboard"] .desktop-nav a::after{transition:none}
html[data-input="keyboard"] button:active,html[data-input="keyboard"] a:active{transform:none;transition:none}
@media(hover:hover) and (pointer:fine){
  .gallery-item:hover img,.menu-card:hover .portrait img{transform:scale(1.04)}
  .button:hover span,.text-link:hover span,.gallery-item:hover .gallery-caption>span{transform:translate(3px,-3px)}
  .social-link:hover svg{transform:rotate(-9deg) scale(1.1)}
  .desktop-nav a:hover::after{transform:scaleX(1)}
}
@media(min-width:768px){
  .hero-seal{width:160px;height:160px;right:36px;bottom:42px}.hero-seal>img{width:72px;height:72px}
  .brand-ribbon{padding-block:18px}.ribbon-unit{font-size:48px;gap:28px;padding-right:28px;justify-content:space-around}.ribbon-unit i{width:16px;height:16px}.ribbon-unit i::after{inset:4px}
  .orbit-one{width:440px;height:440px;right:-190px;top:32px}.orbit-two{width:340px;height:340px;left:-208px;top:220px}
  .steam-lines{left:3%;width:190px;top:80px}.footer-greeting p{font-size:64px}
}
@media(min-width:1024px){.hero-seal{right:max(60px,calc((100vw - 1240px)/2));top:144px;bottom:auto;width:172px;height:172px}.steam-lines{left:10%}.orbit-one{right:-100px}.orbit-two{left:-170px}}
@media(max-height:650px){.hero-seal{width:96px;height:96px;top:auto;bottom:20px}.hero-seal>img{width:44px;height:44px}}
@media(prefers-reduced-motion:no-preference){
  .motion-enabled .hero-image{animation:coffee-drift 16s var(--ease-loop) infinite alternate}
  .motion-enabled .hero-seal{animation:seal-float 6s var(--ease-loop) infinite}
  .motion-enabled .seal-ring{animation:seal-turn 22s linear infinite}
  .motion-enabled .ribbon-track{animation:ribbon-flow 32s linear infinite}
  .motion-enabled .orbit-one{animation:seal-turn 22s linear infinite}
  .motion-enabled .orbit-two{animation:seal-turn 30s linear infinite reverse}
  .motion-enabled .steam-lines g{animation:steam-rise 7s var(--ease-loop) infinite}
  .motion-enabled .steam-lines g:nth-child(2){animation-delay:-2.3s}.motion-enabled .steam-lines g:nth-child(3){animation-delay:-4.6s}
  .motion-enabled .greeting-rule i{animation:gold-flow 7s var(--ease-loop) infinite}
  .motion-enabled [data-loop]{animation-play-state:paused}
  .motion-enabled .motion-scope.is-in-view [data-loop]{animation-play-state:running}
  html.document-hidden [data-loop],body.scroll-locked [data-loop]{animation-play-state:paused!important}
}
@keyframes coffee-drift{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.075) translate3d(-.6%,.4%,0)}}
@keyframes seal-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-12px,0)}}
@keyframes seal-turn{to{transform:rotate(360deg)}}
@keyframes ribbon-flow{to{transform:translate3d(-50%,0,0)}}
@keyframes steam-rise{0%,100%{transform:translate3d(-5px,20px,0);opacity:.35}50%{transform:translate3d(8px,-24px,0);opacity:1}}
@keyframes gold-flow{0%{transform:translateX(-120%);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(520%);opacity:0}}
@media(prefers-reduced-motion:reduce){
  [data-loop]{animation:none!important;transform:none!important}
  .greeting-rule i{opacity:1}
  .button:active,.social-link:active,.nav-toggle:active,.dialog-close:active,.lightbox-close:active,.lightbox-controls button:active,.mobile-dock a:active{transform:none}
  .gallery-item:hover img,.menu-card:hover .portrait img,.button:hover span,.text-link:hover span,.gallery-item:hover .gallery-caption>span,.social-link:hover svg{transform:none}
}