/* Coffee-house motion: light, steam, a turning seal and a continuous ribbon.
   Factual photos stay still. All continuous movement has a global pause control. */
: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)}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.icon{display:inline-block;width:1em;height:1em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.visit-details h3.visit-detail-heading{display:flex;align-items:center;gap:8px}
.visit-detail-heading .icon{width:16px;height:16px;color:var(--accent);stroke-width:1.8}
.quick-actions .quick-action-icon{width:18px;height:18px;stroke-width:2.15}
.menu-toggle .icon{width:24px;height:24px}
.close-button .icon{width:24px;height:24px;stroke-width:2.1}
.lightbox-prev .icon,.lightbox-next .icon{width:26px;height:26px;stroke-width:2.1}
.hero-line{display:block}
.hero-content{position:relative;z-index:1}
.hero-shade{background:linear-gradient(90deg,rgb(0 0 0 / .52) 0%,rgb(0 0 0 / .30) 46%,rgb(0 0 0 / .08) 78%),linear-gradient(180deg,rgb(0 0 0 / .03),rgb(0 0 0 / .24))}
.hero-daylight{position:absolute;z-index:-1;pointer-events:none;width:70%;height:110%;right:-25%;top:-40%;background:radial-gradient(ellipse,rgba(255,229,175,.26),rgba(255,234,191,.09) 40%,transparent 67%);opacity:.42;animation:daylight 12s var(--ease-drift) infinite alternate}
.coffee-seal{position:absolute;right:5%;bottom:46px;width:172px;height:172px;color:var(--paper);z-index:1;pointer-events:none;border-radius:50%;background:rgb(23 56 55 / .8)}
.seal-ring{position:absolute;inset:0;width:100%;height:100%;animation:seal-turn 28s linear infinite}
.seal-ring text{font-family:var(--body);font-size:11px;letter-spacing:1.3px;fill:currentColor}
.seal-cup{position:absolute;width:66%;height:66%;inset:17%}
.steam{transform-box:fill-box;transform-origin:center;animation:steam-rise 3.8s var(--ease-drift) infinite}
.steam:nth-last-child(2){animation-delay:-1.25s}.steam:last-child{animation-delay:-2.5s}
.coffee-ribbon{background:var(--accent);color:var(--paper);overflow:hidden;padding:14px 0}
.ribbon-track{display:flex;width:max-content;animation:ribbon-flow 32s linear infinite}
.ribbon-copy{display:flex;flex:none;align-items:center;justify-content:space-between;min-width:100vw;gap:32px;padding-right:32px;white-space:nowrap;font-family:var(--display);font-size:clamp(30px,2.8vw,46px);line-height:1.15}
.ribbon-flower{font-family:Georgia,serif;font-size:.8em;font-style:normal;color:#d1c391}
.coffee-pause{background:var(--accent);color:var(--paper);margin:0 0 88px;overflow:hidden;position:relative}
.pause-layout{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;min-height:400px;padding-block:48px}
.pause-copy h2{font-size:clamp(52px,6vw,84px);margin-bottom:24px}
.pause-copy .eyebrow{color:#e0d6b6}
.pause-copy .text-link{color:var(--paper)}
.ritual-art{position:relative;isolation:isolate;width:310px;height:310px;justify-self:center;color:var(--paper)}
.ritual-cup{position:absolute;inset:0;width:100%;height:100%}
.ritual-orbit{position:absolute;inset:-4px;border:1px dashed rgb(250 249 245 / .4);border-radius:50%;animation:seal-turn 24s linear infinite}
.ritual-orbit span{position:absolute;left:calc(50% - 5px);top:-5px;width:10px;height:10px;background:#d7c693;border-radius:50%}
.ritual-orbit span+span{top:auto;bottom:-5px;background:var(--paper);width:7px;height:7px}
.ritual-sun{position:absolute;width:175px;height:175px;right:12px;top:14px;border-radius:50%;background:rgb(219 196 141 / .19);z-index:-1;animation:sun-drift 7s var(--ease-drift) infinite alternate}
.ritual-note{position:absolute;bottom:-10px;left:50%;transform:translateX(-50%) rotate(-6deg);white-space:nowrap;font-family:var(--display);font-size:22px;letter-spacing:.02em;background:var(--accent);padding:4px 15px}
.ambient{animation-play-state:paused}
html[data-motion="running"] .motion-zone.in-view .ambient{animation-play-state:running}
html[data-page-hidden] .ambient,html[data-motion="paused"] .ambient,.scroll-locked .ambient{animation-play-state:paused!important}
.site-header{transition:background 200ms ease,color 200ms ease,box-shadow 200ms ease}
.button,.icon-button,.photo-button,.quick-actions a{transition:transform 150ms var(--ease-out),background 180ms ease,color 180ms ease}
.button span,.text-link span,.quick-actions a span{display:inline-block;transition:transform 200ms var(--ease-out)}
.text-link{transition:color 180ms ease,transform 150ms var(--ease-out)}
.button:active,.icon-button:active,.photo-button:active,.quick-actions a:active,.text-link:active{transform:scale(.97)}
.portrait img,.feature-image img{transition:transform 500ms var(--ease-out)}
.expand-photo{transition:transform 220ms var(--ease-out),background 180ms ease,color 180ms ease}
.desktop-nav a:after{transition:transform 220ms var(--ease-out)}
.drink-group-content{transform-origin:top center}
.disclosure-icon{transition:transform 180ms var(--ease-out)}
.drink-group[open] .disclosure-icon{transform:rotate(180deg)}
.navigation-dialog,.lightbox{transform-origin:center}
.lightbox-stage img{touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-drag:none}
.lightbox-status{font-variant-numeric:tabular-nums}
.lightbox-hint{text-align:center;font-size:10px;letter-spacing:.025em;opacity:.6;margin:4px 0 0}
.lightbox-stage{height:calc(100dvh - 155px)}
.lightbox-stage[aria-busy="true"] img{opacity:.55}
.lightbox-stage[aria-busy="true"]{cursor:progress}
.lightbox-stage img{transition:opacity 150ms ease}
.photo-button:focus-visible{outline-offset:5px}
html[data-motion="running"] [data-reveal="pending"]{opacity:0;transform:translateY(28px)}
[data-reveal="pending"]:focus-within{opacity:1!important;transform:none!important}
html.keyboard-navigation *,html.keyboard-navigation *:before,html.keyboard-navigation *:after{transition-duration:0s!important}
html.keyboard-navigation [data-reveal="pending"]{opacity:1!important;transform:none!important}
@media(hover:hover) and (pointer:fine){
 .desktop-nav a:hover:after{transform:scaleX(1)}
 .icon-button:hover{background:rgb(128 128 128 / .13)}
 .button:hover{background:#1c4c4f}
 .button-light:hover{background:#e8e9df}
 .button-outline:hover{background:rgba(0,0,0,.32)}
 .text-link:hover{color:var(--accent)}
 .pause-copy .text-link:hover{color:#e0d6b6}
 .button:hover span,.text-link:hover span,.quick-actions a:hover span{transform:translate(3px,-3px)}
 .photo-button:hover img,.menu-item:hover .portrait img,.breakfast-spread figure:hover img{transform:scale(1.045)}
 .photo-button:hover .expand-photo{transform:translate(-3px,-3px);background:var(--accent);color:var(--paper)}
 .coffee-ribbon:hover .ribbon-track{animation-play-state:paused!important}
}
@keyframes seal-turn{to{transform:rotate(360deg)}}
@keyframes steam-rise{0%{transform:translateY(7px) scaleX(.8);opacity:0}28%{opacity:.95}72%{opacity:.7}100%{transform:translateY(-12px) scaleX(1.12);opacity:0}}
@keyframes ribbon-flow{to{transform:translateX(-50%)}}
@keyframes daylight{from{transform:translate(-8%,6%) scale(.9);opacity:.65}to{transform:translate(-35%,22%) scale(1.15);opacity:1}}
@keyframes sun-drift{from{transform:translate(0,0) scale(.94)}to{transform:translate(-35px,22px) scale(1.08)}}
@media(max-width:1023px){.coffee-seal{width:145px;height:145px;right:32px;bottom:32px}.pause-layout{gap:32px}.ritual-art{width:260px;height:260px}.coffee-pause{margin-bottom:72px}}
@media(min-width:768px) and (max-width:1023px){.hero-content{align-self:end;padding-bottom:31px}}
@media(min-width:1024px){.hero-content{align-self:end;padding-bottom:58px}}
@media(min-width:1600px){.hero-image{object-position:50% 50%!important}}
@media(max-width:767px){
 .nav-actions{gap:2px}.nav-actions>.social-link{width:44px}
 .quick-actions a{gap:10px}.quick-actions a:hover span{transform:none}.quick-actions a:hover .quick-action-icon{transform:translate(2px,-2px)}
 .site-header{border-bottom:1px solid rgb(255 255 255 / .22);background:linear-gradient(180deg,rgb(0 0 0 / .22),transparent)}
 .site-header.scrolled{background:var(--paper);border-bottom-color:var(--line)}
 .coffee-seal{width:128px;height:128px;right:18px;top:126px;bottom:auto;background:rgb(23 56 55 / .42)}
 .hero-content{align-self:end;margin-top:0;padding:0 0 66px}
 .hero-actions{width:100%;gap:10px}.hero-actions .button{flex:1;padding-inline:14px;gap:12px}
 .coffee-ribbon{padding-block:19px}.ribbon-copy{font-size:40px;gap:28px;padding-right:28px}
 .ribbon-track{animation-duration:25s}
 .hero-shade{background:linear-gradient(180deg,rgb(0 0 0 / .42) 0%,rgb(0 0 0 / .16) 43%,rgb(0 0 0 / .6) 100%)}
 .hero-daylight{width:110%;right:-45%;top:-25%}
 .coffee-pause{margin-bottom:56px}.pause-layout{grid-template-columns:1fr;gap:32px;padding-block:42px 38px;min-height:0}
 .pause-copy h2{font-size:56px;margin-bottom:18px}.pause-copy .eyebrow{font-size:9px;margin-bottom:16px}
 .ritual-art{width:240px;height:240px}.ritual-note{font-size:20px}
 .lightbox-stage{height:calc(100dvh - 165px)}.lightbox-stage img{max-height:calc(100dvh - 225px)}
 .lightbox-hint{font-size:9px;margin-top:6px}
}
@media(max-width:767px) and (max-height:700px){.coffee-seal{width:92px;height:92px;right:18px;top:94px;bottom:auto}.hero-content{padding-bottom:28px}}
@media(prefers-reduced-motion:reduce){
 .ambient{animation:none!important}.steam{opacity:.8;transform:none}
 [data-reveal="pending"]{opacity:1!important;transform:none!important}
 .hero-daylight{opacity:.6}.ribbon-track{transform:none}
 .portrait img,.feature-image img,.button,.icon-button,.photo-button,.text-link,.quick-actions a{transform:none!important}
 .button span,.text-link span,.quick-actions a span{transform:none!important}
}
html[data-motion="paused"] [data-reveal="pending"]{opacity:1;transform:none}
html[data-motion="paused"] *,html[data-motion="paused"] *:before,html[data-motion="paused"] *:after{transition-duration:0s!important}
