/* ============================================================
   Service Slider – Horizontal Motion Path
   Three.js Particle Background + GSAP Scroll Animation
   ============================================================ */

/* ---- Wrapper ---- */
.it-h-slider-wrapper {
  overflow: hidden;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background-color: var(--mps-bg-dark, #050000);
  color: #fff;
  position: relative;
}

/* ---- WebGL Container ---- */
.it-webgl-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 0;
  pointer-events: none;
}

.it-webgl-container canvas {
  display: block;
}

/* ---- Linear Loader ---- */
.it-linear-loader-wrapper {
  width: var(--mps-lin-width, 100%);
  max-width: var(--mps-lin-max-w, 100%);
  z-index: 100;
  pointer-events: none;
}

.it-linear-loader-wrapper.pos-fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.it-linear-loader-wrapper.pos-inside-top {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
}

.it-linear-loader-wrapper.pos-inside-bottom {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
}

.it-linear-loader-wrapper.pos-inside-bottom-third {
  position: absolute;
  bottom: 33vh;
  left: 50%;
  transform: translateX(-50%);
}

.it-linear-loader {
  width: 100%;
  height: var(--mps-lin-height, 4px);
  background: var(--mps-lin-track-bg, rgba(255, 255, 255, 0.05));
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.it-linear-loader-progress {
  height: 100%;
  width: 100%;
  background: var(--mps-lin-color, var(--mps-brand-red, #e40004));
  box-shadow: var(--mps-lin-glow, 0 0 10px var(--mps-brand-red, #e40004));
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* ---- Navigation Arrows ---- */
.it-nav-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: var(--mps-nav-bg, rgba(5, 0, 0, 0.6));
  border: 1px solid var(--mps-nav-border, rgba(228, 0, 4, 0.3));
  border-radius: var(--mps-nav-radius, 50%);
  width: var(--mps-nav-size, 50px);
  height: var(--mps-nav-size, 50px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding: 0;
  outline: none;
}

.it-nav-arrow svg,
.it-nav-arrow i {
  fill: var(--mps-nav-color, #ffffff);
  color: var(--mps-nav-color, #ffffff);
  width: calc(var(--mps-nav-size, 50px) * 0.5);
  height: calc(var(--mps-nav-size, 50px) * 0.5);
  font-size: calc(var(--mps-nav-size, 50px) * 0.5);
  transition: transform 0.3s ease;
}

.it-nav-arrow:hover {
  border-color: var(--mps-brand-red, #e40004);
  box-shadow: 0 0 15px rgba(var(--mps-brand-rgb, 228, 0, 4), 0.5);
  background: var(--mps-nav-bg, rgba(5, 0, 0, 0.9));
}

.it-nav-prev:hover svg {
  transform: translateX(-3px);
}

.it-nav-next:hover svg {
  transform: translateX(3px);
}

.it-nav-arrow.disabled {
  opacity: 0.2;
  pointer-events: none;
  filter: grayscale(1);
}

.it-nav-prev {
  left: 20px;
}

.it-nav-next {
  right: 20px;
}

/* ---- Horizontal Track ---- */
.it-h-track {
  display: flex;
  height: 100%;
  position: relative;
  z-index: 10;
  will-change: transform;
}

/* ---- SVG Path Overlay ---- */
.it-path-svg {
  position: absolute;
  top: 0;
  left: 50vw;
  height: 100vh;
  height: 100dvh;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

/* ---- Glowing Pointer ---- */
/* .it-glowing-pointer {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  background-color: #ffffff;
  border: 4px solid var(--mps-brand-red, #e40004);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 25;
  box-shadow:
    0 0 15px rgba(var(--mps-brand-rgb, 228, 0, 4), 1),
    0 0 25px rgba(var(--mps-brand-rgb, 228, 0, 4), 0.6);
  will-change: transform;
} */

/* ---- Slide Layout ---- */
.it-slide {
  flex: 0 0 100vw;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ---- Card Nodes (connection points on the path) ---- */
.it-card-node {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: var(--mps-bg-dark, #050000);
  border: 2px solid var(--mps-brand-red, #e40004);
  border-radius: 50%;
  z-index: 20;
  box-shadow: 0 0 10px rgba(var(--mps-brand-rgb, 228, 0, 4), 0.8);
}

/* Alternate node positions */
.it-slide:nth-child(odd) .it-card-node {
  top: 30vh;
}

.it-slide:nth-child(even) .it-card-node {
  top: 70vh;
}

/* ---- Connection Lines (node to content) ---- */
.it-connection-line {
  position: absolute;
  left: 50%;
  width: 1px;
  height: 15vh;
  transform: translateX(-50%);
  z-index: 5;
}

.it-slide:nth-child(odd) .it-connection-line {
  top: 30vh;
  background: linear-gradient(to bottom, var(--mps-brand-red, #e40004), transparent);
}

.it-slide:nth-child(even) .it-connection-line {
  bottom: 30vh;
  background: linear-gradient(to top, var(--mps-brand-red, #e40004), transparent);
}

/* ---- Text Content ---- */
.it-slide-content {
  width: 90%;
  max-width: 500px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
  text-align: left;
}

/* Content vertical placement follows node alternation */
.it-slide:nth-child(odd) .it-slide-content {
  margin-top: 48vh;
  padding-left: 20px;
}

.it-slide:nth-child(even) .it-slide-content {
  margin-top: 15vh;
  padding-left: 20px;
}

/* ---- Headlines ---- */
.it-slide-content h2 {
  font-size: var(--mps-slide-title-size, 20px);
  color: var(--mps-slide-title-color, #ffffff);
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.9);
}

.it-slide-content h2::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 6px;
  height: 25px;
  background: var(--mps-brand-red, #e40004);
  box-shadow: 0 0 10px var(--mps-brand-red, #e40004);
}

/* ---- Paragraphs ---- */
.it-slide-content p,
.it-slide-desc {
  font-size: var(--mps-slide-desc-size, 15px);
  line-height: 1.6;
  color: var(--mps-slide-desc-color, #cccccc);
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  .it-h-track {
    will-change: auto;
  }

  .it-glowing-pointer {
    will-change: auto;
  }
}

/* ---- Print ---- */
@media print {
  .it-h-slider-wrapper {
    height: auto !important;
    overflow: visible !important;
  }

  .it-webgl-container,
  .it-path-svg,
  .it-glowing-pointer,
  .it-card-node,
  .it-connection-line {
    display: none !important;
  }

  .it-h-track {
    width: auto !important;
    display: block !important;
    transform: none !important;
  }

  .it-slide {
    flex: none !important;
    width: auto !important;
    height: auto !important;
    min-height: 30vh;
    page-break-after: always;
  }

  .it-slide-content {
    opacity: 1 !important;
    margin-top: 2rem !important;
  }
}

/* ---- Mobile Adjustments ---- */
@media (max-width: 768px) {
  /* .it-glowing-pointer {
    width: 18px;
    height: 18px;
    border-width: 3px;
  } */

  .it-nav-arrow {
    width: 40px;
    height: 40px;
  }

  .it-nav-arrow svg {
    width: 22px;
    height: 22px;
  }

  .it-nav-prev {
    left: 10px;
  }

  .it-nav-next {
    right: 10px;
  }

  .it-card-node {
    width: 10px;
    height: 10px;
  }

  .it-slide-content {
    width: 85%;
  }

  .it-slide-content h2 {
    font-size: var(--mps-slide-title-size, 20px);
  }

  .it-slide-content p,
  .it-slide-desc {
    font-size: var(--mps-slide-desc-size, 15px);
  }
}

/* ---- Dynamic Animations & Extras ---- */

.it-slide-icon {
  margin-bottom: 15px;
  color: var(--mps-brand-red, #e40004);
  font-size: var(--mps-slide-icon-size, 40px);
}
.it-slide-icon svg,
.it-slide-icon i {
  width: var(--mps-slide-icon-size, 40px);
  height: var(--mps-slide-icon-size, 40px);
  fill: currentColor;
}

/* Floating Animation */
@keyframes floatAnim {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
.it-float-anim {
  animation: floatAnim 4s ease-in-out infinite;
}

/* Neon Path */
.it-neon-path {
  filter: drop-shadow(0 0 8px var(--mps-brand-red, #e40004)) drop-shadow(0 0 15px var(--mps-brand-red, #e40004));
}

/* Pulse Path */
@keyframes pulsePath {
  0% { stroke-width: 3px; opacity: 0.8; }
  50% { stroke-width: 5px; opacity: 1; }
  100% { stroke-width: 3px; opacity: 0.8; }
}
.it-pulse-path {
  animation: pulsePath 2s infinite ease-in-out;
}