:root { --elia-ease: cubic-bezier(.23,1,.32,1); --elia-drift: cubic-bezier(.45,0,.55,1); }
section[id] { scroll-margin-top: calc(var(--header-height) + 20px); }
:where(a, button):focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.hero :focus-visible, .site-header :focus-visible { outline-color: var(--white); }
.site-header.is-solid :focus-visible { outline-color: var(--accent); }

/* Decorative light sits below the storefront, leaving the sign and copy clear. */
.hero-warmth { position: absolute; inset: auto 0 0; height: 23%; overflow: hidden; pointer-events: none; z-index: -1; }
.hero-warmth i { position: absolute; inset: 0 -15%; background: radial-gradient(ellipse at 35% 95%, rgba(245,178,94,.3), transparent 58%); animation: elia-light 9s var(--elia-drift) infinite alternate; }
.hero-warmth i + i { background: radial-gradient(ellipse at 75% 100%, rgba(207,79,54,.25), transparent 52%); animation-delay: -5s; animation-duration: 13s; }
.elia-ribbon { overflow: hidden; padding-block: 20px; background: var(--accent); color: var(--white); }
.ribbon-track { display: flex; width: max-content; animation: elia-ribbon 32s linear infinite; }
.ribbon-track > span { display: flex; align-items: center; gap: 36px; flex-shrink: 0; padding-right: 36px; white-space: nowrap; font-size: clamp(1.3rem, 2.5vw, 2rem); font-weight: 720; letter-spacing: -.025em; }
.ribbon-track b { font-size: 1.3em; font-weight: 400; }
.elia-ribbon:hover .ribbon-track { animation-play-state: paused; }
.elia-seal { position: absolute; left: 12px; top: 18px; width: clamp(112px, 12vw, 160px); z-index: 1; border-radius: 50%; color: var(--ink); background: var(--paper-deep); pointer-events: none; }
.elia-seal svg { display: block; width: 100%; overflow: visible; }
.seal-orbit { transform-origin: 80px 80px; animation: elia-orbit 24s linear infinite; }
.seal-orbit text { fill: currentColor; font-size: 11.5px; font-weight: 750; letter-spacing: 1.5px; }
.seal-cup { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.feature-image { position: relative; }
.coffee-steam { position: absolute; width: 26%; height: 42%; left: 42%; top: 20%; pointer-events: none; }
.coffee-steam path { fill: none; stroke: #fff4df; stroke-width: 4; stroke-linecap: round; opacity: .35; animation: elia-steam 5s var(--elia-drift) infinite; }
.coffee-steam path:nth-child(2) { animation-delay: -1.7s; }
.coffee-steam path:nth-child(3) { animation-delay: -3.4s; }

/* Loops only run while visible, with an explicit visitor override. */
.ambient-loop { animation-play-state: paused; }
.motion-enabled .motion-in-view .ambient-loop { animation-play-state: running; }
.motion-enabled .elia-ribbon:hover .ribbon-track,
body.motion-enabled:is(.motion-paused, .page-hidden, .is-locked, .is-modal-open) .ambient-loop { animation-play-state: paused; }
.motion-toggle { position: fixed; z-index: 36; right: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(255,255,255,.4); border-radius: 10px; background: var(--ink); color: var(--white); cursor: pointer; font-size: .75rem; font-weight: 650; transition: transform 140ms var(--elia-ease), background-color 180ms ease; }
.motion-toggle[hidden], body.is-locked .motion-toggle, body.is-modal-open .motion-toggle { display: none; }
.motion-symbol { width: 12px; text-align: center; }
.motion-toggle:active { transform: scale(.96); }

.button { transition: transform 140ms var(--elia-ease), background-color 180ms ease, color 180ms ease, border-color 180ms ease; }
.button:active, .gallery-item:active, .menu-toggle:active, .lightbox-nav:active, .lightbox-close:active, .social-link:active { transform: scale(.97); }
.gallery-item { transition: transform 180ms var(--elia-ease); }
.gallery-caption { opacity: 1; transform: none; background: rgba(20,20,18,.82); }
.desktop-nav > a:not(.social-link), .footer-links > a:not(.social-link) { position: relative; }
.desktop-nav > a:not(.social-link)::after, .footer-links > a:not(.social-link)::after { content: ''; position: absolute; height: 2px; inset: auto 0 -7px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--elia-ease); }
.mobile-menu { transition: opacity 220ms var(--elia-ease), visibility 220ms; }
.mobile-menu nav a { transform: translateY(12px); opacity: 0; transition: transform 240ms var(--elia-ease), opacity 180ms ease; }
.mobile-menu.is-open nav a { transform: none; opacity: 1; }
.mobile-menu.is-open nav a:nth-child(2) { transition-delay: 35ms; }
.mobile-menu.is-open nav a:nth-child(3) { transition-delay: 70ms; }
.mobile-menu.is-open nav a:nth-child(4) { transition-delay: 105ms; }
.lightbox-dialog { transform: translateY(12px) scale(.98); transition: transform 240ms var(--elia-ease); }
.lightbox.is-open .lightbox-dialog { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translateY(-3px); }
  .button:active { transform: scale(.97); }
  .menu-column:hover .menu-image img, .gallery-item:hover img { transform: scale(1.055); }
  .gallery-item:hover .gallery-caption { transform: translateY(-4px); }
  .desktop-nav > a:hover::after, .footer-links > a:hover::after { transform: scaleX(1); }
  .social-link { transition: transform 180ms var(--elia-ease); }
  .social-link:hover { transform: rotate(-8deg) scale(1.1); }
  .motion-toggle:hover { background: #343c35; }
}
@keyframes elia-light { from { transform: translateX(-10%) scale(.95); opacity: .45; } to { transform: translateX(12%) scale(1.08); opacity: 1; } }
@keyframes elia-ribbon { to { transform: translateX(-50%); } }
@keyframes elia-orbit { to { transform: rotate(360deg); } }
@keyframes elia-steam { 0% { opacity: 0; transform: translateY(22px) scaleX(.9); } 30% { opacity: .65; } 75% { opacity: .3; } 100% { opacity: 0; transform: translate(10px,-38px) scaleX(1.08); } }
@media (max-width: 1050px) {
  .hero-warmth { inset: 0 0 auto; height: clamp(420px,58svh,600px); }
}
@media (max-width: 640px) {
  .hero-warmth { height: clamp(360px,54svh,520px); }
  .elia-ribbon { padding-block: 15px; }
  .ribbon-track > span { gap: 24px; padding-right: 24px; }
  .elia-seal { width: 108px; left: 0; top: 12px; }
  .motion-toolbar:has(.motion-toggle:not([hidden])) { display: flex; justify-content: flex-end; padding: 8px 16px; background: var(--ink); }
  .motion-toggle { position: static; }
}
body.keyboard-mode *, body.keyboard-mode *::before, body.keyboard-mode *::after { transition-duration: 0ms !important; transition-delay: 0ms !important; }
body.keyboard-mode { scroll-behavior: auto; }
html:has(body.keyboard-mode), html:has(body.motion-paused) { scroll-behavior: auto; }
body.motion-paused *, body.motion-paused *::before, body.motion-paused *::after { transition-duration: 0ms !important; }
@media (prefers-reduced-motion: reduce) {
  .ambient-loop { animation: none !important; }
  .motion-toggle { display: none; }
  .coffee-steam path { opacity: .25; }
  .button:hover, .button:active, .gallery-item:active, .social-link:hover, .menu-column:hover .menu-image img, .gallery-item:hover img { transform: none; }
  .lightbox-dialog, .mobile-menu nav a { transform: none; }
}