/* Ordinary scrolling reveals the depth between glass, light and website.
   The content remains flat; mobile, keyboard and preference fallbacks are static. */
@keyframes project-depth {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(0,-16px,0); }
}
@keyframes liquid-sculpture-depth {
  from { transform: translate3d(0,0,0) rotate(-8deg) scale(.98); }
  to { transform: translate3d(0,-34px,0) rotate(6deg) scale(1.02); }
}
@keyframes liquid-echo-depth {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(0,18px,0); }
}
@keyframes studio-page-progress { to { transform: scaleX(1); } }

.story .liquid-highlight { opacity: 0; pointer-events: none; transform: translate3d(0,0,0); }

@media (prefers-reduced-motion: no-preference) {
  :root.js[data-motion="full"] .story :is(.primary-link span,.contact-link span,.chip::after,.ownership-files summary b,.research-notes > summary > span,.process-details > summary > span) {
    transition: transform 160ms cubic-bezier(.23,1,.32,1);
  }
  @media (hover: hover) and (pointer: fine) {
    :root.js[data-motion="full"] .story :is(.primary-link,.contact-link):hover span { transform: translate(2px,-2px); }
    :root.js[data-motion="full"] .story .liquid-highlight { transition: transform 160ms cubic-bezier(.23,1,.32,1), opacity 160ms cubic-bezier(.23,1,.32,1); }
  }
  @supports (animation-timeline: scroll()) {
    :root.js[data-motion="full"] .story .page-progress span { animation: studio-page-progress linear both; animation-timeline: scroll(root); }
  }
  @supports (animation-timeline: view()) {
    @media (hover: hover) and (pointer: fine) and (min-width: 901px) {
      :root.js[data-motion="full"] .story .intro-scene[data-depth-scene] {
        view-timeline-name: --hero-depth;
        view-timeline-axis: block;
      }
      :root.js[data-motion="full"] .story .intro-scene :is(.depth-frame,.liquid-sculpture,.feature-echo) {
        animation-duration: 1ms;
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-timeline: --hero-depth;
        animation-range: exit 0% exit 70%;
      }
      :root.js[data-motion="full"] .story .depth-frame { animation-name: project-depth; }
      :root.js[data-motion="full"] .story .liquid-sculpture { animation-name: liquid-sculpture-depth; }
      :root.js[data-motion="full"] .story .feature-echo { animation-name: liquid-echo-depth; }
      /* Focused website links and keyboard navigation have stationary targets. */
      :root.js[data-motion="full"] .story .depth-frame:focus-visible { animation: none; transform: none; }
    }
  }
}

.story[data-keyboard] *, .story[data-keyboard] *::before, .story[data-keyboard] *::after { transition: none !important; }
.story[data-keyboard] .intro-scene :is(.depth-frame,.liquid-sculpture,.feature-echo) { animation: none !important; }
.story[data-keyboard] .intro-scene .depth-frame { transform: none !important; }
.story[data-keyboard] .liquid-highlight { opacity: 0 !important; transform: none !important; }
:root[data-motion="reduced"] { scroll-behavior: auto; }
:root[data-motion="reduced"] .story *, :root[data-motion="reduced"] .story *::before, :root[data-motion="reduced"] .story *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
:root[data-motion="reduced"] .story .liquid-highlight { opacity: 0 !important; transform: none !important; }
:root:not(.js) .story .feature-selector { display: none; }
@media (prefers-reduced-motion: reduce) {
  .story-root { scroll-behavior: auto; }
  .story *, .story *::before, .story *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .story .liquid-highlight { opacity: 0 !important; transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .story .intro-scene :is(.depth-frame,.liquid-sculpture,.feature-echo) { animation: none !important; }
  .story .liquid-highlight { opacity: 0 !important; transform: none !important; transition: none !important; }
}
@media (hover: none), (pointer: coarse), (max-width: 900px) {
  .story .liquid-highlight { opacity: 0 !important; transform: none !important; transition: none !important; }
}