/* Emil design engineering: calm content, expressive atmosphere, immediate controls. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.65,0,.35,1);--ease-drawer:cubic-bezier(.32,.72,0,1)}
.hero-image{animation:room-breathe 14s var(--ease-in-out) infinite alternate;transform-origin:50% 55%}
@media(max-width:767px){.hero-image{animation-name:room-breathe-mobile}}
.joy-seal{position:absolute;right:22px;top:calc(var(--nav-height) + 32px);width:118px;color:var(--brand);pointer-events:none}
.joy-seal>svg{width:100%;height:auto;display:block;overflow:visible}
.seal-paper{fill:var(--paper);stroke:rgba(143,16,24,.16);stroke-width:1}
.seal-type{transform-origin:80px 80px;animation:full-turn 24s linear infinite}
.seal-type text{font:600 12px DM Sans,Arial,sans-serif;fill:currentColor}
.seal-flower{fill:currentColor;transform-origin:80px 80px;animation:seal-bloom 5s var(--ease-in-out) infinite alternate}
.flower-centre{fill:var(--paper)}
.joy-ribbon{overflow:hidden;padding-block:20px;border-block:1px solid var(--line);color:var(--brand);background:var(--paper)}
.joy-track{display:flex;width:max-content;animation:joy-flow 30s linear infinite}
.joy-repeat{display:flex;align-items:center;gap:28px;padding-right:28px;min-width:100vw;justify-content:space-around;flex-shrink:0}
.joy-repeat span{font-size:clamp(38px,3vw,42px);font-weight:450;letter-spacing:-.055em;line-height:1.2;white-space:nowrap}
.joy-repeat svg{width:34px;height:34px;flex:none;fill:currentColor}
.coffee-moment{display:flex;align-items:center;gap:16px;color:var(--brand);margin-bottom:20px}
.coffee-moment span{font-size:14px;font-weight:500;letter-spacing:.015em}
.steam-cup{width:58px;height:58px;flex:none;overflow:visible}
.steam{animation:steam-rise 3s var(--ease-in-out) infinite;transform-origin:center}
.steam-two{animation-delay:-1s}
.steam-three{animation-delay:-2s}
.feature-image{position:relative;isolation:isolate}
.matcha-light{position:absolute;z-index:1;top:-25%;left:-50%;height:150%;width:36%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);pointer-events:none;transform:translateX(-160%) skewX(-20deg);animation:window-light 7s var(--ease-in-out) infinite}
.footer-signoff{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:12px 48px;color:var(--brand)}
.footer-signoff p{font-size:clamp(46px,8vw,116px);font-weight:450;line-height:1.06;letter-spacing:-.055em}
.footer-flower{width:72px;flex:none;animation:full-turn 22s linear infinite}
.footer-flower svg{display:block;width:100%;height:auto;fill:currentColor}
.button,.icon-button,.social-links a,.gallery-item{transition:transform 150ms var(--ease-out),background-color 180ms ease,color 180ms ease}
.button span,.text-link span{transition:transform 180ms var(--ease-out)}
.button:active,.icon-button:active,.social-links a:active{transform:scale(.96)}
.gallery-item:active{transform:scale(.985)}
.icon-button:hover{background:var(--wash)}
.lightbox .icon-button:hover{background:rgba(255,255,255,.12)}
.desktop-nav a{position:relative}
.desktop-nav a::after{content:"";position:absolute;left:0;right:0;bottom:12px;height:1px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform 220ms var(--ease-out)}
.site-header.is-solid .desktop-nav a[aria-current="location"]{color:var(--brand)}
.site-header:not(.is-solid) .desktop-nav a[aria-current="location"]{color:var(--paper)}
.site-header:not(.is-solid) .desktop-nav a::after{background:var(--paper)}
.desktop-nav a[aria-current="location"]::after{transform:scaleX(1)}
.gallery-item::after{content:"↗";position:absolute;right:14px;bottom:14px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--paper);color:var(--brand);font-size:24px;line-height:1;pointer-events:none;transition:transform 200ms var(--ease-out)}
.gallery-item img{transition:transform 280ms var(--ease-out)}
.lightbox-stage img{touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}
.lightbox-stage[aria-busy="true"]{cursor:progress}
.lightbox:has(.lightbox-stage[aria-busy="true"]) #lightbox-status{opacity:.65}
.using-keyboard .button,.using-keyboard .icon-button,.using-keyboard .social-links a,.using-keyboard .gallery-item,.using-keyboard .desktop-nav a::after{transition:none}
.using-keyboard .button:active,.using-keyboard .icon-button:active,.using-keyboard .social-links a:active,.using-keyboard .gallery-item:active{transform:none}
.reveal-pending{opacity:0;transform:translateY(24px)}
.motion-ready [data-ambient]:not(.ambient-active) .ambient-loop,.motion-tab-hidden .ambient-loop{animation-play-state:paused}
@media(hover:hover) and (pointer:fine){
  .button:hover{transform:translateY(-2px)}
  .button:active{transform:translateY(0) scale(.96)}
  .button:hover span,.text-link:hover span{transform:translate(3px,-3px)}
  .gallery-item:hover img{transform:scale(1.045)}
  .gallery-item:hover::after{transform:translate(-2px,-2px) rotate(8deg)}
  .social-links a:hover{transform:translateY(-2px)}
  .desktop-nav a:hover{text-decoration:none}
  .desktop-nav a:hover::after{transform:scaleX(1)}
}
@media(min-width:768px){
  .joy-seal{width:154px;right:var(--gutter);top:calc(var(--nav-height) + 42px)}
  .joy-ribbon{padding-block:18px}
  .joy-repeat{gap:32px;padding-right:32px}
  .joy-repeat svg{width:30px;height:30px}
  .coffee-moment{margin-bottom:22px}
  .steam-cup{width:64px;height:64px}
  .footer-flower{width:136px;margin-right:20px}
  .footer-signoff{padding-block:10px 60px}
}
@media(min-width:1024px){
  .joy-seal{width:156px;right:max(80px,calc((100vw - 1280px)/2));top:calc(var(--nav-height) + 30px);bottom:auto}
  .footer-flower{width:180px;margin-right:60px}
}
@media(max-height:650px){.joy-seal{width:84px;top:calc(var(--nav-height) + 20px);bottom:auto;right:20px}}
@keyframes room-breathe{from{transform:scale(1.02) translate3d(-.4%,0,0)}to{transform:scale(1.12) translate3d(.6%,-.8%,0)}}
@keyframes room-breathe-mobile{from{transform:scale(1.01) translate3d(-.15%,0,0)}to{transform:scale(1.035) translate3d(.15%,-.25%,0)}}
@keyframes full-turn{to{transform:rotate(360deg)}}
@keyframes seal-bloom{from{transform:translate(40px,40px) scale(.88) rotate(-9deg)}to{transform:translate(40px,40px) scale(1.05) rotate(9deg)}}
@keyframes joy-flow{to{transform:translateX(-50%)}}
@keyframes steam-rise{0%{opacity:0;transform:translate(0,7px) scaleX(.9)}35%{opacity:.85}75%{opacity:.6}100%{opacity:0;transform:translate(5px,-10px) scaleX(1.15)}}
@keyframes window-light{0%,16%{transform:translateX(-120%) skewX(-20deg)}75%,100%{transform:translateX(580%) skewX(-20deg)}}
@media(prefers-reduced-motion:reduce){
  .ambient-loop{animation:none!important}
  .hero-image{transform:none}
  .seal-type,.footer-flower{transform:none}
  .seal-flower{transform:translate(40px,40px)}
  .joy-track{transform:none;width:100%}
  .joy-repeat{min-width:0;width:100%;gap:14px;padding:0 20px;flex-wrap:wrap;justify-content:center}
  .joy-repeat+ .joy-repeat{display:none}
  .joy-repeat span{font-size:clamp(22px,3vw,36px)}
  .joy-repeat svg{width:22px;height:22px}
  .steam{opacity:.75;transform:none}
  .matcha-light{display:none}
  .reveal-pending{opacity:1;transform:none}
  .button:hover,.button:active,.icon-button:active,.social-links a:hover,.social-links a:active,.gallery-item:active,.gallery-item:hover img,.gallery-item:hover::after,.button:hover span,.text-link:hover span{transform:none}
}