/* Emil design engineering. Coastal atmosphere, direct interaction feedback.
   Infinite loops use transform/opacity; visible text and merchant facts 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)}

/* One real hero photograph, moving within its existing full-screen frame. */
.hero-image{transform-origin:55% 55%;animation:sea-breath 22s var(--ease-in-out) infinite alternate;animation-play-state:paused}
@keyframes sea-breath{from{transform:scale(1)}to{transform:scale(1.075)}}
.coastal-seal{position:absolute;right:max(56px,calc((100vw - 1280px)/2));bottom:70px;width:178px;height:178px;color:#fff;pointer-events:none}
.seal-ring{width:100%;height:100%;overflow:visible;animation:seal-turn 26s linear infinite;animation-play-state:paused}
.seal-ring circle{fill:none;stroke:currentColor;stroke-width:.8;opacity:.65}
.seal-ring text{fill:currentColor;font:600 11.5px Manrope,Arial,sans-serif}
.coastal-seal>img{position:absolute;width:60px;height:60px;left:50%;top:50%;transform:translate(-50%,-50%)}
@keyframes seal-turn{to{transform:rotate(360deg)}}

/* The waves stay behind the copy. Two independently paced layers make a tide. */
.coffee-section{position:relative;isolation:isolate;overflow:hidden;padding-bottom:88px}
.coffee-layout{position:relative;z-index:1}
.coffee-photo{transform-origin:50% 60%;animation:coffee-float 8s var(--ease-in-out) infinite;animation-play-state:paused}
@keyframes coffee-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-16px) rotate(1.1deg)}}
.coffee-tides{position:absolute;z-index:0;inset:auto 0 0;height:142px;overflow:hidden;pointer-events:none}
.tide{position:absolute;width:200%;height:100%;left:0;bottom:0;animation:tide-flow 14s linear infinite;animation-play-state:paused}
.tide-back{fill:var(--paper);opacity:.32;animation-duration:22s}
.tide-front{fill:none;stroke:var(--ink);stroke-width:1.5;opacity:.28;animation-direction:reverse}
@keyframes tide-flow{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* A single, non-essential brand ribbon bridges the coffee story and the gallery. */
.coastal-marquee{overflow:hidden;padding-block:27px 32px;border-bottom:1px solid var(--line);background:var(--paper);color:var(--ink);pointer-events:none}
.marquee-track{display:flex;width:max-content;animation:coast-line 28s linear infinite;animation-play-state:paused}
.marquee-copy{flex-shrink:0;display:flex;align-items:center;gap:45px;padding-right:45px;font:500 clamp(44px,5.3vw,78px)/1.15 var(--display);letter-spacing:-.025em;white-space:nowrap}
.marquee-copy i{font-weight:400;color:#507980}
.marquee-copy b{font:400 .65em/1 var(--body);color:#689da5}
@media(min-width:900px){
 .coastal-marquee{padding-block:18px 20px}
 .marquee-copy{font-size:clamp(34px,2.8vw,44px);gap:28px;padding-right:28px}
}
@keyframes coast-line{to{transform:translateX(var(--marquee-shift,-50%))}}

/* Ambient activity is controlled only by visibility, modal state and OS preference. */
.motion-active .ambient-motion,.motion-active .hero-image{animation-play-state:running}
html.page-hidden .ambient-motion,html.page-hidden .hero-image,body.modal-open .ambient-motion,body.modal-open .hero-image{animation-play-state:paused}

/* Short, staggered entrances have no hidden baseline and never block a link. */
@keyframes copy-arrive{from{opacity:.2;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes photo-arrive{from{opacity:.55;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.arriving{animation:copy-arrive 640ms var(--ease-out) both}
.portrait.arriving{animation-name:photo-arrive;animation-duration:700ms}
.hero-intro{animation:copy-arrive 750ms var(--ease-out) both}
.hero-intro:nth-child(2){animation-delay:65ms}.hero-intro:nth-child(3){animation-delay:120ms}.hero-intro:nth-child(4){animation-delay:175ms}
@media(min-width:640px){
 .menu-card:nth-child(2) .portrait.arriving,.gallery-item:nth-child(3n+2) .portrait.arriving,.review:nth-child(2).arriving{animation-delay:60ms}
 .menu-card:nth-child(3) .portrait.arriving,.gallery-item:nth-child(3n+3) .portrait.arriving,.review:nth-child(3).arriving{animation-delay:120ms}
}

/* Every press has immediate feedback; hover effects are for actual hover devices. */
.button{transition:transform 160ms var(--ease-out),background-color 180ms ease,color 180ms ease,border-color 180ms ease}
.button:active,.icon-link:active,.icon-button:active,.nav-toggle:active{transform:scale(.97)}
.button span{transition:transform 200ms var(--ease-out)}
.icon-link,.icon-button,.nav-toggle{transition:transform 160ms var(--ease-out),background-color 180ms ease}
.desktop-nav a{position:relative}
.desktop-nav a::after{content:'';position:absolute;left:0;right:0;bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 200ms var(--ease-out)}
.desktop-nav a[aria-current="location"]::after{transform:scaleX(1)}
.desktop-nav a:hover{box-shadow:none}
.text-link{transition:opacity 180ms ease}
.text-link>span{transition:transform 180ms var(--ease-out)}
.gallery-open>img{transition:transform 600ms var(--ease-out)}
.photo-expand{pointer-events:none;transition:transform 160ms var(--ease-out),opacity 160ms ease;border-radius:50%}
.questions-list summary>span::after{transition:transform 180ms var(--ease-out)}
.questions-list summary:active>span{transform:scale(.92)}
@media(hover:hover) and (pointer:fine){
 .button:hover{transform:translateY(-3px)}.button:hover:active{transform:scale(.97)}
 .button:hover>span,.text-link:hover>span{transform:translate(3px,-3px)}
 .icon-link:hover{transform:translateY(-2px)}
 .desktop-nav a:hover::after{transform:scaleX(1)}
 .gallery-open{cursor:none}.gallery-open:hover>img{transform:scale(1.05)}
 .photo-expand{left:0;top:0;right:auto;bottom:auto;width:70px;height:70px;background:var(--paper);font-size:21px;box-shadow:0 3px 18px rgba(0,0,0,.08);transform:translate(-100px,-100px)}
 .photo-expand::before{content:'View';font:650 10px/1 var(--body);margin-bottom:-19px}
 .gallery-open:focus-visible .photo-expand{left:auto;top:auto;right:14px;bottom:14px;transform:none!important}
}
@media(hover:none),(pointer:coarse){
 .gallery-open:hover>img,.button:hover>span,.text-link:hover>span,.summary-grid>a:hover strong>span{transform:none}
 .gallery-open:hover .photo-expand{opacity:1}
}

/* Modal animation is driven by WAAPI; the backdrop has matching short fades. */
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes backdrop-out{from{opacity:1}to{opacity:0}}
dialog[data-animated]::backdrop{animation:backdrop-in 220ms var(--ease-out) both}
dialog[data-closing]::backdrop{animation:backdrop-out 150ms ease both}
.viewer-main img{touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-drag:none}
.image-loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:10px 16px;background:rgba(21,32,34,.9);font-size:12px;text-align:center;pointer-events:none}
.lightbox[data-loading] #lightbox-image{opacity:.35}
.lightbox[data-error] #lightbox-image{visibility:hidden}
html[data-input-mode="keyboard"]{scroll-behavior:auto}
html[data-input-mode="keyboard"] .button,html[data-input-mode="keyboard"] .button>span,html[data-input-mode="keyboard"] .icon-link,html[data-input-mode="keyboard"] .icon-button,html[data-input-mode="keyboard"] .questions-list summary>span::after{transition:none}
html[data-input-mode="keyboard"] .button:active,html[data-input-mode="keyboard"] .icon-button:active{transform:none}

@media(max-width:899px){.coastal-seal{right:36px;width:150px;height:150px;bottom:64px}.coastal-seal>img{width:52px;height:52px}.coffee-section{padding-bottom:74px}.coffee-tides{height:112px}}
@media(max-width:639px){
 .coastal-seal{top:calc(var(--header) + 32px);right:22px;bottom:auto;width:116px;height:116px}.coastal-seal>img{width:41px;height:41px}
 .hero-image{animation-duration:19s}.coffee-section{padding-top:49px;padding-bottom:67px}.coffee-photo{animation-duration:7s}
 @keyframes coffee-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1deg)}}
 .coffee-tides{height:95px}.coastal-marquee{padding-block:21px 25px}.marquee-copy{font-size:43px;gap:27px;padding-right:27px}.marquee-track{animation-duration:26s}
 .photo-expand{width:40px;height:40px;right:12px;bottom:12px;opacity:1}
}
@media(max-height:620px){.coastal-seal{width:100px;height:100px;top:calc(var(--header) + 20px);bottom:auto}.coastal-seal>img{width:36px;height:36px}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}.ambient-motion,.hero-image,.arriving,.hero-intro{animation:none!important;transform:none!important}.arriving,.hero-intro{opacity:1!important}
 *,*::before,*::after{transition:none!important;animation:none!important}
 .coffee-photo{transform:none!important}.marquee-track{width:100%;display:block}.marquee-copy{white-space:normal;flex-wrap:wrap;justify-content:center;gap:8px 20px;padding:0 20px;font-size:clamp(28px,5vw,56px)}.marquee-copy:not(:first-child){display:none}
 @media(min-width:900px){.marquee-copy{font-size:clamp(34px,2.8vw,44px)}}
 .gallery-open:hover>img,.button:hover,.button:active,.button:hover>span,.text-link:hover>span,.icon-link:hover,.icon-link:active,.icon-button:active,.nav-toggle:active{transform:none!important}
 .gallery-open{cursor:zoom-in}.photo-expand{left:auto;top:auto;right:14px;bottom:14px;transform:none!important}
}