/* Motion follows native scrolling; all content remains readable without JavaScript. */
.reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
.motion-pending { opacity: 0; }
.reveal.motion-pending { opacity: 0; }
.reading-progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 80; pointer-events: none; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg,#6d00e4,#a453fa 65%,#2ae9fd); }
main .section-kicker::before { content: ''; display: inline-block; width: 24px; height: 2px; margin: 0 10px 3px 0; background: currentColor; transform-origin: left; }
.motion-visible .section-kicker::before { animation: frequency-line .75s cubic-bezier(.16,1,.3,1) both; }
@keyframes frequency-line { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
.media-frame, .product-card__media { overflow: hidden; }
.editorial-card, .product-card, .faq-item { transition: border-color .25s ease, background-color .25s ease; }
@media (hover: hover) and (pointer: fine) {
  .editorial-card:hover, .product-card:hover { border-color: rgba(164,83,250,.58); }
  .text-link, .footer-links a, .desktop-nav a { text-underline-offset: 5px; }
  .footer-links a:hover { text-decoration: underline; text-decoration-color: var(--amethyst); }
}
@media (prefers-reduced-motion: reduce) {
  .motion-pending, .reveal.motion-pending { opacity: 1; }
  .motion-visible .section-kicker::before { animation: none; }
  .reading-progress { display: none; }
  html { scroll-behavior: auto; }
}
/* Allow long store-information headings to wrap on compact phones. */
.info-card { min-width: 0; overflow-wrap: anywhere; }
/* Scroll-linked transforms are compositor-driven where supported. */
@supports (animation-timeline: scroll()) {
  .reading-progress { animation: reading-fill linear both; animation-timeline: scroll(root); }
  @keyframes reading-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
@supports (animation-timeline: view()) {
  @media (min-width: 981px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .motion-parallax { animation: image-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes image-drift { from { transform: translate3d(0,6px,0) scale(1.03); } to { transform: translate3d(0,-6px,0) scale(1.03); } }
  }
}
.site-header.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(5,5,10,.96); }
@media (prefers-reduced-motion: reduce) { .motion-parallax, .reading-progress { animation: none !important; transform: none; } }
/* Original full-width artwork fades into view without cropping or zooming. */
.artwork-section { background-image: none; }
.artwork-section::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--section-art); background-position: center top;
  background-size: 100% auto; background-repeat: no-repeat;
}
.section-kicker.motion-visible::before { animation: frequency-line .75s cubic-bezier(.16,1,.3,1) both; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .artwork-section { view-timeline-name: --artwork-entry; view-timeline-axis: block; }
    .artwork-section::before {
      animation: artwork-arrive linear both; animation-timeline: --artwork-entry;
      animation-range: entry 0% entry 70%;
    }
    @keyframes artwork-arrive { from { opacity: .35; } to { opacity: 1; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  .artwork-section::before, .section-kicker.motion-visible::before { animation: none; }
}

/* Keep the piano's original detail visible throughout scrolling. */
.hero.artwork-home::before {
  animation: none;
  opacity: 1;
  filter: brightness(1.12) contrast(1.02) saturate(1.03);
}
@media (max-width: 980px) {
  .hero.artwork-home {
    padding-top: calc(100vw * 941 / 1672 + 16px);
  }
}