/* Motion answers the visitor; the welcome scene supplies the stop-motion action. */
.hero-visual { position: relative; overflow: hidden; border-radius: 100px 100px 8px 8px; isolation: isolate; }
.hero-visual > img { transform: scale(1.035); transform-origin: 50% 65%; }
.caption-note { display: inline-flex; gap: 9px; align-items: center; }
.hero-house figcaption { flex-wrap: wrap; gap: 12px 24px; }
.motion-toggle { color: var(--moss); background: transparent; border: 1px solid var(--line); border-radius: 30px; padding: 5px 13px; min-height: 36px; font-size: 12px; font-weight: 800; }
.forest-light { position: absolute; inset: 0; pointer-events: none; }
.forest-light { background: linear-gradient(115deg,transparent 10%,#ffedbf30 20%,transparent 34%,#fff4c726 45%,transparent 64%); mix-blend-mode: soft-light; opacity: .7; transform: translateX(-5%); }
.motion-enabled .forest-light { animation: forest-sun 13s ease-in-out infinite alternate; }
.motion-enabled .hero-copy > * { animation: house-arrival 850ms cubic-bezier(.2,.65,.2,1) both; }
.motion-enabled .hero-copy p { animation-delay: 90ms; }
.motion-enabled .hero-copy .button { animation-delay: 180ms; }
.button, .room-tabs button { transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease; }
.button:hover { transform: translateY(-3px); box-shadow: 0 6px 15px #4653381f; }
.button:active { transform: translateY(0); }
.kitten summary img, .story > img { transition: transform 400ms cubic-bezier(.2,.65,.2,1), box-shadow 400ms ease; }
.kitten summary:hover img, .kitten summary:focus-visible img { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 9px 18px #46533815; }
.kitten:nth-child(even) summary:hover img { transform: translateY(-3px) rotate(1deg); }
.kitten-more { transition: transform 250ms ease, background-color 250ms ease; }
.story:hover > img { transform: translateY(-4px); box-shadow: 0 9px 25px #3b352a15; }
.header nav a { transition: color 160ms ease; }
.motion-paused .hero-copy > * { animation: none !important; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
@keyframes forest-sun { to { transform: translateX(8%); opacity: .35; } }
@keyframes house-arrival { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 700px) { .hero-visual { border-radius: 65px 65px 5px 5px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .forest-light, .motion-toggle { display: none !important; }
  .hero-visual > img { transform: none !important; }
}