/* =========================================================
   HORIZONTAL SECTION NAVIGATION
   Main sections slide right -> left
   ========================================================= */

:root{
  --horizontal-header-h:72px;
  --horizontal-footer-h:34px;
  --horizontal-ease:cubic-bezier(.22,.78,.22,1);
}

html.horizontal-sections-enabled,
html.horizontal-sections-enabled body{
  width:100%;
  height:100%;
  overflow:hidden !important;
  overscroll-behavior:none;
}

html.horizontal-sections-enabled body{
  position:relative;
}

/* Main becomes one horizontal strip. */
html.horizontal-sections-enabled main{
  position:relative;
  z-index:1;
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  width:100vw !important;
  height:calc(100dvh - var(--horizontal-header-h) - var(--horizontal-footer-h)) !important;
  margin-top:var(--horizontal-header-h) !important;
  overflow:visible !important;
  will-change:transform;
  transform:translate3d(0,0,0);
  transition:transform .82s var(--horizontal-ease);
}

/* Only top-level portfolio sections become horizontal panels. */
html.horizontal-sections-enabled main > .section[id]{
  position:relative !important;
  flex:0 0 100vw !important;
  width:100vw !important;
  max-width:100vw !important;
  min-width:100vw !important;
  height:100% !important;
  min-height:0 !important;
  max-height:100% !important;
  margin:0 !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior-y:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(54,198,255,.34) transparent;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}

/* Thin internal scrollbar only when a panel is taller than the viewport. */
html.horizontal-sections-enabled main > .section[id]::-webkit-scrollbar{
  width:5px;
}
html.horizontal-sections-enabled main > .section[id]::-webkit-scrollbar-track{
  background:transparent;
}
html.horizontal-sections-enabled main > .section[id]::-webkit-scrollbar-thumb{
  background:linear-gradient(#2ae2ff,#5278ff);
  border-radius:20px;
}

/* The fixed header already owns the top spacing in horizontal mode. */
html.horizontal-sections-enabled #home{
  padding-top:36px !important;
  min-height:0 !important;
}

/* Hero stays vertically balanced inside its panel. */
html.horizontal-sections-enabled #home.hero{
  align-items:center !important;
}

/* Footer remains visible without becoming an extra vertical page. */
html.horizontal-sections-enabled footer{
  position:fixed !important;
  left:0;
  right:0;
  bottom:0;
  z-index:50 !important;
  height:var(--horizontal-footer-h);
  padding:0 16px !important;
  display:flex;
  align-items:center;
  justify-content:center;
  border-top:1px solid rgba(83,164,216,.12) !important;
  background:rgba(2,9,24,.76);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  font-size:9px !important;
}

/* Navigation remains above the horizontal viewport. */
html.horizontal-sections-enabled .site-header{
  z-index:99999 !important;
}

/* Active menu item gets a slightly stronger horizontal-mode cue. */
html.horizontal-sections-enabled .desktop-nav a.active{
  color:#64e3ff !important;
  text-shadow:0 0 14px rgba(42,226,255,.18);
}

/* Section transition polish: child content gets a tiny slide/fade as panel enters. */
html.horizontal-sections-enabled main > .section[id] > *{
  transition:opacity .48s ease, transform .58s var(--horizontal-ease);
}

html.horizontal-sections-enabled main > .section[id].horizontal-panel-idle > *{
  opacity:.72;
  transform:translateX(18px);
}

html.horizontal-sections-enabled main > .section[id].horizontal-panel-active > *{
  opacity:1;
  transform:translateX(0);
}

/* Fixed utility buttons stay available. */
html.horizontal-sections-enabled .floating-whatsapp,
html.horizontal-sections-enabled .back-top{
  z-index:80 !important;
}

/* Loader must still be absolute top layer. */
html.horizontal-sections-enabled .rt-page-loader{
  z-index:999999 !important;
}

@media(max-width:991px){
  :root{
    --horizontal-header-h:72px;
    --horizontal-footer-h:30px;
  }

  html.horizontal-sections-enabled main > .section[id]{
    padding-bottom:44px !important;
  }

  html.horizontal-sections-enabled #home{
    padding-top:24px !important;
  }
}

@media(max-width:599px){
  :root{
    --horizontal-header-h:70px;
    --horizontal-footer-h:28px;
  }

  html.horizontal-sections-enabled main > .section[id]{
    padding-bottom:40px !important;
  }

  html.horizontal-sections-enabled #home{
    padding-top:22px !important;
  }

  html.horizontal-sections-enabled footer{
    font-size:8px !important;
  }
}

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

  html.horizontal-sections-enabled main > .section[id] > *{
    transition:none !important;
  }
}