/* ==========================================
   HERO GRADIENT ANIMATION
   ========================================== */

.hero-gradient-mesh {
  background: linear-gradient(-45deg, #02ccfe, #e6faff, #ff6b35, #fff4f0, #02ccfe);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  position: relative;
}

/* Optional overlay for better text contrast */
.hero-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.05) 50%,
    rgba(0, 0, 0, 0.1) 100%
  );
  pointer-events: none;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 50% 25%;
  }
  50% {
    background-position: 100% 50%;
  }
  75% {
    background-position: 50% 75%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Lighter version for pages that need less intensity */
.hero-gradient-mesh-light {
  background: linear-gradient(-45deg, 
    rgba(2, 204, 254, 0.3), 
    rgba(230, 250, 255, 0.8), 
    rgba(255, 107, 53, 0.2), 
    rgba(255, 244, 240, 0.9), 
    rgba(2, 204, 254, 0.3));
  background-size: 400% 400%;
  animation: gradientShift 20s ease infinite;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .hero-gradient-mesh,
  .hero-gradient-mesh-light {
    animation-duration: 20s; /* Slower on mobile for better performance */
  }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .hero-gradient-mesh,
  .hero-gradient-mesh-light {
    animation: none;
    background: linear-gradient(135deg, #02ccfe, #ff6b35);
  }
}

/* ==========================================
   SECTION ARCHITECTURE - INDEPENDENT SYSTEM
   ========================================== */

/* Base section structure - all sections use this */
.flow-section {
  position: relative;
  overflow: hidden;
  isolation: isolate; /* Creates new stacking context */
}

/* Background layer - sits behind everything in section */
.flow-section-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

/* Content layer - always on top */
.flow-section-content {
  position: relative;
  z-index: 1;
}

/* Transition layer - creates smooth blend between sections */
.flow-section-transition {
  position: absolute;
  bottom: -2px; /* Slight overlap to prevent gaps */
  left: 0;
  right: 0;
  height: 100px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ==========================================
   SECTION BACKGROUND VARIANTS
   ========================================== */

/* Hero Section - Primary gradient */
.flow-section-bg-hero {
  background: linear-gradient(
    135deg,
    rgba(2, 204, 254, 0.08) 0%,
    rgba(255, 107, 53, 0.06) 50%,
    rgba(2, 204, 254, 0.08) 100%
  );
  background-size: 400% 400%;
  animation: gradientFlow 15s ease infinite;
}

/* Light section - Clean white */
.flow-section-bg-light {
  background: #ffffff;
}

/* Subtle section - Very light accent */
.flow-section-bg-subtle {
  background: linear-gradient(
    to bottom,
    rgba(2, 204, 254, 0.03) 0%,
    rgba(255, 107, 53, 0.03) 100%
  );
}

/* Primary section - Bold primary color */
.flow-section-bg-primary {
  background: linear-gradient(
    135deg,
    #02ccfe 0%,
    #00a3cc 100%
  );
}

/* Accent section - Light gray */
.flow-section-bg-accent {
  background: linear-gradient(
    to bottom,
    #f9fafb 0%,
    #f3f4f6 100%
  );
}

/* ==========================================
   SECTION TRANSITIONS
   ========================================== */

/* SVG Wave Dividers */
.flow-section-transition::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-repeat: repeat-x;
  background-size: 100% 100px;
  background-position: bottom;
}

/* White to subtle transition */
.flow-transition-to-subtle::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C360,100 1080,0 1440,50 L1440,100 L0,100 Z' fill='rgba(255,255,255,1)'/%3E%3C/svg%3E");
}

/* Subtle to white transition */
.flow-transition-to-white::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C360,0 1080,100 1440,50 L1440,100 L0,100 Z' fill='rgba(2,204,254,0.03)'/%3E%3C/svg%3E");
}

/* White to accent transition */
.flow-transition-to-accent::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C480,80 960,80 1440,30 L1440,100 L0,100 Z' fill='rgba(255,255,255,1)'/%3E%3C/svg%3E");
}

/* Accent to white transition */
.flow-transition-to-white-from-accent::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,70 C360,20 1080,20 1440,70 L1440,100 L0,100 Z' fill='%23f9fafb'/%3E%3C/svg%3E");
}

/* White to primary transition */
.flow-transition-to-primary::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C240,90 720,90 960,40 S1200,0 1440,40 L1440,100 L0,100 Z' fill='rgba(255,255,255,1)'/%3E%3C/svg%3E");
}

/* Subtle to primary transition for footer */
.flow-transition-to-primary.from-subtle::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C360,0 1080,100 1440,50 L1440,100 L0,100 Z' fill='rgba(2,204,254,0.03)'/%3E%3C/svg%3E");
}

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

@keyframes gradientFlow {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Floating elements animation */
@keyframes float {
  0%, 100% {
    transform: translateY(0px) translateX(0px);
  }
  33% {
    transform: translateY(-20px) translateX(10px);
  }
  66% {
    transform: translateY(-10px) translateX(-10px);
  }
}

/* ==========================================
   DECORATIVE ELEMENTS
   ========================================== */

/* Floating orbs for visual interest */
.flow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.3;
  animation: float 20s ease-in-out infinite;
  pointer-events: none;
}

.flow-orb-1 {
  width: 300px;
  height: 300px;
  background: rgba(2, 204, 254, 0.3);
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.flow-orb-2 {
  width: 250px;
  height: 250px;
  background: rgba(255, 107, 53, 0.2);
  top: 60%;
  right: 10%;
  animation-delay: 7s;
}

.flow-orb-3 {
  width: 200px;
  height: 200px;
  background: rgba(2, 204, 254, 0.2);
  bottom: 10%;
  left: 50%;
  animation-delay: 14s;
}

/* ==========================================
   CARDS & INTERACTIVE ELEMENTS
   ========================================== */

.flow-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.flow-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
              0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.flow-button {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.flow-button:hover {
  transform: scale(1.02);
}

.flow-button:active {
  transform: scale(0.98);
}

/* ==========================================
   SCROLL REVEAL ANIMATIONS
   ========================================== */

.reveal-content {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-content.revealed {
  opacity: 1;
  transform: translateY(0);
}

.stagger-item {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.stagger-item.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================
   GRADIENT TEXT EFFECTS
   ========================================== */

.gradient-text-animated {
  background: linear-gradient(
    90deg,
    #02ccfe 0%,
    #ff6b35 50%,
    #02ccfe 100%
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientTextFlow 3s linear infinite;
}

@keyframes gradientTextFlow {
  to {
    background-position: 200% center;
  }
}

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

@media (max-width: 768px) {
  .flow-section-transition {
    height: 60px;
  }
  
  .flow-section-transition::before {
    height: 60px;
    background-size: 100% 60px;
  }
  
  .flow-orb {
    filter: blur(40px);
  }
  
  .flow-orb-1,
  .flow-orb-2,
  .flow-orb-3 {
    width: 150px;
    height: 150px;
  }
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */

.card-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

@media (max-width: 640px) {
  .card-group {
    grid-template-columns: 1fr;
  }
}

/* Zoom effect on scroll */
.zoom-on-scroll {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.zoom-on-scroll.revealed {
  transform: scale(1);
}

.zoom-on-scroll:not(.revealed) {
  transform: scale(0.8);
}

/* Counter animation */
.counter {
  transition: all 0.5s ease-out;
}

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

/* Hardware acceleration hints */
.flow-section,
.flow-card,
.flow-button {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================
   HOW IT WORKS - INTERACTIVE CARDS
   ========================================== */

/* Card hover elevations */
.flow-card.interactive-step {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.flow-card.interactive-step:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

/* Details summary styling */
details summary {
  list-style: none;
  user-select: none;
}

details summary::-webkit-details-marker {
  display: none;
}

details[open] summary {
  margin-bottom: 0.5rem;
}

/* Progress bar animation on scroll */
.progress-indicator {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-indicator.active {
  background: #02ccfe;
  transform: scale(1.2);
}

/* Icon animations */
.step-icon {
  transition: transform 0.3s ease;
}

.bg-white:hover .step-icon {
  transform: rotate(5deg) scale(1.05);
}

/* ==========================================
   VIDEO BACKGROUND STYLES
   ========================================== */

.video-background {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.video-background video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.2) 100%
  );
  pointer-events: none;
}

/* Fallback for mobile where video might not autoplay */
@media (max-width: 768px) {
  .video-background {
    background: linear-gradient(
      135deg,
      rgba(2, 204, 254, 0.8) 0%,
      rgba(255, 107, 53, 0.8) 100%
    );
  }
  
  .video-background video {
    opacity: 0.7;
  }
}