/* Horizontal Scroll Section Styles */

.horizontal-scroll-wrapper {
   height: 100vh;
   overflow: hidden;
   position: relative;
   background: #f9fafb;
   /* Lower z-index than solution-layer (which is 50 when pinned) */
   z-index: 5;
}

.horizontal-scroll-container {
   width: 100%;
   height: 100%;
   position: relative;
   z-index: 5;
}

.horizontal-scroll-content {
   display: flex;
   width: fit-content;
   height: 100%;
   will-change: transform;
   /* Force GPU acceleration */
   transform: translateZ(0);
}

.scroll-panel {
   width: 100vw;
   height: 100vh;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   overflow: hidden;
}

/* Content container inside each horizontal slide */
.scroll-panel-content {
   text-align: center;
   padding: 2rem;
   max-width: 64rem; /* ~1024px */
   position: relative;
   z-index: 2;
}

/* Word-splitting spans default state (animated in with GSAP) */
.hs-word {
   display: inline-block;
   opacity: 0;
}

/* Hanging board - Panel 1 */
.hs-hanging-board {
   position: relative;
   width: min(80vw, 560px);
   margin: 8vh auto 0;
   padding-top: 110px; /* space for ropes */
}

.hs-rope {
   position: absolute;
   top: -30vh; /* extend near top of slide */
   width: 3px;
   height: calc(30vh + 110px);
   background: rgba(255, 255, 255, 0.8);
   box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
}

.hs-rope-left {
   left: 24%;
}

.hs-rope-right {
   right: 24%;
}

.hs-board {
   position: relative;
   border: 4px solid #ffffff;
   border-radius: 16px;
   padding: 1.75rem 2.25rem;
   background: rgba(255,255,255,0.04);
   box-shadow: 0 18px 60px rgba(0,0,0,0.25);
   transform-origin: top center;
   backdrop-filter: blur(2px);
}

@media (max-width: 768px) {
   .hs-hanging-board {
      width: min(88vw, 560px);
      margin-top: 6vh;
      padding-top: 90px;
   }
   .hs-rope {
      top: -20vh;
      height: calc(20vh + 90px);
      width: 2px;
   }
   .hs-rope-left { left: 22%; }
   .hs-rope-right { right: 22%; }
   .hs-board {
      border-width: 3px;
      border-radius: 14px;
      padding: 1.25rem 1.5rem;
   }
}

/* Massive outlined title at the bottom of the slide */
.hs-bottom-title {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   bottom: -4vw; /* slightly cut, but more visible */
   width: 100%;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   pointer-events: none;
   z-index: 1; /* behind the main content */
   overflow: hidden;
}

/* Centered icon above paragraphs */
.hs-center-icon {
   text-align: center;
   margin-bottom: 2rem;
   width: clamp(80px, 12vw, 160px);
   height: clamp(80px, 12vw, 160px);
   color: #ffffff;
   opacity: 0.95;
   z-index: 2;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-left: auto;
   margin-right: auto;
}

.hs-center-icon svg {
   width: 100%;
   height: 100%;
   display: block;
}

/* Vision icon specific styles */
.hs-icon-vision .vision-lens {
   filter: none;
   transform-origin: center center;
}

.hs-icon-vision .vision-rays {
   filter: none;
   transform-origin: center center;
}

.hs-icon-vision .vision-rays line {
   filter: none;
}

/* Mission icon specific styles */
.hs-icon-mission .mission-rocket {
   filter: none;
}

.hs-icon-mission .mission-flame ellipse {
   filter: none;
}

.hs-icon-mission .mission-stars path {
   filter: none;
}

.hs-outline-title {
   font-weight: 900;
   font-size: clamp(72px, 18vw, 300px);
   line-height: 0.85;
   letter-spacing: -0.02em;
   color: transparent;
   -webkit-text-stroke: 3px #ffffff;
   text-transform: uppercase;
   user-select: none;
   white-space: nowrap;
}

/* Letter spans for title animation */
.hs-letter {
   display: inline-block;
   opacity: 0;
}

@media (max-width: 768px) {
   .hs-outline-title {
      -webkit-text-stroke: 2px #ffffff;
      font-size: clamp(56px, 22vw, 200px);
   }
   .hs-bottom-title {
      bottom: -6vw; /* slightly cut on mobile, more visible */
   }
   .hs-center-icon {
      width: clamp(60px, 15vw, 100px);
      height: clamp(60px, 15vw, 100px);
      margin-bottom: 1.5rem;
   }
}

/* Responsive adjustments */
@media (max-width: 768px) {
   .horizontal-scroll-wrapper {
      height: 100vh;
   }
   
   .scroll-panel {
      padding: 2rem 1rem;
   }
}

/* Smooth transitions */
.scroll-panel * {
   will-change: transform, opacity;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
   .horizontal-scroll-content {
      transition: none !important;
   }
}

/* 3D Corner Icons - Hanging Effect */
.hs-corner-icon {
   position: absolute;
   z-index: 3;
   pointer-events: none;
}

.hs-icon-image {
   width: clamp(120px, 18vw, 280px);
   height: auto;
   filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
   transform-origin: top center;
   display: block;
}

/* Mirror/flip icon 4 horizontally (Mission section top-left) */
.hs-icon-mission-top-left {
   animation: hs-hang-jiggle-left-mirror 3s ease-in-out infinite;
}

/* Top Left Corner */
.hs-icon-top-left {
   top: -5%;
   left: -3%;
   animation: hs-hang-jiggle-left 3s ease-in-out infinite;
}

/* Top Right Corner */
.hs-icon-top-right {
   top: -5%;
   right: -3%;
   animation: hs-hang-jiggle-right 3.2s ease-in-out infinite;
}

/* Bottom Left Corner */
.hs-icon-bottom-left {
   bottom: -5%;
   left: -3%;
   animation: hs-hang-jiggle-left-bottom 3.4s ease-in-out infinite;
}

/* Bottom Right Corner */
.hs-icon-bottom-right {
   bottom: -5%;
   right: -3%;
   animation: hs-hang-jiggle-right-bottom 3.1s ease-in-out infinite;
}

/* Combined hanging and jiggle animations */
@keyframes hs-hang-jiggle-left {
   0%, 100% {
      transform: rotate(-15deg) translateX(0) translateY(0);
   }
   20% {
      transform: rotate(-16deg) translateX(3px) translateY(-2px);
   }
   40% {
      transform: rotate(-18deg) translateX(-2px) translateY(-8px);
   }
   60% {
      transform: rotate(-17deg) translateX(-3px) translateY(-4px);
   }
   80% {
      transform: rotate(-15deg) translateX(2px) translateY(-2px);
   }
}

@keyframes hs-hang-jiggle-left-mirror {
   0%, 100% {
      transform: rotate(15deg) translateX(0) translateY(0) scaleX(-1);
   }
   20% {
      transform: rotate(16deg) translateX(3px) translateY(-2px) scaleX(-1);
   }
   40% {
      transform: rotate(18deg) translateX(-2px) translateY(-8px) scaleX(-1);
   }
   60% {
      transform: rotate(17deg) translateX(-3px) translateY(-4px) scaleX(-1);
   }
   80% {
      transform: rotate(15deg) translateX(2px) translateY(-2px) scaleX(-1);
   }
}

@keyframes hs-hang-jiggle-right {
   0%, 100% {
      transform: rotate(15deg) translateX(0) translateY(0);
   }
   20% {
      transform: rotate(16deg) translateX(-3px) translateY(-2px);
   }
   40% {
      transform: rotate(18deg) translateX(2px) translateY(-8px);
   }
   60% {
      transform: rotate(17deg) translateX(3px) translateY(-4px);
   }
   80% {
      transform: rotate(15deg) translateX(-2px) translateY(-2px);
   }
}

@keyframes hs-hang-jiggle-left-bottom {
   0%, 100% {
      transform: rotate(15deg) translateX(0) translateY(0);
   }
   20% {
      transform: rotate(16deg) translateX(3px) translateY(2px);
   }
   40% {
      transform: rotate(18deg) translateX(-2px) translateY(8px);
   }
   60% {
      transform: rotate(17deg) translateX(-3px) translateY(4px);
   }
   80% {
      transform: rotate(15deg) translateX(2px) translateY(2px);
   }
}

@keyframes hs-hang-jiggle-right-bottom {
   0%, 100% {
      transform: rotate(-15deg) translateX(0) translateY(0);
   }
   20% {
      transform: rotate(-16deg) translateX(-3px) translateY(2px);
   }
   40% {
      transform: rotate(-18deg) translateX(2px) translateY(8px);
   }
   60% {
      transform: rotate(-17deg) translateX(3px) translateY(4px);
   }
   80% {
      transform: rotate(-15deg) translateX(-2px) translateY(2px);
   }
}

/* Responsive adjustments for corner icons */
@media (max-width: 1024px) {
   .hs-icon-image {
      width: clamp(60px, 10vw, 140px);
   }
   
   .hs-icon-top-left,
   .hs-icon-top-right {
      top: -3%;
   }
   
   .hs-icon-bottom-left,
   .hs-icon-bottom-right {
      bottom: -3%;
   }
}

@media (max-width: 768px) {
   .hs-icon-image {
      width: clamp(50px, 12vw, 100px);
   }
   
   .hs-icon-top-left,
   .hs-icon-top-right {
      top: -2%;
      left: -2%;
      right: -2%;
   }
   
   .hs-icon-bottom-left,
   .hs-icon-bottom-right {
      bottom: -2%;
      left: -2%;
      right: -2%;
   }
   
   .hs-corner-icon {
      animation-duration: 2.5s;
   }
}