/* @container scroll-state() - Pure CSS scroll awareness
 * Served unoptimized to avoid Lightning CSS warnings for experimental syntax.
 * Browser support: Chrome 133+, Safari 18.4+ */
@supports (container-type: scroll-state) {

  html {
    container-type: scroll-state;
  }

  #main-header {
    transition: translate 0.3s ease-out;
    translate: 0 0;
  }

  #main-header {
    @container scroll-state(scrolled: bottom) {
      translate: 0 -100%;
    }
  }

  #main-header {
    @container scroll-state(scrolled: top) {
      translate: 0 0;
    }
  }

  .header-scroll-container {
    container-type: scroll-state;
  }

  @container scroll-state(stuck: top) {
    .nav-inner {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(20px);
    }
  }

  .carousel-container {
    container-type: scroll-state;
  }

  @container scroll-state(snapped) {
    .carousel-item {
      scale: 1.02;
      opacity: 1;
    }
  }

  @container not (scroll-state(snapped)) {
    .carousel-item {
      scale: 0.95;
      opacity: 0.7;
    }
  }

  .scrollable-container {
    container-type: scroll-state;
  }

  @container scroll-state(scrollable) {
    .scroll-hint {
      opacity: 1;
    }
  }

  @container not (scroll-state(scrollable)) {
    .scroll-hint {
      opacity: 0;
    }
  }
}