/* Motion is progressive enhancement. All content is visible without JavaScript. */
body { overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
html { scroll-padding-top: 30px; }
.hero-image { transform-origin: center top; }
.hero-background:after { background: linear-gradient(180deg, #02131e18 0%, #03151e30 35%, #03151e70 70%, #03151e99 100%); }
.hero-container { will-change: transform; }
.motion-ready .title-mask > span,
.motion-ready .hero-intro p { animation: none; }
.motion-ready .reveal { transition: none; }
.line-mask { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.line-content { display: block; }
.project .visual-inner { transition: none; transform-origin: center; }
.motion-ready .project-visual:hover .visual-inner { transform: none; }
.showreel { height: 210svh; }
.reel-media { transform: scale(.7); opacity: .6; }
.reel-title { gap: 2.1vw; }
.reel-title > span { display: block; }
.reel-art { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--stage-scale, 1)); }
.motion-ready .reel-scene { animation: none; }
.reel-scene-one { opacity: 1; }
.footer-background { will-change: transform; }
.footer-divider { transform-origin: left; }
.cursor-bubble { transform: translate(-50%, -50%); scale: .8; transition: opacity .2s, scale .3s; }
.cursor-bubble.active { scale: 1; }
.menu-navigation nav a { overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.menu-link-label { display: block; }
.motion-ready .menu-dialog[open] { animation: none; }
dialog { overscroll-behavior: contain; }

@media (max-width: 600px) {
  .hero { overflow: hidden; }
  .hero-background { overflow: hidden; }
  .hero-image { position: absolute; inset: 0; height: 100%; object-position: 46% top; transform: none; }
  .motion-ready .hero-image { transform: translate3d(0, var(--mobile-hero-y, 0px), 0) scale(1.07) !important; }
  .hero-background:after { background: linear-gradient(180deg, #03151e20, #03151e75 38%, #03151e70 65%, #03151ea6); }
  .showreel { height: 175svh; }
  .reel-title { gap: 3vw; }
  .reel-media { opacity: .6; }
  .reel-art { transform: translate(-50%, -50%) scale(.6); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .hero-container, .hero-image, .project, .visual-inner,
  .collage-piece, .footer-background, .line-content,
  .reel-title, .reel-title > span { transform: none !important; }
  .hero-image { position: absolute; height: 100%; }
  .showreel { height: 100svh; }
  .reel-sticky { position: relative; }
  .reel-media { transform: scale(1) !important; opacity: .5 !important; }
  .reel-scene { animation: none !important; opacity: 0; }
  .reel-scene-one { opacity: 1; }
  .reel-title { gap: 3vw; }
  .cursor-bubble { display: none; }
}