/* Native motion: emil-design-eng, explicitly requested by the user.
   Ambient loops carry brand expression. Information and map stay stable.
   UI feedback is 120–240ms; loops only use transforms and opacity. */
:root {
  --ease-out: cubic-bezier(.23,1,.32,1);
  --ease-drawer: cubic-bezier(.32,.72,0,1);
  --ease-float: cubic-bezier(.45,0,.55,1);
}
html.keyboard-input { scroll-behavior:auto; }
.hero-photo { transform-origin:56% 52%; }
.hero-seal {
  position:absolute; right:var(--gutter); top:calc(var(--header) + 34px);
  width:126px; aspect-ratio:1; pointer-events:none;
}
.seal-float { position:relative; width:100%; height:100%; background:var(--paper); border-radius:50%; }
.seal-type { width:100%; height:100%; display:block; fill:var(--ink); font-size:12px; font-weight:500; letter-spacing:1.4px; }
.seal-type path { fill:none; }
.seal-float>img { position:absolute; inset:0; margin:auto; width:44px; height:44px; }
.brand-ribbon { overflow:hidden; padding-block:22px; color:var(--accent); background:var(--paper); border-block:1px solid var(--rule); }
.ribbon-track { width:max-content; display:flex; }
.ribbon-group { display:flex; align-items:center; flex:none; gap:30px; padding-right:30px; }
.ribbon-group>span { font-size:clamp(38px,5.7vw,80px); font-weight:500; line-height:1.2; letter-spacing:-.035em; white-space:nowrap; }
.ribbon-group>i { flex:none; width:12px; height:12px; border-radius:50%; background:var(--accent); }
.ribbon-outline { color:transparent; -webkit-text-stroke:1px var(--accent); }
.coffee-art { position:relative; width:108px; height:108px; margin:0 0 30px 12px; color:#dbe1d5; }
.coffee-ring { position:absolute; inset:0; border:1.5px solid currentColor; border-radius:50%; opacity:.35; }
.coffee-ring:nth-child(2) { transform:scale(.8); }
.coffee-ring:nth-child(3) { transform:scale(.6); }
.coffee-bean { position:absolute; inset:19px; width:70px; height:70px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.footer-letters { display:inline-flex; padding-block:8px; }
.footer-letters>span { display:block; }

/* Press and focus feedback remain usable without a hover-capable pointer. */
.button,.icon-link,.nav-toggle,.close-button,.lightbox-arrow {
  transition:transform 150ms var(--ease-out),background-color 180ms ease,opacity 180ms ease;
}
.button:active,.icon-link:active,.nav-toggle:active,.close-button:active,.lightbox-arrow:active { transform:scale(.96); }
.button span,.text-link span,.quick-info a strong>span { display:inline-block; transition:transform 220ms var(--ease-out); }
.text-link { transition:text-decoration-color 180ms ease; }
.gallery-item img,.menu-card .portrait img { transition:transform 280ms var(--ease-out); }
.enlarge { transition:transform 220ms var(--ease-out),background-color 180ms ease,color 180ms ease; }
.gallery-item:focus-visible .enlarge { background:var(--accent); color:var(--paper); }
.desktop-nav a { position:relative; }
.desktop-nav a::after { content:""; position:absolute; inset:auto 0 9px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform 220ms var(--ease-out); }
.desktop-nav a[aria-current="location"]::after { transform:scaleX(1); }
.nav-toggle span { transition:transform 180ms var(--ease-out); }
.nav-toggle[aria-expanded="true"] span:first-child { transform:translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform:translateY(-3.75px) rotate(-45deg); }
.lightbox-stage img { touch-action:pan-y pinch-zoom; user-select:none; -webkit-user-drag:none; }
.lightbox-status { position:absolute; inset:50% 24px auto; color:var(--paper); text-align:center; font-size:15px; pointer-events:none; }
.lightbox-status[hidden] { display:none; }
html.keyboard-input .button,html.keyboard-input .icon-link,html.keyboard-input .nav-toggle,
html.keyboard-input .desktop-nav a::after,html.keyboard-input .enlarge,
html.keyboard-input .nav-toggle span,html.keyboard-input .button span,
html.keyboard-input .text-link span,html.keyboard-input .close-button,
html.keyboard-input .lightbox-arrow { transition:none; }

@media (hover:hover) and (pointer:fine) {
  .button-light:hover { background:#dfe5d7; }
  .button-outline:hover { background:rgb(0 0 0 / .27); }
  .button-dark:hover { background:#2d3b2b; }
  .text-link:hover { text-decoration-color:currentColor; }
  .phone-link:hover,.footer-bottom a:hover,.quick-info a:hover strong { text-decoration:underline; text-underline-offset:5px; }
  .button:hover { transform:translateY(-2px); }
  .button:hover span,.text-link:hover span,.quick-info a:hover strong>span { transform:translate(3px,-3px); }
  .button:active { transform:translateY(0) scale(.96); }
  .icon-link:hover { transform:translateY(-2px); opacity:.7; }
  .desktop-nav a:hover { text-decoration:none; }
  .desktop-nav a:hover::after { transform:scaleX(1); }
  .gallery-item:hover img { transform:scale(1.045); }
  .menu-card:hover .portrait img { transform:scale(1.035); }
  .gallery-item:hover .enlarge { transform:translate(-3px,-3px); background:var(--accent); color:var(--paper); }
  .close-button:hover { transform:rotate(90deg); }
  .lightbox-arrow:hover { background:rgb(255 255 255 / .22); }
}

@media (prefers-reduced-motion:no-preference) {
  .hero-photo { animation:room-drift 16s var(--ease-float) infinite alternate; animation-play-state:paused; }
  .seal-float { animation:seal-float 5s var(--ease-float) infinite; }
  .seal-type { animation:seal-turn 24s linear infinite; }
  .ribbon-track { animation:ribbon-flow 26s linear infinite; }
  .coffee-ring { animation:coffee-ripple 4.8s var(--ease-float) infinite; }
  .coffee-ring:nth-child(2) { animation-delay:-1.6s; }
  .coffee-ring:nth-child(3) { animation-delay:-3.2s; }
  .coffee-bean { animation:bean-float 4.8s var(--ease-float) infinite; }
  .footer-letters>span { animation:letter-wave 5.4s var(--ease-float) infinite; animation-delay:calc(var(--letter)*120ms); }
  .ambient { animation-play-state:paused; }
  .is-in-view .ambient,.hero.is-in-view .hero-photo { animation-play-state:running; }
  .page-inactive .ambient,.page-inactive .hero-photo,.is-locked .ambient,.is-locked .hero-photo { animation-play-state:paused; }
  @keyframes room-drift { from { transform:scale(1.01) translate(0,0); } to { transform:scale(1.095) translate(-.8%,.6%); } }
  @keyframes seal-float { 0%,100% { transform:translateY(0) rotate(-4deg); } 50% { transform:translateY(-9px) rotate(3deg); } }
  @keyframes seal-turn { to { transform:rotate(360deg); } }
  @keyframes ribbon-flow { to { transform:translateX(-50%); } }
  @keyframes coffee-ripple { 0% { transform:scale(.54); opacity:0; } 22% { opacity:.65; } 100% { transform:scale(1.36); opacity:0; } }
  @keyframes bean-float { 0%,100% { transform:translateY(2px) rotate(-12deg); } 50% { transform:translateY(-7px) rotate(12deg); } }
  @keyframes letter-wave { 0%,8%,42%,100% { transform:translateY(0); } 23% { transform:translateY(-8px); } }
}

@media(min-width:640px) {
  .hero-seal { width:154px; right:40px; top:calc(var(--header) + 46px); }
  .seal-float>img { width:54px; height:54px; }
  .ribbon-group { gap:44px; padding-right:44px; }
  .coffee-art { width:90px; height:90px; margin-bottom:28px; }
  .coffee-bean { inset:14px; width:62px; height:62px; }
}
@media(min-width:1024px) {
  .hero-seal { width:154px; top:calc(var(--header) + 24px); right:max(var(--gutter),calc((100vw - var(--max))/2)); bottom:auto; }
  .seal-float>img { width:66px; height:66px; }
  .brand-ribbon { padding-block:16px; }
  .ribbon-group { min-width:100vw; justify-content:space-around; gap:28px; padding-right:28px; }
  .ribbon-group>span { font-size:clamp(32px,2.8vw,44px); }
  .ribbon-group>i { width:8px; height:8px; }
  .coffee-art { width:110px; height:110px; margin-bottom:34px; }
  .coffee-bean { inset:19px; width:72px; height:72px; }
}
@media(max-height:660px) and (max-width:639px) {
  .hero-seal { width:90px; top:calc(var(--header) + 18px); }
  .seal-float>img { width:34px; height:34px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-photo,.ambient,.footer-letters>span { animation:none!important; transform:none; }
  .ribbon-track { width:100%; justify-content:center; }
  .ribbon-group { flex:0 1 100%; min-width:0; width:100%; flex-wrap:wrap; justify-content:center; padding-inline:20px; gap:8px 18px; }
  .ribbon-group:nth-child(2) { display:none; }
  .ribbon-group>span { font-size:clamp(20px,3.3vw,44px); }
  .ribbon-group>i { width:6px; height:6px; }
  .ribbon-group>i:last-child { display:none; }
  .ribbon-outline { color:var(--accent); -webkit-text-stroke:0; }
  .coffee-ring:nth-child(2) { transform:scale(.8); }
  .coffee-ring:nth-child(3) { transform:scale(.6); }
  .button:hover,.button:active,.icon-link:hover,.close-button:hover,.gallery-item:hover img,
  .menu-card:hover .portrait img,.gallery-item:hover .enlarge,.text-link:hover span,.button:hover span,
  .quick-info a:hover strong>span { transform:none; }
}