/* static/css/parallax.css */
/* Desktop + shared rules */

html, body { 
  overflow-x: hidden; 
  height: 100%;
  width: 100%;
  max-width: 100%;
}

#snapper{
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory; /* STRONG SNAPPING */
}

.scene{
  position: relative;
  width: 100%;
  max-width: 100%;
  /* subtract top nav so scene+nav == viewport height */
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}


.scene .layers,
.scene .layer,
.bg-grad{
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  pointer-events: none;
}

.scene .layer{
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  contain: layout paint style;
}

/* Consistent hero-inner across all slides */
.hero-inner{
  position: relative;
  z-index: 10;
  width: min(1000px, calc(100% - 48px)) !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}

/* Keep mandatory snap for strong snapping */
@media (min-width: 641px){
  #snapper { 
    scroll-snap-type: y mandatory;
  }
}

/* Safe horizontal parallax on mobile only */
@media (max-width: 640px){
  .scene .layer[data-axis="x"]{ 
    transform: translate3d(0,0,0) !important; 
  }
  
  /* Mobile padding override */
  .hero-inner {
    width: calc(100% - 2rem) !important;
    margin-left: 1rem !important;
    margin-right: 1rem !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}

/* Unify alignment across slides and services */
.scene .hero-inner {
    width: min(1100px, calc(100vw - 48px));
    margin: 0 auto;
    padding: 0;
}