/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  /* Hero gradient background */
  .hero-gradient {
    background: linear-gradient(135deg, #000000 0%, #0a1a0a 50%, #001a00 100%);
  }

  /* Gradient text effect - Emerald to Blue */
  .gradient-text {
    background: linear-gradient(90deg, #10b981 0%, #06b6d4 50%, #3b82f6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Glass card effect with blur and transparency */
  .glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  /* Hover effect with glow - Emerald & Blue */
  .glow-hover {
    transition: all 0.3s ease;
  }

  .glow-hover:hover {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.4),
                0 0 40px rgba(6, 182, 212, 0.25),
                0 0 60px rgba(59, 130, 246, 0.15);
    transform: translateY(-2px);
  }

  /* Button with gradient background - Green to Blue */
  .btn-gradient {
    background: linear-gradient(90deg, #10b981 0%, #3b82f6 100%);
    transition: all 0.3s ease;
    color: #fff;
  }

  .btn-gradient:hover {
    background: linear-gradient(90deg, #059669 0%, #2563eb 100%);
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.5);
  }

  /* Scroll indicator animation */
  @keyframes bounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  .scroll-indicator {
    animation: bounce 2s infinite;
  }

  /* Accordion transition */
  .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
  }

  .accordion-content.expanded {
    max-height: 1000px;
    transition: max-height 0.5s ease-in;
  }
}