/* Custom CSS for preview */

@layer base {
  body { 
    background-color: #0A0A0A; 
    color: #e5e2e1; 
  }
}

@layer components {
  .bg-light-section { 
    background-color: #F2F2F0; 
    color: #0A0A0A; 
  }
  .bg-light-section .text-on-surface-variant { 
    color: #454747; 
  }
  .bg-light-section .border-white\/10 { 
    border-color: rgba(0,0,0,0.1); 
  }

  .material-symbols-outlined { 
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; 
  }
  
  .hex-bg { 
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); 
  }
  
  .divider-thin { 
    background: rgba(255, 255, 255, 0.1); 
  }
  
  .glass-header { 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px); 
  }
  
  .bento-card { 
    border: 1px solid rgba(255, 255, 255, 0.08); 
    background: #111318; 
    border-radius: 16px; 
  }
  
  .bg-light-section .bento-card { 
    border: 1px solid rgba(0, 0, 0, 0.08); 
    background: #ffffff; 
  }
  
  .red-btn { 
    background-color: #d32f2f; 
    color: white; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    transition: all 0.3s ease; 
  }
  
  .red-btn:hover { 
    background-color: #b71c1c; 
    transform: translateY(-2px); 
  }
  
  /* Form Status */
  .form-success-msg {
    display: none;
    color: #ffb3ac;
    margin-top: 10px;
    font-size: 0.875rem;
  }
  
  /* Scroll Reveal */
  .reveal { 
    opacity: 0; 
    transform: translateY(30px); 
    transition: all 0.8s ease-out; 
  }
  .reveal.active { 
    opacity: 1; 
    transform: translateY(0); 
  }
  
  /* Respect prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    .reveal {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Pure CSS Slideshow for Men's Guide */
  .slide-1, .slide-2 {
      opacity: 0;
      pointer-events: none;
  }

  /* Hover effect on desktop */
  @media (hover: hover) {
      .bento-card:hover .slide-1 {
          animation: slideFade1 4.5s infinite;
      }
      .bento-card:hover .slide-2 {
          animation: slideFade2 4.5s infinite;
      }
  }

  /* Auto-play on mobile */
  @media (hover: none) {
      .slide-1 {
          animation: slideFade1 4.5s infinite;
      }
      .slide-2 {
          animation: slideFade2 4.5s infinite;
      }
  }

  @keyframes slideFade1 {
      0%, 25% { opacity: 0; }
      33.33%, 58.33% { opacity: 1; }
      66.66%, 100% { opacity: 0; }
  }

  @keyframes slideFade2 {
      0%, 58.33% { opacity: 0; }
      66.66%, 91.66% { opacity: 1; }
      100% { opacity: 0; }
  }
}

/* Fix for Elementor Editor Invisibility */
body.elementor-editor-active .reveal {
    opacity: 1 !important;
    transform: none !important;
}