/* ==========================================================================
   Celestial Solar Water Systems - Custom Styles
   ========================================================================== */

/* ==========================================================================
   FONTS
   ========================================================================== */

   @font-face {
    font-family: 'Zalando Sans';
    src: local('Zalando Sans'), local('ZalandoSans');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Zalando Sans';
    src: local('Zalando Sans Medium'), local('ZalandoSans-Medium');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Zalando Sans';
    src: local('Zalando Sans SemiBold'), local('ZalandoSans-SemiBold');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Zalando Sans';
    src: local('Zalando Sans Bold'), local('ZalandoSans-Bold');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  
  /* ==========================================================================
     KEYFRAME ANIMATIONS
     ========================================================================== */
  
  @keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(30px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes fadeInDown {
    0% {
      opacity: 0;
      transform: translateY(-30px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes fadeInLeft {
    0% {
      opacity: 0;
      transform: translateX(-30px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes fadeInRight {
    0% {
      opacity: 0;
      transform: translateX(30px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes scaleIn {
    0% {
      opacity: 0;
      transform: scale(0.9);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  @keyframes float {
    0%, 100% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-10px) rotate(2deg);
    }
  }
  
  /* ==========================================================================
     ANIMATION CLASSES
     ========================================================================== */
  
  .animate-fade-in {
    animation: fadeIn 0.6s ease forwards;
  }
  
  .animate-fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
  }
  
  .animate-fade-in-down {
    animation: fadeInDown 0.6s ease forwards;
  }
  
  .animate-fade-in-left {
    animation: fadeInLeft 0.6s ease forwards;
  }
  
  .animate-fade-in-right {
    animation: fadeInRight 0.8s ease forwards;
  }
  
  .animate-scale-in {
    animation: scaleIn 0.8s ease forwards;
  }
  
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }
  
  /* Float animation with entrance */
  .animate-float-delayed {
    animation: fadeInRight 0.8s ease forwards, float 6s ease-in-out 1.2s infinite;
  }
  
  /* ==========================================================================
     ANIMATION DELAYS (for staggered entrance animations)
     ========================================================================== */
  
  .delay-100 { animation-delay: 0.1s; }
  .delay-200 { animation-delay: 0.2s; }
  .delay-300 { animation-delay: 0.3s; }
  .delay-400 { animation-delay: 0.4s; }
  .delay-500 { animation-delay: 0.5s; }
  .delay-600 { animation-delay: 0.6s; }
  .delay-700 { animation-delay: 0.7s; }
  .delay-800 { animation-delay: 0.8s; }
  
  /* ==========================================================================
     ANIMATION UTILITIES
     ========================================================================== */
  
  /* Initial hidden state for animated elements */
  [x-cloak] {
    display: none !important;
  }
  
  /* Pause animation on hover */
  .hover-pause:hover {
    animation-play-state: paused;
  }
  
  /* ==========================================================================
     BUTTON EFFECTS
     ========================================================================== */
  
  /* Shimmer effect for buttons */
  .btn-shimmer {
    position: relative;
    overflow: hidden;
  }
  
  .btn-shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      transparent
    );
    transition: left 0.5s ease;
  }
  
  .btn-shimmer:hover::before {
    left: 100%;
  }
  
  /* ==========================================================================
     CUSTOM DROP SHADOWS (for complex shadows not supported by Tailwind)
     ========================================================================== */
  
  .shadow-25-badge {
    filter: drop-shadow(-24px 24px 32px rgba(13, 18, 22, 0.16))
            drop-shadow(56px 6px 24px rgba(13, 18, 22, 0.16));
  }

  /* ==========================================================================
     HERO SECTION
     ========================================================================== */

  .hero-bg-shell {
    background: linear-gradient(135deg, rgba(229, 239, 249, 0.5), rgba(255, 255, 255, 0.38));
  }

  .hero-bg-video {
    min-width: 100%;
    min-height: 100%;
    opacity: 0.34;
    transform: scale(1.02);
  }

  .hero-bg-overlay {
    background:
      radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 38%),
      linear-gradient(135deg, rgba(242, 248, 253, 0.72) 0%, rgba(255, 255, 255, 0.56) 52%, rgba(229, 239, 249, 0.68) 100%);
  }

  .hero-form-frame {
    display: block;
  }

  @media (max-width: 1023px) {
    .hero-form-frame {
      min-height: 740px;
    }
  }
  
  /* ==========================================================================
     LOGO MARQUEE ANIMATION
     ========================================================================== */
  
  @keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }
  
  .animate-marquee {
    animation: marquee 20s linear infinite;
    width: max-content;
  }
  
  .animation-paused {
    animation-play-state: paused;
  }
  
  /* ==========================================================================
     CONFETTI ANIMATION
     ========================================================================== */
  
  @keyframes confettiFloat {
    0%, 100% {
      transform: translateX(-50%) translateY(0) rotate(0deg);
    }
    25% {
      transform: translateX(-50%) translateY(-8px) rotate(0.5deg);
    }
    50% {
      transform: translateX(-50%) translateY(0) rotate(0deg);
    }
    75% {
      transform: translateX(-50%) translateY(-5px) rotate(-0.5deg);
    }
  }
  
  .animate-confetti-float {
    animation: confettiFloat 8s ease-in-out infinite;
  }
  
  /* ==========================================================================
     REDUCED MOTION
     ========================================================================== */
  
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }