/* Belle's ambient motion: photographic drift, a turning stamp and a shopfront ticker. */
:root {
  --motion-out: cubic-bezier(.23, 1, .32, 1);
  --motion-in-out: cubic-bezier(.45, 0, .55, 1);
}

.hero-image { animation: cafe-drift 22s var(--motion-in-out) infinite alternate; }
.belle-seal {
  position: absolute;
  z-index: 1;
  right: max(36px, calc((100vw - 1240px) / 2));
  bottom: 100px;
  width: 154px;
  aspect-ratio: 1;
  color: #fff;
  border-radius: 50%;
  background: rgba(17, 18, 16, .72);
  pointer-events: none;
}
.seal-ring { display: block; width: 100%; height: 100%; animation: cafe-turn 28s linear infinite; }
.seal-ring text { fill: currentColor; font: 700 11px Arial, sans-serif; letter-spacing: 1px; }
.seal-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 70px;
  line-height: 1;
  animation: cafe-turn 20s linear infinite reverse;
}

.brand-stream { overflow: hidden; padding: 22px 0; color: var(--ink); background: var(--paper); border-bottom: 1px solid var(--line); }
.brand-stream-track { display: flex; width: max-content; animation: cafe-stream 32s linear infinite; }
.brand-stream-track > span {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 38px;
  padding-right: 38px;
  min-width: 100vw;
  flex-shrink: 0;
  font-size: clamp(2.6rem, 4.7vw, 4.9rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.brand-stream i { font-style: normal; color: var(--accent); font-size: .65em; }
.story-coffee { animation: cafe-float 6s var(--motion-in-out) infinite alternate; }
.story-people { animation: cafe-float 7s var(--motion-in-out) infinite alternate-reverse; }
.midday-feature > img { animation: lunch-drift 18s var(--motion-in-out) infinite alternate; }
.midday-overlay { z-index: 1; }
.midday-content { z-index: 2; }
.midday-feature::after {
  content: "";
  position: absolute;
  inset: -35% -60%;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 42%, rgba(255, 225, 169, .24) 49%, transparent 56%);
  animation: cafe-light 11s var(--motion-in-out) infinite;
}

/* Loops only run while their scene is on screen. Controls never depend on animation. */
[data-motion-scene] *, [data-motion-scene]::after { animation-play-state: paused; }
[data-motion-scene].motion-in-view *, [data-motion-scene].motion-in-view::after { animation-play-state: running; }
body.motion-paused [data-motion-scene] *, body.motion-paused [data-motion-scene]::after,
body.page-hidden [data-motion-scene] *, body.page-hidden [data-motion-scene]::after,
body.menu-open [data-motion-scene] *, body.menu-open [data-motion-scene]::after,
body.lightbox-open [data-motion-scene] *, body.lightbox-open [data-motion-scene]::after { animation-play-state: paused; }

.motion-toggle {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 46;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #63665e;
  border-radius: 24px;
  background: #111210;
  color: #fff;
  font: 700 12px Arial, sans-serif;
  cursor: pointer;
  transition: transform 160ms var(--motion-out), background-color 160ms ease;
}
.motion-toggle[hidden] { display: none; }
.motion-toggle-icon { width: 12px; text-align: center; }
.motion-toggle:disabled { cursor: default; }
body.menu-open .motion-toggle, body.lightbox-open .motion-toggle { visibility: hidden; }
.button, .social-link, .menu-toggle, .lightbox-control, .lightbox-close, .gallery-item {
  transition: transform 160ms var(--motion-out), color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}
.button:active, .social-link:active, .menu-toggle:active, .lightbox-control:active,
.lightbox-close:active, .motion-toggle:active, .gallery-item:active { transform: scale(.97); }
.desktop-nav a { position: relative; }
.desktop-nav a::after { content: ""; position: absolute; inset: auto 0 -7px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 200ms var(--motion-out); }
.gallery-item::after {
  content: "↗";
  position: absolute;
  right: 15px;
  bottom: 15px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-size: 25px;
  pointer-events: none;
  transition: transform 220ms var(--motion-out);
}
.gallery-item img { transition: transform 650ms var(--motion-out); }
.mobile-menu { transition: opacity 220ms var(--motion-out), transform 260ms var(--motion-out), visibility 0s linear 260ms; }
.lightbox figure { transition: transform 230ms var(--motion-out); transform: scale(.97); }
.lightbox.is-open figure { transform: scale(1); }
.lightbox img { touch-action: pan-y pinch-zoom; }
:is(.motion-toggle, .gallery-item, .button, .social-link, .lightbox-control, .lightbox-close):focus-visible { outline: 3px solid #e6ae65; outline-offset: 5px; }

@media (hover: hover) and (pointer: fine) {
  .desktop-nav a:hover::after, .desktop-nav a:focus-visible::after { transform: scaleX(1); }
  .button:hover { transform: translateY(-3px); }
  .button:active { transform: translateY(0) scale(.97); }
  .gallery-item:hover img { transform: scale(1.065); filter: none; }
  .gallery-item:hover::after { transform: rotate(45deg); }
  .social-link:hover { transform: translateY(-3px); }
  .motion-toggle:hover { background: #30332d; }
}
@media (hover: none) {
  .button:hover, .gallery-item:hover img, .text-link:hover span, .review a:hover span { transform: none; filter: none; }
  .button:active, .gallery-item:active { transform: scale(.97); }
}
@media (max-width: 1024px) {
  .belle-seal { width: 104px; right: 22px; top: 102px; bottom: auto; }
  .seal-center { font-size: 48px; }
}
@media (max-width: 767px) {
  .brand-stream { padding: 17px 0; }
  .brand-stream-track > span { gap: 24px; padding-right: 24px; }
  .motion-toggle { top: 12px; right: 102px; bottom: auto; z-index: 51; min-height: 44px; padding: 8px 12px; }
  .story-coffee { animation-name: cafe-float-small; }
  .story-people { animation-name: cafe-float-small; }
}

/* Keyboard navigation stays immediate, including menu and lightbox actions. */
body.keyboard-input *, body.keyboard-input *::after { transition-duration: 0s !important; }
body.keyboard-input { scroll-behavior: auto; }
html:has(body.keyboard-input) { scroll-behavior: auto; }
@keyframes cafe-drift { from { transform: scale(1); } to { transform: scale(1.07) translateX(-.6%); } }
@keyframes lunch-drift { from { transform: scale(1.02) translateX(-.6%); } to { transform: scale(1.10) translateX(.6%); } }
@keyframes cafe-turn { to { transform: rotate(360deg); } }
@keyframes cafe-stream { to { transform: translateX(-50%); } }
@keyframes cafe-float { from { transform: translateY(10px) rotate(-1.5deg); } to { transform: translateY(-12px) rotate(1.5deg); } }
@keyframes cafe-float-small { from { transform: translateY(5px) rotate(-1deg); } to { transform: translateY(-7px) rotate(1deg); } }
@keyframes cafe-light { 0%, 12% { transform: translateX(-30%); opacity: 0; } 45% { opacity: 1; } 85%, 100% { transform: translateX(30%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-image, .midday-feature > img, .story-coffee, .story-people, .lightbox figure { transform: none !important; }
  .midday-feature::after { display: none; }
  .brand-stream-track { width: 100%; }
  .brand-stream-track > span { min-width: 0; width: 100%; gap: 12px; padding: 0 16px; font-size: clamp(1rem, 4vw, 3.5rem); }
  .brand-stream-track > span + span { display: none; }
  .brand-stream i { font-size: .6em; }
  .button:hover, .button:active, .social-link:hover, .gallery-item:hover img, .gallery-item:hover::after,
  .gallery-item:active, .motion-toggle:active, .menu-toggle:active, .lightbox-control:active,
  .lightbox-close:active, .text-link:hover span, .review a:hover span { transform: none !important; }
}