/* BeCloud Subpage Strategic Graphics - Subtle Cloud Transformation Visuals */

/* ===== SUBPAGE STRATEGIC BACKGROUND GRAPHICS ===== */

.solutions-hero-section {
  position: relative;
  overflow: hidden;
}

/* Solutions Hub Specific Graphics */
.solutions-hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.12) 0%, transparent 45%), radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.10) 0%, transparent 40%), radial-gradient(circle at 60% 80%, rgba(16, 185, 129, 0.08) 0%, transparent 35%), radial-gradient(circle at 30% 70%, rgba(245, 158, 11, 0.06) 0%, transparent 30%), radial-gradient(circle at 75% 45%, rgba(6, 182, 212, 0.05) 0%, transparent 25%), linear-gradient(135deg, transparent 47%, rgba(255, 255, 255, 0.025) 49%, rgba(255, 255, 255, 0.025) 51%, transparent 53%), linear-gradient(-45deg, transparent 47%, rgba(255, 255, 255, 0.02) 49%, rgba(255, 255, 255, 0.02) 51%, transparent 53%);
  background-size: 350px 350px, 280px 280px, 220px 220px, 200px 200px, 160px 160px, 120px 120px, 90px 90px;
  animation: solutionsFlow 50s linear infinite;
  z-index: 1;
  opacity: 0.9;
}

/* ===== SUBPAGE STRATEGIC ELEMENTS ===== */

.subpage-strategic-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Subpage Cloud Infrastructure Icons */
.subpage-strategic-elements .strategic-cloud-icon {
  position: absolute;
  opacity: 0.08;
  animation: floatSubpageStrategic 10s ease-in-out infinite;
  font-size: 2rem;
  filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.1));
}

.cloud-server {
  top: 15%;
  left: 8%;
  color: #3b82f6;
  animation-delay: 0s;
}

.cloud-database {
  top: 65%;
  right: 12%;
  color: #8b5cf6;
  animation-delay: 2s;
}

.cloud-network {
  top: 40%;
  left: 85%;
  color: #10b981;
  animation-delay: 4s;
}

.cloud-security {
  top: 80%;
  left: 20%;
  color: #f59e0b;
  animation-delay: 6s;
}

.cloud-analytics {
  top: 25%;
  right: 25%;
  color: #06b6d4;
  animation-delay: 8s;
}

.cloud-optimization {
  top: 55%;
  left: 45%;
  color: #8b5cf6;
  animation-delay: 10s;
}

/* Solutions Data Flow */
.solutions-data-flow {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(1.5px 1.5px at 25px 35px, rgba(59, 130, 246, 0.15), transparent), radial-gradient(1px 1px at 45px 75px, rgba(139, 92, 246, 0.12), transparent), radial-gradient(1px 1px at 95px 45px, rgba(16, 185, 129, 0.10), transparent), radial-gradient(1.5px 1.5px at 135px 85px, rgba(245, 158, 11, 0.08), transparent), radial-gradient(1px 1px at 75px 25px, rgba(6, 182, 212, 0.06), transparent);
  background-repeat: repeat;
  background-size: 130px 130px;
  animation: solutionsParticleFlow 30s linear infinite;
}

/* ===== SOLUTIONS TRANSFORMATION PATHWAY ===== */

.solutions-transformation-pathway {
  position: absolute;
  top: 45%;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient( 90deg, transparent 0%, rgba(59, 130, 246, 0.08) 25%, rgba(139, 92, 246, 0.12) 50%, rgba(16, 185, 129, 0.08) 75%, transparent 100% );
  transform: translateY(-50%);
  animation: solutionsPathwayPulse 12s ease-in-out infinite;
}

.solutions-transformation-pathway::before {
  content: '';
  position: absolute;
  top: -0.5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.03) 50%, transparent 100% );
  animation: solutionsPathwayGlow 8s ease-in-out infinite;
}

/* Solutions Strategic Node Points */
.solutions-strategic-nodes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.solutions-strategic-nodes .strategic-node {
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  animation: solutionsNodePulse 6s ease-in-out infinite;
}

.node-1 {
  top: 20%;
  left: 15%;
  animation-delay: 0s;
}

.node-2 {
  top: 35%;
  right: 25%;
  animation-delay: 1.2s;
}

.node-3 {
  top: 60%;
  left: 70%;
  animation-delay: 2.4s;
}

.node-4 {
  top: 75%;
  right: 15%;
  animation-delay: 3.6s;
}

.node-5 {
  top: 50%;
  left: 40%;
  animation-delay: 4.8s;
}

/* Solutions Connection Lines */
.solutions-connection-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.connection-line {
  position: absolute;
  height: 1px;
  background: linear-gradient( 90deg, transparent 0%, rgba(59, 130, 246, 0.05) 30%, rgba(59, 130, 246, 0.1) 70%, transparent 100% );
  animation: connectionFlow 15s linear infinite;
}

.line-1 {
  top: 25%;
  left: 20%;
  width: 200px;
  transform: rotate(25deg);
  animation-delay: 0s;
}

.line-2 {
  top: 55%;
  right: 30%;
  width: 150px;
  transform: rotate(-15deg);
  animation-delay: 5s;
}

.line-3 {
  top: 70%;
  left: 50%;
  width: 180px;
  transform: rotate(45deg);
  animation-delay: 10s;
}



/* ===== SOLUTIONS ARCHITECTURE PATTERN ===== */

.solutions-architecture-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle at 50% 50%, transparent 15px, rgba(255, 255, 255, 0.003) 16px, rgba(255, 255, 255, 0.003) 17px, transparent 18px);
  background-size: 60px 52px;
  background-position: 0 0, 30px 26px;
  animation: solutionsArchitectureShift 45s linear infinite;
  opacity: 0.4;
}

/* ===== SOLUTIONS STRATEGIC OVERLAY ===== */

.solutions-strategic-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(15, 23, 42, 0.12) 100%), radial-gradient(ellipse 700px 350px at 25% 25%, rgba(59, 130, 246, 0.04) 0%, transparent 55%), radial-gradient(ellipse 600px 300px at 75% 75%, rgba(139, 92, 246, 0.03) 0%, transparent 50%), radial-gradient(ellipse 500px 250px at 50% 50%, rgba(16, 185, 129, 0.025) 0%, transparent 45%), radial-gradient(ellipse 400px 200px at 80% 30%, rgba(6, 182, 212, 0.02) 0%, transparent 40%);
  z-index: 1;
}

/* ===== SUBPAGE ANIMATIONS ===== */

@keyframes solutionsFlow {
  0% { 
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; 
  }
  100% { 
    background-position: 350px 350px, -280px -280px, 220px -220px, -200px 200px, 160px -160px, 120px 120px, -90px -90px; 
  }
}

@keyframes floatSubpageStrategic {
  0%, 100% { 
    transform: translateY(0px) rotate(0deg); 
    opacity: 0.08;
  }
  33% { 
    transform: translateY(-12px) rotate(3deg); 
    opacity: 0.14;
  }
  66% { 
    transform: translateY(-6px) rotate(-2deg); 
    opacity: 0.11;
  }
}

@keyframes solutionsParticleFlow {
  0% { 
    transform: translateX(0px) translateY(0px); 
  }
  100% { 
    transform: translateX(120px) translateY(-40px); 
  }
}

@keyframes solutionsPathwayPulse {
  0%, 100% { 
    opacity: 0.2; 
    transform: translateY(-50%) scaleX(1);
  }
  50% { 
    opacity: 0.4; 
    transform: translateY(-50%) scaleX(1.03);
  }
}

@keyframes solutionsPathwayGlow {
  0%, 100% { 
    opacity: 0; 
  }
  50% { 
    opacity: 0.3; 
  }
}

@keyframes solutionsNodePulse {
  0%, 100% { 
    transform: scale(1); 
    opacity: 0.2;
  }
  50% { 
    transform: scale(1.3); 
    opacity: 0.6;
  }
}

@keyframes connectionFlow {
  0% { 
    opacity: 0; 
    transform: scaleX(0);
  }
  20% { 
    opacity: 0.4; 
    transform: scaleX(0.5);
  }
  80% { 
    opacity: 0.4; 
    transform: scaleX(1);
  }
  100% { 
    opacity: 0; 
    transform: scaleX(1);
  }
}

@keyframes solutionsArchitectureShift {
  0% { 
    background-position: 0 0; 
  }
  100% { 
    background-position: 60px 52px; 
  }
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 1024px) {
  .strategic-cloud-icon {
    font-size: 1.5rem;
    opacity: 0.06;
  }
  
  .transformation-arrow {
    width: 40px;
  }
  
  .strategic-node {
    width: 6px;
    height: 6px;
  }
}

@media (max-width: 768px) {
  .hero-enterprise::before {
    background-size: 200px 200px, 175px 175px, 150px 150px, 225px 225px, 40px 40px, 60px 60px;
  }
  
  .strategic-cloud-icon {
    font-size: 1.2rem;
    opacity: 0.04;
  }
  
  .data-flow-particles {
    background-size: 75px 75px;
  }
  
  .enterprise-architecture-pattern {
    background-size: 40px 35px;
  }
}

/* ===== ACCESSIBILITY & PERFORMANCE ===== */

@media (prefers-reduced-motion: reduce) {
  .hero-enterprise::before,
  .hero-enterprise::after,
  .strategic-cloud-icon,
  .data-flow-particles,
  .transformation-pathway,
  .transformation-pathway::before,
  .strategic-node,
  .transformation-arrow,
  .enterprise-architecture-pattern {
    animation: none;
  }
}

/* High contrast mode - hide decorative graphics */
@media (prefers-contrast: high) {
  .hero-enterprise::before,
  .hero-enterprise::after,
  .hero-strategic-elements,
  .data-flow-particles,
  .transformation-pathway,
  .strategic-nodes,
  .cloud-transformation-symbols,
  .enterprise-architecture-pattern,
  .strategic-overlay {
    display: none;
  }
}



/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* Use transform3d for hardware acceleration */
.hero-enterprise::before,
.hero-enterprise::after,
.strategic-cloud-icon,
.data-flow-particles,
.transformation-pathway,
.strategic-node,
.transformation-arrow {
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}

/* Optimize for 60fps animations */
@media (min-width: 1024px) {
  .hero-enterprise::before {
    animation-duration: 60s;
  }
  
  .data-flow-particles {
    animation-duration: 30s;
  }
}