/* Chuyển cảnh 3D. Mọi hiệu ứng nằm trong prefers-reduced-motion: no-preference. */

@media (prefers-reduced-motion: no-preference) {
  /* Chuyển trang kiểu cảnh 3D (trình duyệt hỗ trợ View Transitions nhiều trang). */
  @view-transition { navigation: auto; }

  ::view-transition-group(root) { animation-duration: 520ms; }
  ::view-transition-old(root) { animation: mita-scene-out 420ms cubic-bezier(0.4, 0, 0.7, 0.2) both; }
  ::view-transition-new(root) { animation: mita-scene-in 520ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  ::view-transition-group(*) { animation-duration: 560ms; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }

  @keyframes mita-scene-out {
    to { opacity: 0; transform: perspective(1400px) translateZ(-160px) rotateY(-10deg); filter: blur(4px); }
  }
  @keyframes mita-scene-in {
    from { opacity: 0; transform: perspective(1400px) translateZ(140px) rotateY(9deg); filter: blur(4px); }
  }

  /* Khối cảnh chính có chiều sâu */
  .genre-showcase-grid { perspective: 1300px; }
  .product-grid { perspective: 1400px; }
  .hero { perspective: 1400px; }

  /* Hero: các lớp trôi theo con trỏ với độ sâu khác nhau */
  .hero[data-parallax="on"] .hero-copy {
    translate: calc(var(--mx, 0) * 14px) calc(var(--my, 0) * 8px);
    transition: translate 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .hero[data-parallax="on"] .hero-visual {
    rotate: 0 1 0 calc(var(--mx, 0) * 5deg);
    transition: rotate 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .hero[data-parallax="on"] .stage-lights {
    translate: calc(var(--mx, 0) * -26px) calc(var(--my, 0) * -14px);
    transition: translate 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  /* Cuộn trang: hero lùi sâu dần (nếu trình duyệt hỗ trợ scroll-driven animations) */
  @supports (animation-timeline: view()) {
    .hero-visual {
      animation: mita-hero-recede linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 90%;
    }
    @keyframes mita-hero-recede {
      to { translate: 0 -34px; scale: 0.94; opacity: 0.35; }
    }
    .genre-showcase-heading {
      animation: mita-heading-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    @keyframes mita-heading-rise {
      from { opacity: 0; translate: 0 36px; }
    }
  }

  /* Vào cảnh khi cuộn: chỉ ẩn khi JS đã chạy (không có JS thì nội dung luôn hiện) */
  .js-motion .genre-tile:not(.is-in),
  .js-motion .product-card.reveal-item:not(.is-in) {
    opacity: 0;
    translate: 0 46px -140px;
    rotate: 1 0 0 16deg;
  }
  .js-motion .genre-tile,
  .js-motion .product-card.reveal-item {
    transition:
      opacity 640ms cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i, 0) * 70ms),
      translate 760ms cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i, 0) * 70ms),
      rotate 760ms cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i, 0) * 70ms),
      border-color 220ms ease, box-shadow 220ms ease, transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .js-motion .section-heading:not(.is-in),
  .js-motion .featured-mix:not(.is-in),
  .js-motion .genre-hero-copy:not(.is-in),
  .js-motion .detail-layout:not(.is-in),
  .js-motion .tiktok-mix:not(.is-in) {
    opacity: 0;
    translate: 0 30px;
  }
  .js-motion .section-heading,
  .js-motion .featured-mix,
  .js-motion .genre-hero-copy,
  .js-motion .detail-layout,
  .js-motion .tiktok-mix {
    transition: opacity 600ms ease, translate 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  /* Nghiêng 3D theo con trỏ (JS đặt --tilt-x / --tilt-y) */
  @media (hover: hover) and (pointer: fine) {
    .genre-tile:hover,
    .genre-tile:focus-visible {
      transform: translateY(-6px) rotateX(calc(var(--tilt-x, 2) * 1deg)) rotateY(calc(var(--tilt-y, -1.5) * 1deg));
    }
    .product-card:hover {
      transform: translateY(-3px) rotateX(calc(var(--tilt-x, 0) * 0.6deg)) rotateY(calc(var(--tilt-y, 0) * 0.6deg));
    }
  }

  /* Trang thể loại: bìa lớn xoay vào từ chiều sâu */
  .genre-hero-art {
    animation: mita-art-in 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
    transform-style: preserve-3d;
  }
  @keyframes mita-art-in {
    from { opacity: 0; transform: perspective(1200px) rotateY(-24deg) translateZ(-120px); }
  }

  /* Thẻ đang phát nổi lên */
  .product-card.is-playing {
    box-shadow: 0 0 0 1px var(--category-accent), 0 18px 44px color-mix(in srgb, var(--category-accent) 28%, transparent);
  }
}

/* Điện thoại: nhẹ hơn, bỏ xoay sâu */
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .js-motion .genre-tile:not(.is-in),
  .js-motion .product-card.reveal-item:not(.is-in) {
    translate: 0 26px;
    rotate: none;
  }
  .hero-visual { animation: none; }
  .hero { perspective: none; }
}

/* Giảm chuyển động: không hiệu ứng, nội dung luôn hiện */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .genre-tile,
  .product-card,
  .reveal-item { opacity: 1 !important; translate: none !important; rotate: none !important; }
}