/* Future Home: Motion placement and responsive background framing. */
@media (max-width: 900px) {
  .score-shell[data-page="home"] .intro-motion .intro-filmstrip {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    translate: none !important;
    transform: none !important;
  }
}

@media (min-width: 901px) {
  .score-shell[data-page="home"] .intro-nico .intro-bg-hero-exact img {
    transform: translate3d(clamp(-3px, var(--depth-bg-x, 0px), 3px), calc(clamp(-2px, var(--depth-bg-y, 0px), 2px) - 8px), 0) scale(.96) !important;
    transform-origin: 50% 50% !important;
  }
  .score-shell[data-page="home"] .intro-scene:not(.intro-nico) .intro-bg img,
  .score-shell[data-page="home"] .intro-nico .nh-hero-concept-scene img {
    transform: translate3d(clamp(-6px, var(--depth-bg-x, 0px), 6px), clamp(-4px, var(--depth-bg-y, 0px), 4px), 0) scale(1.012) !important;
  }
  .score-shell[data-page="home"] .intro-motion .intro-filmstrip {
    width: 56vw !important;
    height: clamp(96px, 12.8vh, 150px) !important;
    right: 6vw !important;
    top: 43.5vh !important;
    transform: rotate(-4deg) translate3d(var(--film-x, 0px), var(--depth-fg-y, 0px), 0) !important;
  }
}

@media (min-width: 1800px) and (min-aspect-ratio: 2/1) {
  .score-shell[data-page="home"] .intro-motion .intro-filmstrip {
    width: min(59vw, 1536px) !important;
    height: clamp(120px, 14vh, 205px) !important;
    top: 43.5vh !important;
    transform: rotate(-5deg) translate3d(var(--film-x, 0px), var(--depth-fg-y, 0px), 0) !important;
  }
}

@media (min-width: 1800px) and (min-aspect-ratio: 2/1) {
  .score-shell[data-page="home"] .intro-scene:not(.intro-nico) .intro-bg img {
    object-fit: contain;
    object-position: 50% 50%;
    -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) center / calc(100vh * 1.7763158) 100% no-repeat;
    mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) center / calc(100vh * 1.7763158) 100% no-repeat;
  }
}

@media (prefers-reduced-motion: reduce) {
  .score-shell[data-page="home"] .intro-motion .intro-filmstrip {
    translate: none !important;
    transform: none !important;
  }
}

@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  .score-shell[data-page="home"] .intro-nico .intro-bg-hero-exact img {
    transform: translateY(-8px) scale(.96) !important;
  }
  .score-shell[data-page="home"] .intro-scene:not(.intro-nico) .intro-bg img,
  .score-shell[data-page="home"] .intro-nico .nh-hero-concept-scene img {
    transform: none !important;
  }
}

/* Reveal on entry without moving the mobile filmstrip or its edges. */
@supports (view-timeline-name: --nh-motion-entry) {
  @media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
    .score-shell[data-page="home"] .intro-motion {
      view-timeline-name: --nh-motion-entry;
      view-timeline-axis: block;
    }
    .score-shell[data-page="home"] .intro-motion .intro-filmstrip {
      opacity: 0;
      animation: nh-motion-strip-entry 1s ease-out both;
      animation-timeline: --nh-motion-entry;
      animation-range: entry 51% entry 71%;
    }
  }
}
@keyframes nh-motion-strip-entry {
  from { opacity: 0; }
  to { opacity: .68; }
}