/* Gatehouse motion: blossom breeze, slow mornings, sunlight on the table. */
:root { --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-drift: cubic-bezier(.45, 0, .55, 1); }
.site-nav { margin-left: auto; }
.motion-toggle { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 30px; background: var(--surface); color: var(--accent-strong); cursor: pointer; font-size: .75rem; font-weight: 750; }
.motion-toggle[hidden] { display: none; }
.motion-toggle > span:first-child { font-size: 17px; width: 17px; }
.motion-toggle:disabled { cursor: default; }
.hero-scrim { background: linear-gradient(180deg, rgba(0,0,0,.02) 25%, rgba(0,0,0,.09) 48%, rgba(0,0,0,.48) 100%); }
.hero-content { position: relative; z-index: 2; }
.hero > img { transform-origin: 66% 45%; }
.blossom-drift { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.blossom-drift i { position: absolute; top: -8%; left: 8%; width: 15px; height: 24px; border-radius: 85% 15% 75% 25%; background: #f8cad1; opacity: 0; }
.blossom-drift i:nth-child(2) { left: 23%; width: 10px; height: 17px; animation-delay: -3s; animation-duration: 12s; }
.blossom-drift i:nth-child(3) { left: 42%; animation-delay: -7s; animation-duration: 16s; }
.blossom-drift i:nth-child(4) { left: 57%; width: 9px; height: 16px; animation-delay: -11s; animation-duration: 13s; }
.blossom-drift i:nth-child(5) { left: 70%; animation-delay: -4s; animation-duration: 17s; }
.blossom-drift i:nth-child(6) { left: 88%; width: 11px; height: 18px; animation-delay: -9s; animation-duration: 15s; }
.brand-ribbon { overflow: hidden; background: var(--honey-bright); color: var(--accent-strong); padding: 22px 0; }
.ribbon-track { display: flex; width: max-content; }
.ribbon-track > span { flex-shrink: 0; display: flex; align-items: center; gap: 38px; padding-right: 38px; font-size: clamp(1.4rem, 2.8vw, 2.6rem); font-weight: 750; line-height: 1.2; letter-spacing: -.025em; white-space: nowrap; }
.ribbon-track b { font-size: 1.3em; font-weight: 400; }
.story-collage { position: relative; }
.cafe-seal { position: absolute; z-index: 3; right: 16px; bottom: 24px; width: clamp(118px, 12vw, 160px); aspect-ratio: 1; border-radius: 50%; color: var(--accent-strong); background: var(--honey-bright); box-shadow: 0 8px 24px #2c1c1826; pointer-events: none; }
.cafe-seal svg { width: 100%; height: 100%; fill: currentColor; font-size: 12px; font-weight: 750; letter-spacing: 1.3px; }
.cafe-seal > span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 64px; line-height: 1; }
.table-light { position: absolute; inset: -40%; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(246,188,166,.24) 48%, rgba(255,225,215,.13) 56%, transparent 65%); }
.feature-copy { position: relative; z-index: 1; }
.menu-card { transition: transform 260ms var(--ease-out), box-shadow 260ms ease; }
.menu-image img { transition: transform 650ms var(--ease-out); }
.button, .motion-toggle, .menu-toggle, .lightbox-close, .lightbox-nav, .social-links a, .mobile-actions a { transition: transform 150ms var(--ease-out), background-color 180ms ease, color 180ms ease; }
.button:active, .motion-toggle:active, .menu-toggle:active, .lightbox-close:active, .lightbox-nav:active, .social-links a:active, .mobile-actions a:active { transform: scale(.96); }
.gallery-item:active { transform: scale(.985); }
.gallery-item::before { content: '↗'; position: absolute; z-index: 3; top: 16px; right: 16px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--white); color: var(--accent-strong); font-size: 25px; transform: translateY(6px); opacity: 0; transition: transform 220ms var(--ease-out), opacity 180ms ease; }
.gallery-item:focus-visible::before { opacity: 1; transform: none; }
.site-nav > a::after { right: 0; transform: scaleX(0); transform-origin: left; transition: transform 200ms var(--ease-out); }
.site-nav > a:hover::after, .site-nav > a:focus-visible::after { transform: scaleX(1); }
.lightbox { display: grid; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 160ms ease, visibility 160ms; }
.lightbox[aria-hidden="false"] { visibility: visible; opacity: 1; pointer-events: auto; transition-duration: 240ms; }
.lightbox-panel { transform: translateY(14px) scale(.97); transition: transform 240ms var(--ease-out); }
.lightbox figure img { touch-action: pan-y pinch-zoom; }
.lightbox[aria-hidden="false"] .lightbox-panel { transform: none; }

@media (hover: hover) and (pointer: fine) {
  .menu-card:hover { transform: translateY(-8px); box-shadow: 0 20px 36px #5a2e2329; }
  .menu-card:hover img { transform: scale(1.045); }
  .gallery-item:hover img { transform: scale(1.055); }
  .gallery-item:hover::before { opacity: 1; transform: none; }
  .brand-ribbon:hover .ribbon-track { animation-play-state: paused; }
  .motion-toggle:hover { background: var(--surface-muted); }
}
@media (hover: none) {
  .gallery-item:hover img, .social-links a:hover { transform: none; }
  .gallery-item::before { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero > img { animation: morning-pan 22s var(--ease-drift) infinite alternate; }
  .blossom-drift i { animation-name: blossom-fall; animation-duration: 14s; animation-timing-function: linear; animation-iteration-count: infinite; }
  .ribbon-track { animation: ribbon-flow 32s linear infinite; }
  .cafe-seal svg { animation: seal-turn 28s linear infinite; }
  .cafe-seal > span { animation: bloom-breathe 5s var(--ease-drift) infinite alternate; }
  .table-light { animation: table-sun 12s var(--ease-drift) infinite alternate; }
  .feature-break > img { animation: morning-pan 24s var(--ease-drift) infinite alternate-reverse; }
  @keyframes morning-pan { from { transform: scale(1); } to { transform: scale(1.075); } }
  @keyframes blossom-fall { 0% { opacity: 0; transform: translate3d(-40px,0,0) rotate(-30deg); } 12%,75% { opacity: .8; } 100% { opacity: 0; transform: translate3d(110px,105svh,0) rotate(330deg); } }
  @keyframes ribbon-flow { to { transform: translateX(-50%); } }
  @keyframes seal-turn { to { transform: rotate(360deg); } }
  @keyframes bloom-breathe { to { transform: rotate(30deg) scale(.8); } }
  @keyframes table-sun { from { transform: translateX(-24%) rotate(-5deg); opacity: .35; } to { transform: translateX(24%) rotate(5deg); opacity: 1; } }
}

/* Pause out-of-view loops; preserve their phase when returning. */
.motion-away *, .motion-away::before, .motion-away::after,
html.motion-paused *, html.motion-paused *::before, html.motion-paused *::after,
html.page-away * { animation-play-state: paused !important; }
html.keyboard-input { scroll-behavior: auto; }
html.keyboard-input .lightbox, html.keyboard-input .lightbox-panel,
html.keyboard-input .site-nav, html.keyboard-input .menu-toggle span,
html.keyboard-input a, html.keyboard-input button { transition: none !important; }
html.keyboard-input .gallery-item:focus-visible img { transform: none; }

@media (max-width: 980px) {
  .site-header { gap: 12px; }
  .motion-toggle { margin-left: auto; order: 1; }
  .menu-toggle { order: 2; }
  .site-nav { margin-left: 0; display: grid; visibility: hidden; opacity: 0; transform: translateY(-10px) scale(.98); transform-origin: top right; pointer-events: none; transition: transform 220ms var(--ease-out), opacity 180ms ease, visibility 180ms; }
  .site-nav.is-open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
}
@media (max-width: 699px) {
  .motion-label { display: none; }
  .motion-toggle { padding: 8px; }
  .brand-ribbon { padding: 20px 0; }
  .ribbon-track > span { gap: 24px; padding-right: 24px; }
  .cafe-seal { width: 116px; right: 12px; bottom: 12px; }
  .blossom-drift i:nth-child(n+5) { display: none; }
  .hero > img { transform-origin: 66% 46%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .blossom-drift, .table-light { display: none; }
  .menu-card:hover, .gallery-item:hover img, .menu-card:hover img { transform: none; }
  .ribbon-track { width: 100%; }
  .ribbon-track > span { white-space: normal; flex-wrap: wrap; justify-content: center; padding: 0 20px; font-size: 1.2rem; gap: 14px; }
  .ribbon-track > span + span { display: none; }
}