/* Decorative motion is isolated from the accepted section geometry. */
:root { --motion-out: cubic-bezier(.23,1,.32,1); }
.hero-media img { animation: rest-pan 18s ease-in-out infinite alternate; }
.tea-break > img { animation: rest-pan 22s ease-in-out infinite alternate-reverse; }
@keyframes rest-pan { from { transform: scale(1.025) translateX(-.6%); } to { transform: scale(1.12) translateX(.6%); } }
.rest-seal { position:absolute; z-index:2; right:max(6%,calc((100vw - 1180px)/2)); top:20%; width:154px; aspect-ratio:1; display:grid; place-items:center; pointer-events:none; color:var(--navy); }
.rest-seal svg { position:absolute; inset:0; width:100%; height:100%; animation:rest-turn 32s linear infinite; }
.rest-seal span { position:relative; text-align:center; font-size:15px; font-weight:850; line-height:1.25; letter-spacing:.06em; }
@keyframes rest-turn { to { transform:rotate(360deg); } }
.story-image { position:relative; }
.rest-steam { position:absolute; bottom:20px; left:20px; width:106px; height:106px; border-radius:50%; background:var(--pink); color:var(--navy); display:flex; align-items:center; justify-content:center; gap:9px; pointer-events:none; }
.rest-steam i { width:8px; height:39px; border-left:2px solid currentColor; border-radius:50%; animation:rest-steam 3s cubic-bezier(.37,0,.63,1) infinite; }
.rest-steam i:nth-child(2) { animation-delay:-1s; }
.rest-steam i:nth-child(3) { animation-delay:-2s; }
.rest-steam::after { content:'TAKE IT SLOW'; position:absolute; bottom:14px; font-size:8px; font-weight:800; letter-spacing:.1em; }
@keyframes rest-steam { 0% { transform:translateY(7px) rotate(-9deg); opacity:0; } 35% { opacity:1; } 100% { transform:translateY(-15px) rotate(14deg); opacity:0; } }
.tea-ribbon { position:absolute; bottom:0; left:0; width:100%; overflow:hidden; background:var(--sky); color:var(--navy); pointer-events:none; padding:13px 0; }
.tea-ribbon-track { display:flex; width:max-content; animation:rest-flow 28s linear infinite; }
.tea-ribbon-track span { flex:none; padding-right:40px; font-size:clamp(16px,2vw,25px); font-weight:800; letter-spacing:.06em; white-space:nowrap; }
@keyframes rest-flow { to { transform:translateX(-50%); } }
.button, .menu-tabs button, .lightbox button { transition:transform 160ms var(--motion-out), background-color 180ms ease, color 180ms ease; }
.button:active, .menu-tabs button:active, .lightbox button:active { transform:scale(.97); }
.gallery-item:active img { transform:scale(1.015); }
.lightbox[open] .lightbox-panel { animation:rest-dialog 240ms var(--motion-out) both; }
@keyframes rest-dialog { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:none; } }
/* Pause only looping decorations, never freeze headings or dialog entry mid-fade. */
:is(.motion-paused, .motion-away, .motion-offscreen) :is(.hero-media img, .tea-break > img, .rest-seal svg, .rest-steam i, .tea-ribbon-track) { animation-play-state:paused !important; }
.keyboard-input { scroll-behavior:auto; }
.keyboard-input *, .keyboard-input *::before, .keyboard-input *::after { transition-duration:0s !important; }
.keyboard-input .menu-panel, .keyboard-input .lightbox-panel { animation:none !important; }
@media (hover:hover) and (pointer:fine) {
  .signature figure img, .gallery-item img { transition:transform 500ms var(--motion-out); }
  .signature:hover figure img { transform:scale(1.055); }
  .gallery-item:hover img { transform:scale(1.06); }
}
@media (hover:none) {
  .button:hover, .arrow-link:hover span, .signature:hover figure img, .gallery-item:hover img { transform:none; }
}
@media (max-width:980px) {
  .nav-menu { max-height:none; visibility:hidden; opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity 180ms var(--motion-out), transform 220ms var(--motion-out), visibility 220ms; }
  .nav-menu.is-open { max-height:none; visibility:visible; opacity:1; transform:none; pointer-events:auto; }
}
@media (max-width:680px) {
  .rest-seal { width:92px; top:92px; right:20px; }
  .rest-seal span { font-size:10px; }
  .rest-steam { width:84px; height:84px; left:14px; bottom:14px; }
  .rest-steam::after { font-size:7px; bottom:10px; }
  .tea-ribbon { padding-block:10px; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-media img, .tea-break > img, .rest-seal svg, .rest-steam i, .tea-ribbon-track { animation:none !important; transform:none; }
  .rest-steam i { opacity:.75; }
  .button:active, .gallery-item:active img { transform:none; }
}
