/* =========================================================
   HORIZONTAL SCROLL PERFORMANCE OPTIMIZATION
   Visual design stays the same.
   ========================================================= */

:root{
  --horizontal-ease:cubic-bezier(.22,.74,.20,1);
}

/* Faster, cleaner GPU-only panel movement. */
html.horizontal-sections-enabled main{
  transition:transform .62s var(--horizontal-ease) !important;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  perspective:1000px;
}

/* Isolate each panel's paint/layout work. */
html.horizontal-sections-enabled main > .section[id]{
  contain:layout paint style;
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* Offscreen panels do not need to run their decorative animations. */
html.horizontal-sections-enabled
main > .section[id].horizontal-panel-idle:not(.horizontal-panel-near) *{
  animation-play-state:paused !important;
}

/* While the track itself is moving, freeze inner decorative animations.
   The content remains visible; only expensive continuous animation pauses. */
html.horizontal-transitioning main > .section[id] *{
  animation-play-state:paused !important;
}

/* Avoid running a second set of child transforms while the parent track moves. */
html.horizontal-transitioning
main > .section[id] > *{
  transition:none !important;
}

/* Fixed blur/mix-blend layers are expensive during a full-screen transform.
   Temporarily simplify them only for the ~620ms slide. */
html.horizontal-transitioning #networkCanvas{
  mix-blend-mode:normal !important;
  opacity:.68 !important;
}

html.horizontal-transitioning .cursor-glow{
  opacity:.28 !important;
}

html.horizontal-transitioning .site-header,
html.horizontal-transitioning footer{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

/* Prevent hover transforms from competing with panel movement. */
html.horizontal-transitioning #projects .project-card,
html.horizontal-transitioning #hosting .flow-item,
html.horizontal-transitioning #design .tool-pod{
  transform:none !important;
}

/* Idle panels should not receive pointer work. */
html.horizontal-sections-enabled
main > .section[id].horizontal-panel-idle{
  pointer-events:none;
}

html.horizontal-sections-enabled
main > .section[id].horizontal-panel-active{
  pointer-events:auto;
}

/* Touch devices get an even lighter transition. */
@media(max-width:767px), (hover:none), (pointer:coarse){
  html.horizontal-sections-enabled main{
    transition-duration:.52s !important;
  }

  html.horizontal-transitioning #networkCanvas{
    opacity:.52 !important;
  }
}

@media(prefers-reduced-motion:reduce){
  html.horizontal-sections-enabled main{
    transition-duration:.01ms !important;
  }
}