/**
 * Gift Occasion Styles
 *
 * Occasion-specific theming and CTA urgency styling
 * Replaces seasonal.css with purchase-optimized design
 */

/* ============================================
   CSS Variables for Dynamic Theming
   ============================================ */
:root {
  /* Default (Birthday) */
  --occasion-primary: #6366F1;
  --occasion-secondary: #E0E7FF;
  --occasion-accent: #F59E0B;
}

/* ============================================
   Occasion-Specific Hero Styling
   ============================================ */

/* Valentine's Day */
body[data-occasion="valentine"] {
  --occasion-primary: #FF1744;
  --occasion-secondary: #FFE0E6;
  --occasion-accent: #C51162;
}

/* Hero background now defined in occasion-backgrounds.css */

/* White Day */
body[data-occasion="whiteDay"] {
  --occasion-primary: #FFFFFF;
  --occasion-secondary: #E3F2FD;
  --occasion-accent: #4FC3F7;
}

/* Mother's Day */
body[data-occasion="mothersDay"] {
  --occasion-primary: #E91E63;
  --occasion-secondary: #FCE4EC;
  --occasion-accent: #AD1457;
}

/* Father's Day */
body[data-occasion="fathersDay"] {
  --occasion-primary: #1565C0;
  --occasion-secondary: #BBDEFB;
  --occasion-accent: #FDD835;
}

/* お中元 */
body[data-occasion="ochugen"] {
  --occasion-primary: #0277BD;
  --occasion-secondary: #B3E5FC;
  --occasion-accent: #FFD700;
}

/* Halloween */
body[data-occasion="halloween"] {
  --occasion-primary: #FF6F00;
  --occasion-secondary: #4A148C;
  --occasion-accent: #000000;
}

/* Christmas */
body[data-occasion="christmas"] {
  --occasion-primary: #C62828;
  --occasion-secondary: #2E7D32;
  --occasion-accent: #FFD700;
}

/* お歳暮 */
body[data-occasion="oseibo"] {
  --occasion-primary: #1A237E;
  --occasion-secondary: #C5CAE9;
  --occasion-accent: #FFD700;
}

/* Birthday (Default) */
/* Hero backgrounds now defined in occasion-backgrounds.css */

/* ============================================
   CTA Button Urgency Styling
   ============================================ */

/* Urgency badge */
.cta-urgency-badge {
  display: inline-block;
  background: var(--occasion-accent);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  margin-right: 0.5rem;
  animation: pulse-urgency 2s ease-in-out infinite;
}

@keyframes pulse-urgency {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

/* High urgency (7 days or less) */
#start-button[data-urgency="high"] {
  animation: pulse-high 1.5s ease-in-out infinite;
  box-shadow: 0 0 20px rgba(255, 23, 68, 0.5);
}

#start-button[data-urgency="high"] .cta-urgency-badge {
  background: #FF1744;
  animation: pulse-urgency 1s ease-in-out infinite;
}

@keyframes pulse-high {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(255, 23, 68, 0.5);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 30px rgba(255, 23, 68, 0.7);
  }
}

/* Medium urgency (8-14 days) */
#start-button[data-urgency="medium"] {
  box-shadow: 0 0 15px rgba(255, 152, 0, 0.4);
}

#start-button[data-urgency="medium"] .cta-urgency-badge {
  background: #FF9800;
  animation: pulse-urgency 1.5s ease-in-out infinite;
}

/* ============================================
   Occasion-Specific Button Accents
   ============================================ */

body[data-occasion="valentine"] #start-button {
  background: linear-gradient(135deg, #FF1744 0%, #C51162 100%);
}

body[data-occasion="whiteDay"] #start-button {
  background: linear-gradient(135deg, #4FC3F7 0%, #0277BD 100%);
  border: 2px solid #FFD700;
}

body[data-occasion="mothersDay"] #start-button {
  background: linear-gradient(135deg, #E91E63 0%, #AD1457 100%);
}

body[data-occasion="fathersDay"] #start-button {
  background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);
}

body[data-occasion="ochugen"] #start-button {
  background: linear-gradient(135deg, #0277BD 0%, #01579B 100%);
}

body[data-occasion="halloween"] #start-button {
  background: linear-gradient(135deg, #FF6F00 0%, #4A148C 100%);
}

body[data-occasion="christmas"] #start-button {
  background: linear-gradient(135deg, #C62828 0%, #2E7D32 100%);
}

body[data-occasion="oseibo"] #start-button {
  background: linear-gradient(135deg, #1A237E 0%, #0D47A1 100%);
  border: 1px solid #FFD700;
}

body[data-occasion="birthday"] #start-button {
  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
}

/* ============================================
   Accessibility: Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .cta-urgency-badge,
  #start-button[data-urgency="high"],
  #start-button[data-urgency="medium"] {
    animation: none !important;
  }

  body[data-occasion] .hero {
    background: none;
  }
}

/* ============================================
   Mobile Optimization
   ============================================ */
@media (max-width: 768px) {
  .cta-urgency-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
  }

  #start-button[data-urgency="high"],
  #start-button[data-urgency="medium"] {
    box-shadow: none; /* Reduce visual complexity on mobile */
  }
}