/* The lighter version's motion: no graphics contexts, only opacity and transforms, so it is safe on any phone.
   Scroll-linked parts need scroll timelines; browsers without them keep the reveals, and the page still reads. */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; translate: 0 28px; transition: opacity 0.8s var(--ease), translate 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
  .rv.in { opacity: 1; translate: none; }

  /* The name lands. Uses `translate`, so each letter keeps its resting angle. */
  .tier-still .pile .pile-l { opacity: 0; }
  .tier-still .pile.in .pile-l {
    opacity: 1;
    animation: pile-fall 0.95s cubic-bezier(0.3, 0, 0.2, 1) both;
    animation-delay: calc(var(--i, 0) * 90ms);
  }
  @keyframes pile-fall {
    0% { translate: 0 -130%; opacity: 0; }
    12% { opacity: 1; }
    72% { translate: 0 0; }
    84% { translate: 0 -7%; }
    100% { translate: 0 0; }
  }

  @supports (animation-timeline: view()) {
    @keyframes drift { from { scale: 1.16; translate: 0 -5%; } to { scale: 1.02; translate: 0 5%; } }
    @keyframes arrive { from { scale: 0.86; opacity: 0.35; } to { scale: 1; opacity: 1; } }
    @keyframes lift { from { translate: 0 9%; } to { translate: 0 -9%; } }
    @keyframes light-up { from { opacity: 0.32; scale: 0.9; } 50% { opacity: 1; scale: 1; } to { opacity: 0.32; scale: 0.9; } }

    /* A box with overflow hidden counts as a scroller, and a timeline inside one never moves. Clip cuts the same without that. */
    .tier-still .hero-pin, .tier-still .door, .tier-still .room { overflow: clip; }
    /* The same goes for a picture in its own clipped box, so the box carries the timeline. */
    .tier-still .still, .tier-still .door-frames, .tier-still .step-screen { view-timeline: --shot block; }
    .tier-still .still img, .tier-still .step-screen img { animation: drift linear both; animation-timeline: --shot; }
    .tier-still .door-frames img { animation: lift linear both; animation-timeline: --shot; }
    .tier-still .door-frames img:nth-child(even) { animation-direction: reverse; }
    /* Rooms stay stuck while the next slides over, which stretches a whole-view timeline across the deck. So it runs on entry only. */
    .tier-still .room-screen { animation: arrive linear both; animation-timeline: view(); animation-range: entry; }
    .tier-still .nv-phone { animation: lift linear both; animation-timeline: view(); }

    /* Sideways carousels, phones only: each card lights up as it reaches the middle. */
    @media (max-width: 760px) {
      .tier-still .feature, .tier-still .ex { animation: light-up linear both; animation-timeline: view(inline); }
    }
  }
}