/* Content is visible by default. JS plays temporary entrances; no hidden-ready state. */
@layer motion {
 .motion-line { display:block; overflow:clip; overflow-clip-margin:.14em; }
 .motion-line-content { display:block; }
 .about h2 .motion-line,.about h2 .motion-line-content { font:inherit; color:inherit; letter-spacing:inherit; }

 /* Native scroll timelines run only on decorative layers, never on controls/text.
    Unsupported browsers retain the original static composition. */
 @supports (animation-timeline:view()) {
  @media(prefers-reduced-motion:no-preference) {
   .motion-unit:not(:focus-within) { animation:unit-edge-fade linear both; animation-timeline:view(); animation-range:cover 0% cover 100%; }
  }
  @media(min-width:901px) and (prefers-reduced-motion:no-preference) {
   #home { view-timeline-name:--hero-depth; }
   #about { view-timeline-name:--about-depth; }
   #contact { view-timeline-name:--contact-depth; }
   #home .liquid-stage { animation:hero-scroll-depth linear both; animation-timeline:--hero-depth; animation-range:exit 0% exit 100%; }
   #about::before { animation:about-scroll-depth linear both; animation-timeline:--about-depth; animation-range:entry 0% exit 100%; }
   #contact::before { animation:contact-blue-depth linear both; animation-timeline:--contact-depth; animation-range:entry 0% exit 100%; }
   #contact::after { animation:contact-gold-depth linear both; animation-timeline:--contact-depth; animation-range:entry 0% exit 100%; }
  }
 }
 @keyframes unit-edge-fade { 0%,100% { opacity:0; } 9%,91% { opacity:1; } }
 @keyframes hero-scroll-depth { from { transform:translate3d(0,0,0); } to { transform:translate3d(0,54px,0); } }
 @keyframes about-scroll-depth { from { transform:translate3d(0,-18px,0); } to { transform:translate3d(0,18px,0); } }
 @keyframes contact-blue-depth { from { transform:translate3d(0,-26px,0) rotate(-24deg); } to { transform:translate3d(0,26px,0) rotate(-24deg); } }
 @keyframes contact-gold-depth { from { transform:translate3d(0,14px,0) rotate(-24deg); } to { transform:translate3d(0,-14px,0) rotate(-24deg); } }
 @media(prefers-reduced-motion:reduce) {
  .motion-line { overflow:visible; }
 }
}