/* Emil design engineering: decorative loops and short, interruptible interactions.
   The supplied logo, product photographs and all factual copy remain unchanged. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-drawer:cubic-bezier(.32,.72,0,1);--ease-drift:cubic-bezier(.45,0,.55,1)}
.hero-image{transform-origin:52% 60%}
.hero-seal{position:absolute;top:calc(var(--header) + 22px);right:20px;width:110px;aspect-ratio:1;pointer-events:none;color:var(--gold-ink)}
.seal-disc{position:relative;width:100%;height:100%;border-radius:50%;background:var(--paper);box-shadow:0 6px 22px #20211e1a}
.seal-ring{display:block;width:100%;height:100%;padding:3px}
.seal-type{transform-origin:90px 90px}.seal-type text{fill:currentColor;font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:1.6px}
.hero-seal .cup-drawing{position:absolute;width:44%;height:44%;top:26%;left:28%;overflow:visible}
.steam-line{transform-box:fill-box;transform-origin:center bottom}
.about{position:relative;isolation:isolate}
.about-copy,.about-photo{position:relative;z-index:1}
.window-light{position:absolute;inset:0 -20px;overflow:hidden;pointer-events:none;z-index:-1}
.window-light i{position:absolute;left:12%;top:-35%;width:14%;height:165%;background:var(--gold);opacity:.16;transform:translateX(-30px) rotate(25deg)}
.window-light i:nth-child(2){left:46%;width:6%;opacity:.12}.window-light i:nth-child(3){left:75%;width:18%;opacity:.18}
.word-mark{position:relative;display:inline-block;padding-bottom:7px}
.word-mark::after{content:"";position:absolute;left:1%;right:1%;bottom:2px;height:2px;background:var(--gold-ink);transform:scaleX(.96);transform-origin:left;opacity:.65}
.brand-flow{overflow:hidden;background:var(--soft);border-block:1px solid var(--line);padding-block:20px;color:var(--ink);user-select:none}
.flow-track{display:flex;width:max-content}.flow-group{display:flex;align-items:center;justify-content:space-around;min-width:100vw;flex-shrink:0;gap:28px;padding-right:28px;font-family:var(--serif);font-size:52px;line-height:1.12;letter-spacing:-.035em;white-space:nowrap}
.flow-outline{color:var(--gold-ink)}
@supports(-webkit-text-stroke:1px currentColor){.flow-outline{color:transparent;-webkit-text-stroke:1px var(--gold-ink)}}
.flow-book{width:37px;height:32px;color:var(--gold-ink);flex-shrink:0;transform-origin:center}
.feature-copy{position:relative}.coffee-sketch{position:absolute;top:24px;right:0;width:100px;height:112px;pointer-events:none;color:var(--gold-ink)}
.coffee-sketch .cup-drawing{width:100%;height:100%;overflow:visible}.coffee-sketch .book-leaf{transform-box:fill-box;transform-origin:50% 50%}
.button,.social-link,.menu-toggle,.close-button,.lightbox-control,.mobile-shortcuts a{transition:transform 140ms var(--ease-out),background-color 180ms ease,color 180ms ease}
.button:active,.social-link:active,.menu-toggle:active,.close-button:active,.lightbox-control:active,.mobile-shortcuts a:active{transform:scale(.97)}
.button span,.text-link span{transition:transform 220ms var(--ease-out)}
.menu-item .photo img,.gallery-item .photo img{transition:transform 450ms var(--ease-out)}
.photo-action{transition:transform 240ms var(--ease-out),background-color 180ms ease,border-color 180ms ease}
.visit-questions summary::after{content:"+";transition:transform 180ms var(--ease-out);transform-origin:center}
.visit-questions details[open] summary::after{content:"+";transform:rotate(45deg)}
.navigation-dialog,.lightbox{overscroll-behavior:contain}
.lightbox figure img{touch-action:pan-y pinch-zoom;user-select:none;cursor:grab}
.lightbox figure img.is-dragging{cursor:grabbing}
.lightbox-count{position:absolute;top:25px;left:24px;font-size:12px;letter-spacing:.14em;line-height:1.5}
.lightbox[aria-busy="true"] .lightbox-count{opacity:.5}
.lightbox figure img.is-loading{opacity:.75}

@keyframes cafe-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes seal-turn{to{transform:rotate(360deg)}}
@keyframes seal-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-9px) rotate(3deg)}}
@keyframes coffee-steam{0%{opacity:0;transform:translate(1px,6px) scaleX(.8)}22%{opacity:.9}72%{opacity:.55}100%{opacity:0;transform:translate(-3px,-13px) scaleX(1.15)}}
@keyframes window-drift{0%,100%{transform:translateX(-30px) rotate(25deg);opacity:.12}50%{transform:translateX(35px) rotate(25deg);opacity:.25}}
@keyframes sentence-flow{to{transform:translateX(-50%)}}
@keyframes book-rock{0%,100%{transform:rotate(-10deg) translateY(2px)}50%{transform:rotate(10deg) translateY(-3px)}}
@keyframes leaf-breathe{0%,100%{transform:scaleY(.95)}50%{transform:scaleY(1.06)}}
@keyframes underline-draw{0%,12%{transform:scaleX(.15);opacity:.18}45%,85%{transform:scaleX(.96);opacity:.65}100%{transform:scaleX(.15);opacity:.18}}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}

@media(prefers-reduced-motion:no-preference){
 .hero-image{animation:cafe-breathe 18s var(--ease-drift) infinite}
 .seal-type{animation:seal-turn 26s linear infinite}.seal-disc{animation:seal-float 6s var(--ease-drift) infinite}
 .steam-line{animation:coffee-steam 3.6s var(--ease-drift) infinite}.steam-line:nth-child(2){animation-delay:-1.2s}.steam-line:nth-child(3){animation-delay:-2.4s}
 .window-light i{animation:window-drift 14s var(--ease-drift) infinite}.window-light i:nth-child(2){animation-delay:-3s}.window-light i:nth-child(3){animation-delay:-6s}
 .word-mark::after{animation:underline-draw 7s var(--ease-drift) infinite}
 .flow-track{animation:sentence-flow 27s linear infinite}.flow-book{animation:book-rock 5s var(--ease-drift) infinite}
 .coffee-sketch .book-leaf{animation:leaf-breathe 5s var(--ease-drift) infinite}
 .navigation-dialog[data-pointer-open]::backdrop{animation:backdrop-in 240ms var(--ease-out) both}
}
/* Keep ambient work local to visible content; the map is never observed for loading. */
html[data-motion-ready] [data-motion-zone]:not([data-motion-visible]) *,
html[data-motion-ready] [data-motion-zone]:not([data-motion-visible]) *::after,
html[data-page-hidden] [data-motion-zone] *,html[data-page-hidden] [data-motion-zone] *::after,
.modal-open [data-motion-zone] *,.modal-open [data-motion-zone] *::after{animation-play-state:paused}

@media(hover:hover) and (pointer:fine){
 .button:hover{transform:translateY(-2px)}.button:active{transform:scale(.97)}
 .button:hover span,.text-link:hover span{transform:translate(3px,-3px)}
 .gallery-item:hover .photo-action{transform:translateY(-2px) scale(1.06);background:var(--gold);border-color:var(--gold)}
 .gallery-item:hover .photo img,.menu-item .photo:hover img{transform:scale(1.025)}
 .social-link:hover,.menu-toggle:hover{transform:translateY(-2px)}
}
@media(hover:none),(pointer:coarse){.button:hover span,.text-link:hover span{transform:none}}
@media(min-width:768px){
 .hero-seal{width:148px;top:calc(var(--header) + 28px);bottom:auto;right:32px}
 .brand-flow{padding-block:18px}.flow-group{font-size:52px;gap:32px;padding-right:32px}.flow-book{width:32px;height:28px}
 .coffee-sketch{top:18px;width:100px;height:112px}.lightbox-count{left:28px}
}
@media(min-width:1024px){.hero-seal{width:178px;right:max(48px,calc((100vw - 1200px)/2));top:calc(var(--header) + 32px);bottom:auto}.coffee-sketch{width:140px;height:148px;top:12px}}
@media(max-width:359px){.hero-seal{width:96px;right:16px}.coffee-sketch{width:83px;height:96px}.flow-group{font-size:44px}.window-light{inset-inline:-16px}}
@media(max-height:600px) and (orientation:landscape){.hero-seal{display:none}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}.hero-image,.seal-disc,.seal-type,.steam-line,.flow-track,.flow-book,.window-light i,.word-mark::after,.book-leaf{animation:none!important;transform:none}
 .steam-line{opacity:.7}.window-light i{transform:rotate(25deg);opacity:.13}.word-mark::after{opacity:.65}
 .flow-track{width:100%;justify-content:center}.flow-group{min-width:0;font-size:clamp(21px,4vw,52px);white-space:normal;gap:14px;padding:0 16px;justify-content:center;flex-wrap:wrap}
 .flow-group+.flow-group{display:none}.flow-book{width:24px;height:20px}.flow-group .flow-book:last-child{display:none}
 .button:hover,.button:active,.photo-action,.gallery-item:hover .photo-action,.gallery-item:hover .photo img,.menu-item .photo:hover img,.social-link:hover,.social-link:active,.menu-toggle:hover,.menu-toggle:active,.close-button:active,.lightbox-control:active,.mobile-shortcuts a:active{transform:none}
}
/* Keyboard actions stay immediate, even when pointer interactions are animated. */
html[data-input="keyboard"] .button,html[data-input="keyboard"] .text-link span,html[data-input="keyboard"] summary::after{transition:none}
html[data-input="keyboard"]{scroll-behavior:auto}