/* ==========================================================================
   Easter Theme - Variables
   ========================================================================== */
   :root {
    /* Core Easter Palette */
    --easter-primary: #e6c0d4;    /* Light Pink */
    --easter-secondary: #b5d1e8;   /* Light Blue */
    --easter-accent: #f7e4b0;     /* Light Yellow */
    --easter-bg: #fcfcff;          /* White Background */
    --easter-text: #4a4558;       /* Muted Purple Text */
    --easter-shadow: rgba(74, 69, 88, 0.12); /* Shadow based on text color */
  
    /* Spring Pastel Palette */
    --spring-mint: #dae6da;
    --spring-peach: #e8d6d0;
    --spring-lavender: #e0d6e6;
    --spring-sky: #d6e6f0;
  
    /* Utility Colors */
    --color-positive-easter: #4CAF50; /* Green for Pros */
    --color-neutral-easter: #FFB74D;  /* Orange for Neutral */
    --color-negative-easter: #EF5350; /* Red for Cons */
    --color-white-translucent-weak: rgba(255, 255, 255, 0.4);
    --color-white-translucent-medium: rgba(255, 255, 255, 0.5);
    --color-white-translucent-strong: rgba(255, 255, 255, 0.8);
    --color-white-translucent-border: rgba(255, 255, 255, 0.7);
  
    /* Gradients */
    --gradient-pastel-rainbow: linear-gradient(
      90deg,
      var(--spring-peach),
      var(--spring-lavender),
      var(--spring-mint),
      var(--spring-sky)
    );
    --gradient-button-bg: linear-gradient(
      135deg,
      var(--color-white-translucent-strong),
      var(--color-white-translucent-weak)
    );
  }
  
  /* ==========================================================================
     Easter Theme - Base Styles
     ========================================================================== */
  body.easter-theme {
    background: var(--easter-bg);
    background-image: 
      radial-gradient(circle at 15% 15%, var(--spring-peach) 0%, transparent 45%),
      radial-gradient(circle at 85% 85%, var(--spring-lavender) 0%, transparent 45%),
      radial-gradient(circle at 50% 50%, var(--spring-sky) 0%, transparent 55%);
    color: var(--easter-text);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Example font */
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  /* Header Easter Styling */
  body.easter-theme header {
    background: rgba(252, 252, 255, 0.85);
    border-bottom: 1px solid rgba(230, 192, 212, 0.2);
    box-shadow: 0 2px 20px var(--easter-shadow);
  }
  
  body.easter-theme .nav-link {
    color: var(--easter-text);
    opacity: 0.85;
    transition: all 0.3s ease;
  }
  
  body.easter-theme .nav-link:hover {
    color: var(--easter-primary);
    opacity: 1;
  }
  
  body.easter-theme .logo-text {
    background: linear-gradient(45deg, var(--easter-primary), var(--easter-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  
  /* ==========================================================================
     Easter Theme - Card Styling
     ========================================================================== */
  body.easter-theme .card {
    background: rgba(252, 252, 255, 0.75);
    border: none;
    box-shadow: 
      0 8px 32px var(--easter-shadow),
      inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: float 6s ease-in-out infinite;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
  }
  
  body.easter-theme .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
      var(--spring-peach),
      var(--spring-lavender),
      var(--spring-mint),
      var(--spring-sky)
    );
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  body.easter-theme .card:hover::before {
    opacity: 0.7;
  }
  
  body.easter-theme .card:hover {
    transform: translateY(-8px);
    box-shadow: 
      0 12px 48px var(--easter-shadow),
      inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  }
  
  /* Card Content Styling */
  body.easter-theme .card-title {
    color: var(--easter-text);
    font-weight: 600;
    letter-spacing: -0.02em;
  }
  
  body.easter-theme .card-description {
    color: var(--easter-text);
    opacity: 0.85;
  }
  
  body.easter-theme .pros {
    color: #7fb992;
  }
  
  body.easter-theme .neutral {
    color: #d4b87f;
  }
  
  body.easter-theme .cons {
    color: #d47f7f;
  }
  
  /* Card Type Icons (e.g., platform icons) */
  body.easter-theme .card-types img {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s ease;
    opacity: 0.9;
  }
  
  body.easter-theme .card-types img:hover {
    transform: scale(1.15);
    opacity: 1;
  }
  
  /* ==========================================================================
     Easter Theme - Button Styling
     ========================================================================== */
  body.easter-theme .card-button {
    background: linear-gradient(135deg, 
      rgba(252, 252, 255, 0.9),
      rgba(252, 252, 255, 0.5)
    ) !important;
    border: 1px solid rgba(230, 192, 212, 0.3) !important;
    color: var(--easter-text) !important;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
  }
  
  body.easter-theme .card-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg,
      var(--spring-peach),
      var(--spring-lavender),
      var(--spring-mint),
      var(--spring-sky)
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
  }
  
  body.easter-theme .card-button:hover {
    transform: translateY(-2px);
    border-color: rgba(230, 192, 212, 0.5) !important;
  }
  
  body.easter-theme .card-button:hover::before {
    opacity: 0.15;
  }
  
  /* ==========================================================================
     Easter Theme - Animations & Particles
     ========================================================================== */
  
  /* Card Floating Animation */
  @keyframes float {
    0%, 100% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-10px) rotate(0.5deg); /* Slight rotation for playful float */
    }
  }
  
  /* Easter Egg Particle Animation */
  @keyframes eggFloat {
    0% {
      transform: translateY(100vh) rotate(0deg) scale(0.8); /* Start smaller */
      opacity: 0;
    }
    10% {
      opacity: 0.7; /* Fade in */
    }
    90% {
      opacity: 0.7; /* Hold opacity */
    }
    100% {
      transform: translateY(-20vh) rotate(360deg) scale(1.2); /* Grow slightly as it exits */
      opacity: 0;
    }
  }
  
  /* Container for Easter Particles (like floating eggs) */
  .easter-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allows clicks to pass through */
    z-index: 0;
    overflow: hidden; /* Prevent scrollbars if eggs go outside slightly */
  }
  
  /* Individual Easter Egg Particle */
  .easter-egg {
    position: fixed;
    pointer-events: none;
    z-index: 10;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  }
  
  .easter-egg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  /* ==========================================================================
     Easter Theme - Responsive Adjustments
     ========================================================================== */
  @media (max-width: 768px) {
    body.easter-theme .card {
      animation: none; /* Disable float animation on smaller screens for performance */
    }
  
    .easter-particles {
      opacity: 0.5;
    }
  
    body.easter-theme {
      background-image: 
        radial-gradient(circle at 15% 15%, var(--spring-peach) 0%, transparent 65%),
        radial-gradient(circle at 85% 85%, var(--spring-lavender) 0%, transparent 65%),
        radial-gradient(circle at 50% 50%, var(--spring-sky) 0%, transparent 75%);
    }
  }
  
  /* Optional: Reduce motion preference */
  @media (prefers-reduced-motion: reduce) {
    body.easter-theme .card,
    body.easter-theme .card-button,
    body.easter-theme .card .card-types img,
    .easter-theme-toggle {
      animation: none !important;
      transition-duration: 0.01ms !important; /* Effectively disable transitions */
    }
  
    .easter-particles,
    .easter-egg {
      display: none !important;
    }
  }