/* File: assets/css/solution-layer.css */
/* Solution Layer - Video with Orbiting Pills Animation */
/* NO SHADOWS - Full width cards - Fixed orbit rotation */

/* ============================================
   Base Styles
   ============================================ */
.solution-layer-section {
   position: relative;
   min-height: 100vh;
   background: white;
   overflow: hidden;
   z-index: 10;
}

.solution-layer-section.pin-spacer,
.solution-layer-section[style*="position: fixed"] {
   z-index: 50 !important;
}

.solution-header {
   position: relative;
   z-index: 100;
   background: white;
   padding: 2rem 0;
   text-align: center;
}

.solution-header h2 {
   font-size: 3rem;
   font-weight: bold;
   color: #1f2937;
   margin-bottom: 1rem;
}

.solution-header h2 span {
   color: #f97316;
}

.solution-header p {
   font-size: 1.25rem;
   color: #6b7280;
   max-width: 48rem;
   margin: 0 auto;
}

/* ============================================
   Cards Container
   ============================================ */
.solution-cards-container {
   position: relative;
   width: 100%;
   height: 100vh;
   min-height: 100vh;
   overflow: hidden;
   background: white;
}

/* ============================================
   Card Base Styles - FULL WIDTH
   ============================================ */
.solution-card {
   position: absolute !important;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   overflow: hidden;
}

/* ============================================
   Card Wrapper - FULL WIDTH from start
   ============================================ */
.solution-card-wrapper {
   position: relative;
   width: 100%;
   height: 100%;
   margin: 0;
   border-radius: 0;
   will-change: transform, opacity;
   backface-visibility: hidden;
   padding: 2rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

/* Orange Theme - Using theme colors: #d9782a, #e8923b, #f97316, #fbbf24 */
.solution-card[data-color="orange"] .solution-card-wrapper {
   background: 
      radial-gradient(ellipse 80% 50% at 50% 0%, rgba(251, 191, 36, 0.2) 0%, transparent 50%),
      radial-gradient(ellipse 60% 40% at 80% 100%, rgba(249, 115, 22, 0.15) 0%, transparent 50%),
      linear-gradient(150deg, #d9782a 0%, #e8923b 50%, #f97316 100%);
   color: white;
}

/* Dark Theme - Using theme colors: #0f2533, #1a3a4a, #1a1a2e, #16213e, #0f0f23 */
.solution-card[data-color="dark"] .solution-card-wrapper {
   background: 
      radial-gradient(ellipse 70% 50% at 30% 20%, rgba(26, 58, 74, 0.4) 0%, transparent 50%),
      radial-gradient(ellipse 50% 40% at 70% 80%, rgba(22, 33, 62, 0.3) 0%, transparent 50%),
      linear-gradient(150deg, #0f0f23 0%, #0f2533 50%, #1a3a4a 100%);
   color: white;
}

/* Card variations using same theme colors with different angles/positions */
.solution-card[data-index="0"] .solution-card-wrapper {
   background: 
      radial-gradient(ellipse 70% 50% at 30% 10%, rgba(251, 191, 36, 0.25) 0%, transparent 50%),
      linear-gradient(135deg, #d9782a 0%, #f97316 60%, #e8923b 100%);
}

.solution-card[data-index="1"] .solution-card-wrapper {
   background: 
      radial-gradient(ellipse 60% 50% at 70% 80%, rgba(26, 58, 74, 0.5) 0%, transparent 50%),
      linear-gradient(160deg, #1a1a2e 0%, #0f2533 40%, #1a3a4a 100%);
}

.solution-card[data-index="2"] .solution-card-wrapper {
   background: 
      radial-gradient(ellipse 80% 40% at 50% 90%, rgba(249, 115, 22, 0.2) 0%, transparent 50%),
      linear-gradient(170deg, #e8923b 0%, #d9782a 50%, #f97316 100%);
}

.solution-card[data-index="3"] .solution-card-wrapper {
   background: 
      radial-gradient(ellipse 70% 60% at 20% 30%, rgba(22, 33, 62, 0.4) 0%, transparent 50%),
      linear-gradient(145deg, #0f0f23 0%, #16213e 50%, #1a3a4a 100%);
}

.solution-card[data-index="4"] .solution-card-wrapper {
   background: 
      radial-gradient(ellipse 60% 50% at 80% 20%, rgba(251, 191, 36, 0.2) 0%, transparent 50%),
      linear-gradient(175deg, #f97316 0%, #d9782a 60%, #e8923b 100%);
}

.solution-card[data-index="5"] .solution-card-wrapper {
   background: 
      radial-gradient(ellipse 80% 50% at 40% 70%, rgba(26, 58, 74, 0.5) 0%, transparent 50%),
      linear-gradient(140deg, #16213e 0%, #0f2533 40%, #1a1a2e 100%);
}

/* ============================================
   Card Content
   ============================================ */
.solution-card-content {
   position: relative;
   width: 100%;
   max-width: 1400px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1.5rem;
}

/* ============================================
   Animated Title - SMALLER for long titles
   ============================================ */
.solution-title {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   gap: 0.1rem 0.6rem;
   width: 100%;
   max-width: 900px;
   text-align: center;
   margin: 0;
   padding: 0 1rem;
   line-height: 1.1;
}

.title-word {
   display: inline-block;
   font-size: clamp(1.5rem, 3.5vw, 2.8rem);
   font-weight: 700;
   letter-spacing: -0.01em;
   opacity: 0;
   transform: translateY(40px);
   will-change: transform, opacity;
   color: white;
}

/* ============================================
   Orbit Container - Video + Pills
   ============================================ */
.orbit-container {
   position: relative;
   width: 600px;
   height: 600px;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transform: scale(0.8);
   will-change: transform, opacity;
}

/* Central Video Circle - BIGGER */
.video-circle {
   position: absolute;
   width: 350px;
   height: 350px;
   border-radius: 50%;
   overflow: hidden;
   z-index: 10;
   opacity: 0;
   will-change: transform, opacity;
   border: 4px solid rgba(255, 255, 255, 0.35);
   /* Center in container - GSAP handles transform */
   top: 50%;
   left: 50%;
}

.video-circle video {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 50%;
}

/* Orbit Ring - Same centering as video */
.orbit-ring {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   border-radius: 50%;
   /* Rotation happens around center of container */
   transform-origin: center center;
}

/* ============================================
   Orbiting Pills - Fixed positioning
   ============================================ */
.orbit-pill {
   position: absolute;
   display: flex;
   align-items: center;
   gap: 0.4rem;
   padding: 0.4rem 0.8rem;
   border-radius: 30px;
   font-size: 0.85rem;
   font-weight: 600;
   line-height: 1.2;
   text-align: left;
   white-space: nowrap;
   opacity: 0;
   will-change: transform, opacity;
   transform-origin: center center;
}

/* Orange card pills - Using theme color #d9782a */
.solution-card[data-color="orange"] .orbit-pill {
   background: rgba(255, 255, 255, 0.95);
   color: #d9782a;
   border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Dark card pills - Using theme color #0f2533 */
.solution-card[data-color="dark"] .orbit-pill {
   background: rgba(255, 255, 255, 0.95);
   color: #0f2533;
   border: 1px solid rgba(255, 255, 255, 0.5);
}

.orbit-pill svg {
   width: 18px;
   height: 18px;
   flex-shrink: 0;
}

.orbit-pill span {
   display: block;
}

/* Orbit animation keyframes */
@keyframes orbitRotate {
   from {
      transform: rotate(0deg);
   }

   to {
      transform: rotate(360deg);
   }
}

/* When orbiting is active - ring rotates, pills counter-rotate */
.orbit-container.orbiting .orbit-ring {
   animation: orbitRotate 30s linear infinite;
}

.orbit-container.orbiting .orbit-pill {
   animation: orbitRotate 30s linear infinite reverse;
}

/* ============================================
   Responsive Styles
   ============================================ */
@media (max-width: 1024px) {
   .title-word {
      font-size: clamp(1.3rem, 3vw, 2.2rem);
   }

   .orbit-container {
      width: 480px;
      height: 480px;
   }

   .video-circle {
      width: 280px;
      height: 280px;
   }

   .orbit-pill {
      font-size: 0.8rem;
      padding: 0.35rem 0.7rem;
   }

   .orbit-pill svg {
      width: 16px;
      height: 16px;
   }
}

@media (max-width: 768px) {
   .solution-header h2 {
      font-size: 2rem;
   }

   .solution-header p {
      font-size: 1rem;
   }

   .solution-card-content {
      gap: 1rem;
   }

   .title-word {
      font-size: clamp(1rem, 4vw, 1.6rem);
   }

   .orbit-container {
      width: 380px;
      height: 380px;
   }

   .video-circle {
      width: 220px;
      height: 220px;
   }

   .orbit-pill {
      font-size: 0.7rem;
      padding: 0.3rem 0.5rem;
      gap: 0.25rem;
   }

   .orbit-pill svg {
      width: 12px;
      height: 12px;
   }
}

@media (max-width: 480px) {
   .title-word {
      font-size: clamp(0.9rem, 5vw, 1.3rem);
   }

   .orbit-container {
      width: 300px;
      height: 300px;
   }

   .video-circle {
      width: 180px;
      height: 180px;
   }

   .orbit-pill {
      font-size: 0.65rem;
      padding: 0.25rem 0.4rem;
   }

   .orbit-pill svg {
      width: 10px;
      height: 10px;
   }
}

/* ============================================
   Reduced Motion Support
   ============================================ */
@media (prefers-reduced-motion: reduce) {

   .solution-card-wrapper,
   .title-word,
   .orbit-container,
   .video-circle,
   .orbit-pill,
   .orbit-ring {
      transition: none !important;
      animation: none !important;
   }
}