/* css/styles.css */

:root {
  /* Primary Colors
     These are the main brand colors that form the foundation of the design system */
  --meleon-green: #0D3939;    /* Dark green - Main brand color */
  --meleon-yellow: #E7E569;   /* Light yellow - Secondary brand color */
  
  /* Secondary Colors - Green Spectrum
     A range of green variations that complement the primary green */
  --meleon-green-darkest: #063432;   /* #063432 - Darkest green shade */
  --meleon-green-dark: #3d7068;      /* #3d7068 - Deep forest green */
  --meleon-green-medium: #54b89a;    /* #54b89a - Sea green */
  --meleon-green-sage: #74a8ab;      /* #74a8ab - Sage green */
  --meleon-green-blue: #5eb8e8;      /* #5eb8e8 - Blue-tinted green */
  
  /* Secondary Colors - Earth Tones
     Warm and natural colors that add depth to the palette */
  --meleon-olive: #d3c82a;           /* #d3c82a - Olive yellow */
  --meleon-lime: #92c143;            /* #92c143 - Fresh lime */
  --meleon-forest: #51a447;          /* #51a447 - Forest green */
  --meleon-moss: #6b7242;            /* #6b7242 - Moss green */
  --meleon-sand: #f7ce5b;            /* #f7ce5b - Sandy yellow */
  
  /* Secondary Colors - Neutral Greens
     Softer green tones for supporting elements */
  --meleon-sage-light: #87a878;      /* #87a878 - Light sage */
  --meleon-green-pale: #b0bc98;      /* #b0bc98 - Pale green */
  --meleon-green-mist: #c7ccb9;      /* #c7ccb9 - Misty green */
  --meleon-green-wash: #cae2bc;      /* #cae2bc - Washed green */
  --meleon-green-hint: #dbf9b8;      /* #dbf9b8 - Hint of green */
  
  /* Secondary Colors - Accent Tones
     Colors for highlights and special elements */
  --meleon-taupe: #ccc39e;           /* #ccc39e - Neutral taupe */
  --meleon-peach: #f8b05b;           /* #f8b05b - Warm peach */
  --meleon-olive-dark: #af9b46;      /* #af9b46 - Dark olive */
  --meleon-green-yellow: #bfba51;    /* #bfba51 - Yellow-green */
  --meleon-brown: #ba7544;           /* #ba7544 - Earthy brown */
  
  /* Typography */
  --font-primary: 'ITC Avant Garde Gothic Std', sans-serif;
  --font-secondary: 'Montserrat Light', sans-serif;
}

/* Logo Styles */
.logo {
    display: inline-block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.logo-default {
    background-image: url('../images/logos/meleon_logo.svg');
}

.logo-iso {
    background-image: url('../images/Iso-transp.png');
}

.logo-white {
    background-image: url('../images/logos/meleon_logo_white.svg');
}

.logo-black {
    background-image: url('../images/logos/meleon_logo_black.svg');
}

/* Optional: if you need versions with backgrounds */
.logo-black-white-bg {
    background-image: url('../images/logos/meleon_logo_black_white_bg.svg');
}

.logo-white-black-bg {
    background-image: url('../images/logos/meleon_logo_white_black_bg.svg');
}


/* Gradient Variations */
.gradient-bg {
  background: linear-gradient(335deg,
    var(--meleon-green) 0%,
    var(--meleon-green-blue) 35%,                              
    var(--meleon-green-medium) 65%,                              
    var(--meleon-yellow) 100%
  );
}

.gradient-bg-reverse {
  background: linear-gradient(45deg,
    var(--meleon-yellow) 0%,
    var(--meleon-green) 100%);
}

.disabled {
  pointer-events: none;   /* Prevents clicking and hover interactions */
  cursor: not-allowed;    /* Changes the cursor to indicate a disabled element */
  opacity: 0.5;           /* Makes the element appear inactive */
}



/* Text Color Utilities */
.text-meleon-primary { color: var(--meleon-green); }
.text-meleon-secondary { color: var(--meleon-yellow); }
.text-meleon-secondary-bright { color: #F4F270; }
.text-meleon-3 { color: var(--meleon-green-sage); }

/* Background Color Utilities */
.bg-meleon-primary { background-color: var(--meleon-green); }
.bg-meleon-secondary { background-color: var(--meleon-yellow); }
.bg-meleon-medium { background-color: var(--meleon-green-medium); }

/* Border Color Utilities */
.border-meleon-primary { border-color: var(--meleon-green); }
.border-meleon-secondary { border-color: var(--meleon-yellow); }
.border-meleon-medium { border-color: var(--meleon-green-medium); }

/* Interactive State Utilities */
.hover-meleon:hover { 
    color: var(--meleon-green-medium);
}
.hover-bg-meleon-medium:hover { 
    background-color: var(--meleon-green-medium); 
}
.hover-bg-meleon-primary:hover { 
    background-color: var(--meleon-green); 
}
.hover-bg-meleon-secondary:hover { 
    background-color: var(--meleon-yellow); 
}


/* Animation Utilities 
   These create the fluid blob animations for decorative backgrounds */
@keyframes blob {
    0%, 100% { 
        transform: translate(0, 0) scale(1); 
    }
    25% { 
        transform: translate(20px, -30px) scale(1.1); 
    }
    50% { 
        transform: translate(-20px, 20px) scale(0.9); 
    }
    75% { 
        transform: translate(20px, 30px) scale(0.95); 
    }
}

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

/* Animation Classes */
.animate-blob {
    animation: blob 7s infinite;
}

/* Animation Delay Utilities */
.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

* Core colors for new sections */
:root {
  --card-bg: white;
  --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --card-radius: 1rem;
  --icon-bg-opacity: 0.1;
  --transition-smooth: all 0.3s ease;
}

/* Base card styles for all new sections */
/* Transparent card for gradient sections */
.feature-card-transparent {
  background: var(--meleon-medium);
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);  /* Smooth transition curve */
}

.feature-card-transparent:hover {
  transform: translateY(-12px);  /* Increased lift (originally -2px) */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  background: white;
}

/* Solid white card for hardware section */
.feature-card-solid {
  background: white;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.feature-card-solid:hover {
  transform: translateY(-12px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
/*Spacing between sections*/
.section-spacing {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.section-spacing-large {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

}
.section-transition-bottom::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(to bottom, transparent, white);
    pointer-events: none;
}
/* Variante pour les sections avec grille */
.section-transition-bottom-grid::after {
    background: linear-gradient(to bottom, transparent, var(--meleon-green-hint));
}
*/

/* Icon containers */
.icon-container {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
}

/* Color-coded variations */
.icon-yellow {
  background-color: rgba(231, 229, 105, var(--icon-bg-opacity));
}

.icon-green {
  background-color: rgba(13, 57, 57, var(--icon-bg-opacity));
}

.icon-sage {
  background-color: rgba(116, 168, 171, var(--icon-bg-opacity));
}

/* Simple fade animations */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-aos="fade-up"] {
  opacity: 0;
  animation: fadeUp 0.6s ease forwards;
}

/* Delay utilities */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* Bottom highlight section */
.highlight-gradient {
  background: linear-gradient(to right, var(--meleon-green), var(--meleon-green-sage));
  border-radius: var(--card-radius);
  color: white;
}

/* Simple pulse animation for indicators */
@keyframes simplePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.pulse-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  animation: simplePulse 2s ease infinite;
}

/* Prevent blue selection effect */
body {
  user-select: none;
}
/* Perplixty changes */

.comparison-container {
    position: relative;
    width: 100%;
    max-width: 1200px; /* Adjust as needed */
    margin: 0 auto;
    overflow: hidden;
    margin-bottom: 2rem;
}

.image-compare {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    overflow: hidden;
    border-radius: 0.5rem;
}

.image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.image-wrapper.before {
    clip-path: polygon(0 0, 10% 0, 10% 100%, 0 100%);
    z-index: 2;
}

.image-wrapper.after {
    z-index: 1;
}

.slider-handle {
    position: absolute;
    top: 0;
    left: 10%;
    height: 100%;
    transform: translateX(-50%);
    z-index: 3;
    cursor: col-resize;
}

.slider-line {
    position: absolute;
    top: 0;
    left: 10%;
    width: 2px;
    height: 100%;
    background: var(--meleon-yellow);
    transform: translateX(-50%);
}

.slider-button {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    background: var(--meleon-green);
    color: var(--meleon-yellow);
    border: 2px solid var(--meleon-yellow);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    z-index: 4;
}

.title-overlay {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--meleon-primary);
  color: black;
  padding: 5px 15px;
  border-radius: 5px;
  font-size: 25px;
  font-weight: bold;
  text-align: left;
  z-index: 5;
  white-space: nowrap;
  min-width: max-content;
}
@media only screen and (max-width: 480px) {
  .title-overlay {
    font-size: 15px;
  }
}