/* One shared tempo slows decorative motion while preserving each phase. */
.experience { --motion-tempo:2; }
.site-header, .sound-invite { background:#080807f5; backdrop-filter:none; }
.hero.album-hero { perspective:none; contain:layout; }
[data-parallax] { transition:translate .3s ease-out; }
.release-cover { transition:opacity .3s; }

/* Native scroll timelines move only two scene planes and the progress bar. */
@supports (animation-timeline:scroll(root block)) and (animation-range:0px 1px) {
  [data-parallax] { animation:sceneParallax 1s linear both; animation-timeline:scroll(root block); animation-range:0px var(--hero-travel); }
  [data-parallax="back"] { --parallax-end:-65px; }
  [data-parallax="front"] { --parallax-end:-110px; }
  @keyframes sceneParallax { from { transform:translateY(0); } to { transform:translateY(var(--parallax-end)); } }
  .reading-progress i { animation:readingProgress 1s linear both; animation-timeline:scroll(root block); }
  @keyframes readingProgress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
}

/* Pause using stable sections/cards; never hide a rotating element. */
[data-effect-active="false"], [data-effect-active="false"] *, [data-effect-active="false"]::before, [data-effect-active="false"]::after, [data-effect-active="false"] *::before, [data-effect-active="false"] *::after, .experience[data-tab-hidden="true"] *, .experience[data-tab-hidden="true"] *::before, .experience[data-tab-hidden="true"] *::after { animation-play-state:paused!important; }