/* ═══════════════════════════════════════════════════════
   Mute Horizontal Scroll — CSS
   ═══════════════════════════════════════════════════════ */

/* ── OUTER wrapper ──────────────────────────────────────
   position: relative so the spacer creates real scroll room
   below the sticky frame.                                */
.mhs-outer {
  position: relative;
  width: 100%;
}

/* ── STICKY FRAME ───────────────────────────────────────
   Sticks to viewport while user scrolls the spacer.      */
.mhs-frame {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;          /* overridden by Elementor selector */
  overflow: hidden;
  background: #0d1117;
}

/* ── TRACK ──────────────────────────────────────────────
   Flex row, wider than viewport.
   translateX is driven by JS — no CSS scroll.            */
.mhs-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 100%;
  width: max-content;
  will-change: transform;
  /* smooth easing applied via JS lerp, not transition    */
}

/* ── PANEL ──────────────────────────────────────────────
   Each panel fills the frame height.
   Width set inline per-panel by PHP/JS.                  */
.mhs-panel {
  position: relative;
  flex-shrink: 0;
  height: 100%;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.mhs-panel-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;  /* clip Elementor templates to panel bounds */
}

/* Make Elementor sections inside panels fill the height */
.mhs-panel-inner > .elementor,
.mhs-panel-inner > .elementor > .elementor-section-wrap,
.mhs-panel-inner .e-con,
.mhs-panel-inner .elementor-section {
  height: 100% !important;
  min-height: unset !important;
}

/* ── SPACER ─────────────────────────────────────────────
   Height set by JS = total track width (in px).
   This gives the page vertical scroll room.              */
.mhs-spacer {
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════
   PROGRESS BAR
   ═══════════════════════════════════════════════════════ */
.mhs-progress-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,0.15);
  z-index: 50;
}
.mhs-pos-top    { top: 0;    bottom: auto; }
.mhs-pos-bottom { bottom: 0; top: auto;    }

.mhs-progress-fill {
  height: 100%;
  width: 0%;
  background: #E8A835;
  transition: width 0.08s linear;
  will-change: width;
}

/* ═══════════════════════════════════════════════════════
   COUNTER
   ═══════════════════════════════════════════════════════ */
.mhs-counter {
  position: absolute;
  z-index: 50;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.15em;
  pointer-events: none;
  padding: 24px;
}
.mhs-counter-left   { left: 0; right: auto; text-align: left; }
.mhs-counter-center { left: 50%; transform: translateX(-50%); text-align: center; }
.mhs-counter-right  { right: 0; left: auto; text-align: right; }
.mhs-counter-top    { top: 0;    bottom: auto; }
.mhs-counter-bottom { bottom: 0; top: auto; }

/* ═══════════════════════════════════════════════════════
   SCROLL HINT
   ═══════════════════════════════════════════════════════ */
.mhs-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  color: rgba(255,255,255,0.6);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.4s ease;
}
.mhs-hint.mhs-hint-hidden { opacity: 0; }

.mhs-hint-arrow {
  display: inline-block;
  animation: mhs-bounce 1.4s ease-in-out infinite;
}
@keyframes mhs-bounce {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(6px); }
}

/* ═══════════════════════════════════════════════════════
   EDITOR — disable sticky + scrolling in Elementor canvas
   so user can see and click all panels normally          */
.elementor-editor-active .mhs-frame {
  position: relative !important;
  height: auto !important;
  overflow: visible !important;
}
.elementor-editor-active .mhs-track {
  flex-wrap: wrap !important;
  width: 100% !important;
  transform: none !important;
}
.elementor-editor-active .mhs-panel {
  width: 100% !important;
  flex: 0 0 100% !important;
  min-height: 300px;
}
.elementor-editor-active .mhs-spacer   { display: none !important; }
.elementor-editor-active .mhs-progress-bar { display: none !important; }

/* ═══════════════════════════════════════════════════════
   MOBILE — stack vertically, disable h-scroll
   ═══════════════════════════════════════════════════════ */
.mhs-mobile .mhs-frame {
  position: relative !important;
  height: auto !important;
  overflow: visible !important;
}
.mhs-mobile .mhs-track {
  flex-direction: column !important;
  width: 100% !important;
  transform: none !important;
}
.mhs-mobile .mhs-panel {
  width: 100% !important;
  flex: none !important;
  min-height: 60vh;
}
.mhs-mobile .mhs-spacer { display: none !important; }
.mhs-mobile .mhs-hint   { display: none !important; }