/* Shared interaction fixes. Load after page styles; never transform the header or hero. */
.motion-toggle,
.collection-more,
.collection-retry {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}
.motion-toggle { color: #e7eddf; white-space: nowrap; }
.motion-toggle:disabled { cursor: default; }
.motion-toggle[aria-pressed="false"] { border-style: dashed; }
.collection-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
.collection-status { flex-basis: 100%; color: inherit; font-size: 14px; line-height: 1.8; }
.collection-more:disabled, .collection-retry:disabled { opacity: .6; cursor: wait; }
.collection-controls [hidden] { display: none; }
.work .thumb { position: relative; }
.work .work-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.work .has-work-image .glyph, .work .has-work-image .work-medium { visibility: hidden; }
.work-detail-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.work-detail-more { display: inline-flex; gap: 12px; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; }
.news-item > a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.footer-bottom { flex-wrap: wrap; gap: 16px 24px; }

/* Pause old artwork offscreen, matching the lifecycle of seed-field and story-art. */
.js .motion-scene :is(.bg-tree, .reel-beam, .tree-sway, .tree-canopy, .flutter, .pappus svg, .why-orbit, .v-c, .solid-circle, .dot-circle, .r-seed-drawing, .r-seed-orbit),
.js .motion-scene.hero::before,
.js .motion-scene .reel-beam::after,
.js .motion-scene .track { animation-play-state: paused !important; }
.js .motion-scene.is-motion-visible :is(.bg-tree, .reel-beam, .tree-sway, .tree-canopy, .flutter, .pappus svg, .why-orbit, .v-c, .solid-circle, .dot-circle, .r-seed-drawing, .r-seed-orbit),
.js .motion-scene.is-motion-visible.hero::before,
.js .motion-scene.is-motion-visible .reel-beam::after,
.js .motion-scene.is-motion-visible .track { animation-play-state: running !important; }

.js.motion-paused .motion-scene.is-motion-visible *,
.motion-paused :is(.story-art, .seed-field) *,
.js.motion-paused .motion-scene.hero::before,
.js.nav-open .motion-scene.hero::before,
.js.intro-active .motion-scene.hero::before,
.js.intro-revealing .motion-scene.hero::before,
.js.motion-paused .motion-scene .reel-beam::after,
.js.nav-open .motion-scene :is(.bg-tree, .reel-beam, .tree-sway, .tree-canopy, .flutter, .pappus svg, .track, .why-orbit, .v-c, .solid-circle, .dot-circle, .r-seed-drawing, .r-seed-orbit),
.js.nav-open .motion-scene .reel-beam::after,
.js.intro-active .motion-scene :is(.bg-tree, .reel-beam, .tree-sway, .tree-canopy, .flutter, .pappus svg, .track, .why-orbit, .v-c, .solid-circle, .dot-circle, .r-seed-drawing, .r-seed-orbit),
.js.intro-revealing .motion-scene :is(.bg-tree, .reel-beam, .tree-sway, .tree-canopy, .flutter, .pappus svg, .track, .why-orbit, .v-c, .solid-circle, .dot-circle, .r-seed-drawing, .r-seed-orbit),
.js.intro-active .motion-scene .reel-beam::after,
.js.intro-revealing .motion-scene .reel-beam::after { animation-play-state: paused !important; }

.motion-reduced :is(.bg-tree, .reel-beam, .tree-sway, .tree-canopy, .flutter, .pappus, .pappus svg, .track, .why-orbit, .v-c, .solid-circle, .dot-circle, .r-seed-drawing, .r-seed-orbit, .drifting-seed, .cinema-light, .story-art__motion),
.motion-reduced .hero::before,
.motion-reduced .reel-beam::after,
.motion-reduced .nav.is-open :is(li, .nav-foot),
.motion-reduced .page-hero > .wrap,
.motion-reduced .hero-inner,
.motion-reduced .header { animation: none !important; }
.motion-reduced [data-reveal], .motion-reduced .nav-toggle span { transition: none !important; }
.motion-reduced [data-reveal] { opacity: 1 !important; transform: none !important; }
.motion-reduced:not(.intro-active):not(.intro-revealing) .hero-tree { transform: none !important; transition: none !important; }
.motion-reduced { scroll-behavior: auto; }
.motion-reduced .branch-transition { display: none !important; }
.motion-reduced::view-transition-group(*), .motion-reduced::view-transition-old(*), .motion-reduced::view-transition-new(*) { animation: none !important; }

/* The CSS preference also works before scripts start or when JS is unavailable. */
@media (prefers-reduced-motion: reduce) {
  .bg-tree, .hero::before, .nav.is-open li, .nav.is-open .nav-foot, .intro-done .hero-inner, .intro-done .header { animation: none !important; }
  .hero-tree { transition: none !important; }
  [data-reveal], .nav-toggle span { transition: none !important; }
}