/* Layer Platform Section - 3D Visualization */

/* ========================================
   Scroll Text Section - Scroll Reveal Text
   ======================================== */
.scroll-text-section {
   background: white;
   padding: 6rem 2rem;
   text-align: center;
   overflow: hidden;
   min-height: 40vh;
   display: flex;
   align-items: center;
   justify-content: center;
}

.scroll-text-main {
   font-size: clamp(2.5rem, 6vw, 5rem);
   font-weight: 800;
   line-height: 1.2;
   margin: 0;
   max-width: 1400px;
}

/* Each word wrapped in span */
.scroll-text-main .word {
   display: inline-block;
   opacity: 0.15;
   transition: opacity 0.15s ease;
   margin-right: 0.25em;
}

.scroll-text-main .word.active {
   opacity: 1;
}

/* Match hero section colors: gray-900 for School, orange-500 for GrowCub */
.scroll-text-main .text-school .word {
   color: #111827;
}

.scroll-text-main .text-growcub .word {
   color: #f97316;
}

/* Responsive */
@media (max-width: 768px) {
   .scroll-text-section {
      padding: 4rem 1rem;
      min-height: 30vh;
   }
   
   .scroll-text-main {
      font-size: clamp(1.5rem, 8vw, 2.5rem);
   }
}

/* Dark Section */
.layer-platform-section {
   position: relative;
   width: 100%;
   min-height: 100vh;
   background: linear-gradient(180deg, #0a0a1a 0%, #0f1629 50%, #0a0a1a 100%);
   overflow: hidden;
   z-index: 5;
}

/* Canvas Container */
.layer-platform-canvas-container {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
}

#layer-platform-canvas {
   width: 100%;
   height: 100%;
   display: block;
}

/* Labels Container */
.layer-platform-labels {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: 10;
}

/* Platform Labels */
.platform-label {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   padding: 0.75rem 2rem;
   border-radius: 2rem;
   font-size: 1rem;
   font-weight: 700;
   white-space: nowrap;
   opacity: 0;
   transition: opacity 0.5s ease, transform 0.5s ease;
   pointer-events: auto;
   text-transform: uppercase;
   letter-spacing: 0.1em;
}

/* School label - positioned near bottom, above school icons */
.platform-label.school-label {
   bottom: 22%;
   top: auto;
   background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2));
   border: 2px solid rgba(59, 130, 246, 0.6);
   color: #93c5fd;
   box-shadow: 0 0 30px rgba(59, 130, 246, 0.4), inset 0 0 20px rgba(59, 130, 246, 0.1);
}

/* GrowCub label - positioned near top, below growcub icons */
.platform-label.growcub-label {
   top: 26%;
   bottom: auto;
   background: linear-gradient(135deg, rgba(249, 115, 22, 0.3), rgba(234, 88, 12, 0.2));
   border: 2px solid rgba(249, 115, 22, 0.6);
   color: #fdba74;
   box-shadow: 0 0 30px rgba(249, 115, 22, 0.4), inset 0 0 20px rgba(249, 115, 22, 0.1);
}

/* Icon Containers */
.platform-icons {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   width: 90%;
   max-width: 900px;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 1.5rem;
   pointer-events: none;
}

/* School icons container - BELOW the first platform */
#school-icons-container {
   bottom: 8%;
   top: auto;
}

/* GrowCub icons container - ABOVE the second platform */
#growcub-icons-container {
   top: 12%;
   bottom: auto;
}

.platform-icon {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.5rem;
   opacity: 0;
   transform: translateY(30px) scale(0.8);
   transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.platform-icon.visible {
   opacity: 1;
   transform: translateY(0) scale(1);
}

.platform-icon .icon-circle {
   width: 4rem;
   height: 4rem;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.5rem;
   backdrop-filter: blur(10px);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.platform-icon .icon-circle:hover {
   transform: scale(1.1);
}

.platform-icon.school-icon .icon-circle {
   background: rgba(59, 130, 246, 0.25);
   border: 2px solid rgba(59, 130, 246, 0.7);
   color: #93c5fd;
   box-shadow: 0 0 20px rgba(59, 130, 246, 0.5), inset 0 0 15px rgba(59, 130, 246, 0.2);
}

.platform-icon.school-icon .icon-circle:hover {
   box-shadow: 0 0 30px rgba(59, 130, 246, 0.7), inset 0 0 20px rgba(59, 130, 246, 0.3);
}

.platform-icon.growcub-icon .icon-circle {
   background: rgba(249, 115, 22, 0.25);
   border: 2px solid rgba(249, 115, 22, 0.7);
   color: #fdba74;
   box-shadow: 0 0 20px rgba(249, 115, 22, 0.5), inset 0 0 15px rgba(249, 115, 22, 0.2);
}

.platform-icon.growcub-icon .icon-circle:hover {
   box-shadow: 0 0 30px rgba(249, 115, 22, 0.7), inset 0 0 20px rgba(249, 115, 22, 0.3);
}

.platform-icon .icon-label {
   font-size: 0.8rem;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.9);
   text-align: center;
   max-width: 90px;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Responsive */
@media (max-width: 1024px) {
   .platform-icons {
      gap: 1rem;
   }
   
   .platform-icon .icon-circle {
      width: 3.5rem;
      height: 3.5rem;
      font-size: 1.25rem;
   }
   
   #school-icons-container {
      bottom: 6%;
   }
   
   #growcub-icons-container {
      top: 10%;
   }
}

@media (max-width: 768px) {
   .layer-platform-header h2 {
      font-size: 1.5rem;
   }
   
   .layer-platform-header p {
      font-size: 0.9rem;
      padding: 0 1rem;
   }
   
   .platform-icons {
      gap: 0.75rem;
      width: 95%;
   }
   
   .platform-icon .icon-circle {
      width: 3rem;
      height: 3rem;
      font-size: 1rem;
   }
   
   .platform-icon .icon-label {
      font-size: 0.65rem;
      max-width: 70px;
   }
   
   #school-icons-container {
      bottom: 4%;
   }
   
   #growcub-icons-container {
      top: 8%;
   }
   
   .platform-label {
      font-size: 0.8rem;
      padding: 0.5rem 1rem;
   }
   
   .platform-label.school-label {
      bottom: 18%;
   }
   
   .platform-label.growcub-label {
      top: 22%;
   }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
   .platform-icon,
   .platform-label {
      transition: none;
   }
}