/* ============================================
   FLUID GRADIENT HERO - MASTER COMPONENT
   Reusable animated gradient background
   ============================================ */

/* CSS Custom Properties for Customization */
.hero-gradient {
  /* Base Colors - Layer 1 */
  --gradient-color-1: rgba(102, 131, 94, 0.55);
  --gradient-color-2: rgba(60, 74, 84, 0.5);
  --gradient-color-3: rgba(77, 103, 70, 0.45);
  --gradient-color-4: rgba(54, 73, 49, 0.4);
  --gradient-color-5: rgba(41, 50, 56, 0.48);
  
  /* Layer 2 Colors */
  --gradient-ellipse-1: rgba(102, 131, 94, 0.35);
  --gradient-ellipse-2: rgba(60, 74, 84, 0.3);
  --gradient-ellipse-3: rgba(77, 103, 70, 0.32);
  --gradient-ellipse-4: rgba(54, 73, 49, 0.28);
  
  /* Layer 3 Colors */
  --gradient-circle-1: rgba(102, 131, 94, 0.25);
  --gradient-circle-2: rgba(60, 74, 84, 0.22);
  --gradient-circle-3: rgba(77, 103, 70, 0.2);
  
  /* Base Background */
  --gradient-base-start: rgba(54, 73, 49, 0.95);
  --gradient-base-end: rgba(41, 50, 56, 0.97);
  
  /* Animation Speeds */
  --gradient-speed-1: 20s;
  --gradient-speed-2: 25s;
  --gradient-speed-3: 30s;
  
  /* Opacity Controls */
  --gradient-opacity-layer2: 1;
  --gradient-opacity-layer3: 0.85;
  
  /* Size Controls */
  --gradient-size-1: 800px;
  --gradient-size-2: 750px;
  --gradient-size-3: 850px;
  --gradient-size-4: 700px;
  --gradient-size-5: 780px;
  
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, 
    var(--gradient-base-start) 0%, 
    var(--gradient-base-end) 100%);
}

/* Background image support for hero-gradient */
.hero-gradient.hero-with-image {
  background: 
    linear-gradient(135deg, 
      var(--gradient-base-start) 0%, 
      var(--gradient-base-end) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Background image with contrast for about page */
.hero-gradient.hero-with-image .hero-gradient-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('assets/Φωτογραφικό Υλικό/Edited/S.1059_2.JPG');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: contrast(1.3);
  z-index: 0;
}

/* Contact page specific hero image */
.hero-gradient.hero-contact {
  background: 
    linear-gradient(135deg, 
      var(--gradient-base-start) 0%, 
      var(--gradient-base-end) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Background image with contrast for contact page */
.hero-gradient.hero-contact .hero-gradient-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('assets/Φωτογραφικό Υλικό/Edited/S.1051_2.JPG');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: contrast(1.2);
  z-index: 0;
}

/* Play therapy page specific hero image */
.hero-gradient.hero-play-therapy {
  background: 
    linear-gradient(135deg, 
      var(--gradient-base-start) 0%, 
      var(--gradient-base-end) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Background image with contrast for play therapy page */
.hero-gradient.hero-play-therapy .hero-gradient-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('assets/Φωτογραφικό Υλικό/Edited/S1027_2.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: contrast(1.2);
  z-index: 0;
}

/* Services children page specific hero image */
.hero-gradient.hero-children {
  background: 
    linear-gradient(135deg, 
      var(--gradient-base-start) 0%, 
      var(--gradient-base-end) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Background image with contrast for services children page */
.hero-gradient.hero-children .hero-gradient-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('assets/Φωτογραφικό Υλικό/Edited/S1028_2.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: contrast(1.2);
  z-index: 0;
}

.hero-gradient .hero-background,
.hero-gradient .hero-video {
  display: none;
}

.hero-gradient .hero-image-bg {
  display: block;
}

.hero-gradient .hero-overlay {
  display: block;
}

.hero-gradient .hero-gradient-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.hero-gradient .hero-content {
  position: relative;
  z-index: 2;
}

.hero-gradient .hero-title,
.hero-gradient .hero-description {
  color: var(--color-white);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Fluid Gradient Animations */
@keyframes fluidGradient1 {
  0% {
    transform: translate(0%, 0%) scale(1);
  }
  25% {
    transform: translate(8%, -5%) scale(1.08);
  }
  50% {
    transform: translate(-6%, 7%) scale(0.95);
  }
  75% {
    transform: translate(5%, 4%) scale(1.04);
  }
  100% {
    transform: translate(0%, 0%) scale(1);
  }
}

@keyframes fluidGradient2 {
  0% {
    transform: translate(0%, 0%) rotate(0deg) scale(1);
  }
  33% {
    transform: translate(-7%, 6%) rotate(3deg) scale(1.06);
  }
  66% {
    transform: translate(6%, -7%) rotate(-3deg) scale(0.94);
  }
  100% {
    transform: translate(0%, 0%) rotate(0deg) scale(1);
  }
}

@keyframes fluidGradient3 {
  0% {
    transform: translate(0%, 0%) rotate(0deg) scale(1);
  }
  25% {
    transform: translate(5%, 5%) rotate(-2deg) scale(1.03);
  }
  50% {
    transform: translate(-5%, -5%) rotate(2deg) scale(0.97);
  }
  75% {
    transform: translate(4%, -4%) rotate(-1deg) scale(1.015);
  }
  100% {
    transform: translate(0%, 0%) rotate(0deg) scale(1);
  }
}