/* Cafe Jireh motion: slow photographic atmosphere, quick tactile controls. */
:root { --motion-out: cubic-bezier(.23, 1, .32, 1); --motion-in-out: cubic-bezier(.77, 0, .175, 1); }
section[id] { scroll-margin-top: calc(var(--header-height) + 16px); }
.motion-toggle { width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; border-radius: 50%; }
.motion-toggle[hidden] { display: none; }
.motion-toggle svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.motion-play { display: none; }
.motion-toggle[aria-pressed="true"] .motion-play { display: block; }
.motion-toggle[aria-pressed="true"] .motion-pause { display: none; }
.motion-toggle:disabled { cursor: default; opacity: .65; }

.hero-image { animation: cafe-breathe 20s ease-in-out infinite alternate; transform-origin: 62% 52%; }
.hero h1 { position: relative; }
.hero h1::after { content: ""; position: absolute; right: 0; bottom: -9px; width: 48%; height: 3px; background: #e98768; transform-origin: right; animation: coffee-line 5.5s var(--motion-in-out) infinite alternate; }
.hero-content > * { animation: none; }
.about-stamp { animation: cafe-float 5s ease-in-out infinite; }
.menu-introduction { display: flex; align-items: flex-start; gap: clamp(32px, 6vw, 96px); }
.menu-introduction .section-heading { flex: 1; min-width: 0; }
.coffee-orbit { width: 190px; height: 190px; flex: 0 0 190px; position: relative; margin: 20px 0 44px auto; display: grid; place-items: center; }
.orbit-type { position: absolute; inset: 0; width: 100%; height: 100%; fill: #f0ad97; font-size: 13px; font-weight: 750; animation: cafe-turn 26s linear infinite; }
.coffee-orbit img { width: 48%; height: 48%; border-radius: 50%; object-fit: cover; }
.people-story > img { animation: cafe-breathe 18s ease-in-out infinite alternate-reverse; transform-origin: 50% 58%; }
.brand-ribbon { overflow: hidden; background: var(--accent); color: var(--white); padding-block: 22px; }
.ribbon-track { display: flex; width: max-content; animation: cafe-ribbon 28s linear infinite; }
.ribbon-group { flex: 0 0 auto; display: flex; align-items: center; gap: 44px; padding-right: 44px; }
.ribbon-group > span { white-space: nowrap; font-size: clamp(2rem, 4vw, 3.8rem); font-weight: 800; line-height: 1.15; letter-spacing: -.035em; }
.ribbon-group .ribbon-star { font-size: 2rem; color: #f0ad97; animation: cafe-turn 12s linear infinite; }

.button, .social-link, .motion-toggle, .menu-toggle, .lightbox-close, .lightbox-nav { transition: transform 160ms var(--motion-out), background-color 180ms ease, color 180ms ease; }
.button:active, .social-link:active, .motion-toggle:active, .menu-toggle:active, .lightbox-close:active, .lightbox-nav:active { transform: scale(.96); }
.button { position: relative; overflow: hidden; }
.button::after { content: ""; position: absolute; inset: -50% auto -50% -65%; width: 38%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .18), transparent); transform: skewX(-20deg); pointer-events: none; transition: transform 500ms var(--motion-out); }
.menu-panel img { transition: transform 650ms var(--motion-out); }
.gallery-item { position: relative; }
.gallery-item::after { content: "↗"; position: absolute; bottom: 16px; right: 16px; width: 42px; height: 42px; display: grid; place-items: center; background: var(--accent); color: var(--white); border-radius: 50%; font-size: 1.4rem; opacity: 0; transform: translateY(9px); transition: opacity 180ms ease, transform 220ms var(--motion-out); pointer-events: none; }
.gallery-item:focus-visible::after { opacity: 1; transform: none; }
.gallery-item img { transition: transform 600ms var(--motion-out); }
.desktop-nav a[aria-current="location"]::after { transform: scaleX(1); }
.desktop-nav a::after { transition-timing-function: var(--motion-out); }
.mobile-menu { overflow-y: auto; overscroll-behavior: contain; transition: opacity 180ms ease, visibility 180ms ease, transform 240ms var(--motion-out); transform: translateY(-16px); }
.mobile-menu.is-open { transform: none; transition-property: opacity, transform; }
.mobile-menu nav a { transition: transform 220ms var(--motion-out); }
.lightbox-stage { opacity: 1; transform: scale(.98); transition: transform 240ms var(--motion-out); }
.lightbox.is-open .lightbox-stage { opacity: 1; transform: none; }
.lightbox.is-open { transition-property: opacity; }
.lightbox-stage img { touch-action: pan-y; user-select: none; -webkit-user-drag: none; }
.lightbox-stage figcaption { min-height: 1.5em; }
.reveal, .reveal.is-visible { opacity: 1; animation: none; }
html[data-motion="running"] .reveal:not(.is-visible) { transform: translateY(18px); }
.reveal.is-visible { transform: none; transition: transform 650ms cubic-bezier(.25,.46,.45,.94); }
.menu-panel:nth-child(2), .gallery-item:nth-child(3n + 2) { transition-delay: 40ms; }
.menu-panel:nth-child(3), .gallery-item:nth-child(3n + 3) { transition-delay: 80ms; }

@keyframes cafe-breathe { from { transform: scale(1); } to { transform: scale(1.085); } }
@keyframes cafe-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-13px) rotate(1deg); } }
@keyframes cafe-turn { to { transform: rotate(360deg); } }
@keyframes coffee-line { from { transform: scaleX(.3); opacity: .6; } to { transform: scaleX(1); opacity: 1; } }
@keyframes cafe-ribbon { to { transform: translateX(-50%); } }

@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translateY(-3px); }
  .button:hover::after { transform: translateX(530%) skewX(-20deg); }
  .button:active { transform: scale(.96); }
  .social-link:hover, .motion-toggle:hover { background: rgb(128 128 128 / .16); transform: translateY(-2px); }
  .menu-panel:hover img, .gallery-item:hover img { transform: scale(1.065); }
  .gallery-item:hover::after { opacity: 1; transform: none; }
  .mobile-menu nav a:hover { transform: translateX(8px); }
  .brand-ribbon:hover .ribbon-track { animation-play-state: paused; }
}
@media (hover: none) { .gallery-item:hover img { transform: none; } .gallery-item::after { opacity: 1; transform: none; width: 36px; height: 36px; } }
@media (max-width: 900px) { .coffee-orbit { flex-basis: 140px; width: 140px; height: 140px; } }
@media (max-width: 700px) {
  .menu-introduction { display: block; }
  .coffee-orbit { width: 130px; height: 130px; margin: -14px 0 32px auto; }
  .brand-ribbon { padding-block: 18px; }
  .ribbon-group { gap: 28px; padding-right: 28px; }
  .hero h1::after { height: 2px; }
  .hero-image { transform-origin: 16% center; }
  .mobile-menu-inner { min-height: 100%; gap: 32px; }
}

/* CSS motion stays off the main thread; offscreen/hidden scenes stop consuming frames. */
.motion-outside .hero-image, .motion-outside .hero h1::after,
.hero.motion-outside h1::after, .motion-outside .about-stamp,
.motion-outside .orbit-type, .people-story.motion-outside > img,
.motion-outside .ribbon-track, .motion-outside .ribbon-star,
html[data-away="true"] *, html[data-away="true"] *::after, html[data-away="true"] *::before { animation-play-state: paused !important; }
html[data-motion="paused"] *, html[data-motion="paused"] *::before, html[data-motion="paused"] *::after { animation-play-state: paused !important; transition: none !important; }
html[data-motion="paused"] { scroll-behavior: auto; }
html[data-input="keyboard"] *, html[data-input="keyboard"] *::before, html[data-input="keyboard"] *::after { transition: none !important; }
html[data-input="keyboard"] { scroll-behavior: auto; }
html[data-input="keyboard"] .reveal, html[data-input="keyboard"] .hero-content > * { animation: none !important; }
html:not([data-motion]) *, html:not([data-motion]) *::before, html:not([data-motion]) *::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .button:hover, .button:active, .gallery-item:hover img, .menu-panel:hover img, .social-link:hover, .mobile-menu nav a:hover { transform: none; }
}