*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Smooth scroll fights touch momentum on phones — keep native scrolling on small screens */
html {
  scroll-behavior: auto;
  /* Animated filters / decos can paint past the layout box — avoid phantom horizontal scrollbars */
  overflow-x: clip;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  overflow-x: clip;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: Syne, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: #d4cfc6;
  background: #12100e;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/*
 * Hero parallax via scroll-driven animations (Chrome 115+, Firefox 115+, Safari 18+).
 * Avoids relying on JS scroll listeners; layers move at different rates over document scroll.
 */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll(root block)) {
    @keyframes lassy-hero-bg-y {
      from {
        transform: translate3d(0, 0, 0);
      }
      to {
        transform: translate3d(0, 220px, 0);
      }
    }

    @keyframes lassy-hero-band-y {
      from {
        transform: translate3d(0, 0, 0);
      }
      to {
        transform: translate3d(0, 595px, 0);
      }
    }

    .hero-banner__frame .hero-banner__layer--bg {
      animation-name: lassy-hero-bg-y;
      animation-duration: 1ms;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-iteration-count: 1;
      animation-timeline: scroll(root block);
    }

    .hero-banner__frame .hero-banner__layer--band {
      animation-name: lassy-hero-band-y;
      animation-duration: 1ms;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-iteration-count: 1;
      animation-timeline: scroll(root block);
    }
  }
}