/* Home-only motion. Native scrolling, visible resting content, no runtime dependency. */
:root {
  --home-entry-duration: 700ms;
  --home-entry-ease: cubic-bezier(.22, 1, .36, 1);
  --home-entry-distance: 28px;
  --home-entry-stagger: 70ms;
}

.home-motion-enter {
  animation: homeEditorialEntry var(--home-entry-duration) var(--home-entry-ease) both;
  animation-delay: var(--home-entry-delay, 0ms);
}
@keyframes homeEditorialEntry {
  from { opacity: .15; transform: translateY(var(--home-entry-distance)); }
  to { opacity: 1; transform: translateY(0); }
}

/* Newly selected assets reveal image and copy as a coordinated sequence.
   Keyboard selection stays immediate; hidden panels retain native semantics. */
.js [data-rotate-assets]:not([data-selection-input="keyboard"]) .panel:not([hidden]) .assets__photo img {
  animation: homeAssetImage 850ms var(--home-entry-ease) both;
}
.js [data-rotate-assets]:not([data-selection-input="keyboard"]) .panel:not([hidden]) .assets__copy > * {
  animation: homeAssetCopy 600ms var(--home-entry-ease) both;
}
.js [data-rotate-assets] .assets__copy > :nth-child(2) { animation-delay: 50ms; }
.js [data-rotate-assets] .assets__copy > :nth-child(3) { animation-delay: 100ms; }
.js [data-rotate-assets] .assets__copy > :nth-child(4) { animation-delay: 150ms; }
@keyframes homeAssetImage {
  from { opacity: .2; transform: translateX(16px) scale(1.06); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes homeAssetCopy {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Browser-native view timelines make photography follow the scroll gently.
   Unsupported browsers keep the existing still image. Touch layouts stay still. */
@supports (animation-timeline: view()) {
  @media (min-width: 921px) and (prefers-reduced-motion: no-preference) {
    .js .home-process__background img {
      animation: homePhotoDrift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes homePhotoDrift {
      from { transform: translateY(-3%) scale(1.08); }
      to { transform: translateY(3%) scale(1.08); }
    }
  }
}
@media (hover: hover) and (pointer: fine) {
  .home-card-photo img { transition: transform 650ms var(--home-entry-ease); }
  .card:hover .home-card-photo img { transform: scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
  .home-motion-enter,
  .js [data-rotate-assets] .panel:not([hidden]) .assets__photo img,
  .js [data-rotate-assets] .panel:not([hidden]) .assets__copy > * { animation: none; }
  .home-card-photo img { transition: none; }
  .card:hover .home-card-photo img { transform: none; }
}