/* Motion enhances browsing without hiding content or delaying navigation. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .hero-copy > * { animation: cinema-rise 950ms cubic-bezier(.16,1,.3,1) both; }
  .hero-copy > :nth-child(2) { animation-delay: 100ms; }
  .hero-copy > :nth-child(3) { animation-delay: 200ms; }
  .hero-copy > :nth-child(4) { animation-delay: 300ms; }
  .hero-image img { animation: cinema-frame 1800ms cubic-bezier(.16,1,.3,1) both; }
  .hero-image::after { animation: cinema-light 1600ms ease-out both; }
  .gallery-track { scroll-behavior: smooth; }
  .card, .collection-card, .modern-card, .category-clean a {
    transition: transform 450ms cubic-bezier(.16,1,.3,1), box-shadow 450ms ease, border-color 250ms ease;
  }
  .card .media { overflow: hidden; }
  .card .media img { transition: transform 850ms cubic-bezier(.16,1,.3,1); }
  .btn, .icon-btn, .gallery-thumb, .variant-card {
    transition: transform 240ms ease, background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
  }
  .btn:active, .icon-btn:active { transform: scale(.97); }
  .variant-card:has(input:checked) { animation: cinema-select 320ms ease-out; }
  @media (hover: hover) and (pointer: fine) {
    .card:hover, .collection-card:hover, .modern-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -24px rgba(81,39,48,.4); }
    .card:hover .media img { transform: scale(1.045); }
    .btn:hover { transform: translateY(-2px); }
    .gallery-thumb:hover { transform: translateY(-3px); }
  }
}
@keyframes cinema-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes cinema-frame { from { opacity: .4; transform: scale(1.065); } to { opacity: 1; transform: scale(1); } }
@keyframes cinema-light { from { opacity: 0; } to { opacity: 1; } }
@keyframes cinema-select { 50% { transform: scale(1.025); } }
@media (prefers-reduced-motion: reduce) {
  html, .gallery-track { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* A continuous visual journey, with native navigation as the fallback. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: cinema-depart 260ms ease-in both; }
  ::view-transition-new(root) { animation: cinema-arrive 620ms cubic-bezier(.16,1,.3,1) both; }
  .hero-copy > * { animation-duration: 1300ms; }
  .hero-copy > :nth-child(2) { animation-delay: 180ms; }
  .hero-copy > :nth-child(3) { animation-delay: 340ms; }
  .hero-copy > :nth-child(4) { animation-delay: 480ms; }
  .hero-image { clip-path: inset(0); }
  .hero-image img {
    animation: cinema-pan 4500ms cubic-bezier(.16,1,.3,1) both;
    translate: 0 var(--cinema-depth, 0px);
  }
  .hero-image::after {
    background: linear-gradient(105deg, rgba(255,249,247,.62), transparent 45%);
    animation: cinema-light 1800ms ease-out both;
  }
  .hero .title { animation-name: cinema-title; }
  .btn.primary { position: relative; overflow: hidden; isolation: isolate; }
  .btn.primary::after {
    content: ''; pointer-events: none; position: absolute; inset: -50% -80%;
    background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.24) 50%, transparent 60%);
    transform: translateX(-65%); transition: transform 750ms cubic-bezier(.2,.7,.2,1);
  }
  .btn.primary:hover::after, .btn.primary:focus-visible::after { transform: translateX(65%); }
  .card .media img { transition-duration: 1100ms; }
  .gallery-slide img { transition: transform 850ms cubic-bezier(.16,1,.3,1); }
  @media (hover: hover) and (pointer: fine) {
    .card:hover .media img { transform: scale(1.075); }
    .card:hover { transform: translateY(-8px); }
  }
}
@keyframes cinema-title {
  from { opacity: 0; transform: translateY(36px); clip-path: inset(0 0 100% 0); }
  to { opacity: 1; transform: none; clip-path: inset(0); }
}
@keyframes cinema-pan {
  from { opacity: .35; transform: scale(1.13) translateX(1%); }
  to { opacity: 1; transform: scale(1.035) translateX(0); }
}
@keyframes cinema-depart { to { opacity: 0; transform: scale(.99); } }
@keyframes cinema-arrive { from { opacity: 0; transform: translateY(16px) scale(1.015); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .hero-image img { translate: none; }
}