/*
 * Tasteful Animations for Curated Party Design
 * Elegant, refined motion that enhances without distracting
 */

/* ============================================
   SCROLL-TRIGGERED REVEAL ANIMATIONS
   ============================================ */

/* Base state for animated elements */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade from left (for alternating layouts) */
.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Fade from right */
.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale reveal (subtle zoom effect) */
.reveal-scale {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* ============================================
   STAGGERED ANIMATIONS FOR GRIDS
   ============================================ */

/* Parent container for staggered children */
.stagger-container .stagger-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.stagger-container.visible .stagger-item {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for up to 12 items */
.stagger-container.visible .stagger-item:nth-child(1) { transition-delay: 0ms; }
.stagger-container.visible .stagger-item:nth-child(2) { transition-delay: 80ms; }
.stagger-container.visible .stagger-item:nth-child(3) { transition-delay: 160ms; }
.stagger-container.visible .stagger-item:nth-child(4) { transition-delay: 240ms; }
.stagger-container.visible .stagger-item:nth-child(5) { transition-delay: 320ms; }
.stagger-container.visible .stagger-item:nth-child(6) { transition-delay: 400ms; }
.stagger-container.visible .stagger-item:nth-child(7) { transition-delay: 480ms; }
.stagger-container.visible .stagger-item:nth-child(8) { transition-delay: 560ms; }
.stagger-container.visible .stagger-item:nth-child(9) { transition-delay: 640ms; }
.stagger-container.visible .stagger-item:nth-child(10) { transition-delay: 720ms; }
.stagger-container.visible .stagger-item:nth-child(11) { transition-delay: 800ms; }
.stagger-container.visible .stagger-item:nth-child(12) { transition-delay: 880ms; }

/* ============================================
   HOVER EFFECTS
   ============================================ */

/* Card lift effect */
.hp-card,
.hp-ig-card {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hp-card:hover,
.hp-ig-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(28, 20, 40, 0.12);
}

/* Button hover effects */
.btn {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(204, 0, 96, 0.25);
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(204, 0, 96, 0.2);
}

/* Secondary button specific */
.btn-secondary:hover {
  box-shadow: 0 4px 12px rgba(28, 20, 40, 0.15);
}

/* Link hover underline animation */
.hp-feature-link,
.hp-ig-handle a {
  position: relative;
  text-decoration: none;
}

.hp-feature-link::after,
.hp-ig-handle a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--terracotta);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hp-feature-link:hover::after,
.hp-ig-handle a:hover::after {
  width: 100%;
}

/* County pills hover */
.county-pill {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.county-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(28, 20, 40, 0.1);
}

/* Quick prompt buttons */
.quick-prompt-btn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.quick-prompt-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 12px rgba(28, 20, 40, 0.12);
  background: var(--terracotta);
  color: white;
}

/* ============================================
   HERO ANIMATIONS
   ============================================ */

/* Hero content entrance */
.hero-premium-inner {
  opacity: 0;
  animation: heroFadeIn 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero pill subtle pulse */
.hero-pill {
  animation: subtlePulse 3s ease-in-out infinite;
}

@keyframes subtlePulse {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(204, 0, 96, 0.15);
  }
  50% {
    box-shadow: 0 4px 16px rgba(204, 0, 96, 0.25);
  }
}

/* Stagger hero elements */
.hero-premium-inner > * {
  opacity: 0;
  animation: heroStagger 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.hero-premium-inner > *:nth-child(1) { animation-delay: 0.1s; }
.hero-premium-inner > *:nth-child(2) { animation-delay: 0.2s; }
.hero-premium-inner > *:nth-child(3) { animation-delay: 0.3s; }
.hero-premium-inner > *:nth-child(4) { animation-delay: 0.4s; }
.hero-premium-inner > *:nth-child(5) { animation-delay: 0.5s; }

@keyframes heroStagger {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   AI WIDGET ANIMATIONS
   ============================================ */

/* AI panel slide in */
#ai-panel {
  transform: translateY(20px) scale(0.95);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#ai-panel.open {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* AI toggle button bounce */
#ai-toggle {
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55),
              box-shadow 0.3s ease;
}

#ai-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(204, 0, 96, 0.3);
}

#ai-toggle:active {
  transform: scale(0.95);
}

/* AI message fade in */
.ai-msg {
  animation: messageSlide 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes messageSlide {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Typing indicator animation */
.ai-typing {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
}

.ai-typing span {
  width: 8px;
  height: 8px;
  background: var(--sage);
  border-radius: 50%;
  animation: typingBounce 1.4s ease-in-out infinite;
}

.ai-typing span:nth-child(1) { animation-delay: 0s; }
.ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-8px);
  }
}

/* ============================================
   NAVIGATION ANIMATIONS
   ============================================ */

/* Nav link underline */
.nav-links a {
  position: relative;
  transition: color 0.2s ease;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--terracotta);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
  left: 0;
}

/* Mobile nav slide */
.nav-links.open {
  animation: navSlide 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes navSlide {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   SECTION DIVIDER ANIMATION
   ============================================ */

.hp-divider {
  position: relative;
  overflow: hidden;
}

.hp-divider::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sage), transparent);
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.hp-divider.visible::before {
  width: 100%;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .stagger-container .stagger-item {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
  
  .hero-premium-inner,
  .hero-premium-inner > *,
  .hero-pill {
    opacity: 1;
    transform: none;
    animation: none;
  }
  
  #ai-panel {
    transform: none;
    opacity: 1;
    transition: none;
  }
  
  .ai-msg {
    animation: none;
  }
  
  .hp-divider::before {
    width: 100%;
    transition: none;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Instant reveal (no animation) */
.reveal-instant {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Delay modifiers */
.delay-100 { transition-delay: 100ms !important; }
.delay-200 { transition-delay: 200ms !important; }
.delay-300 { transition-delay: 300ms !important; }
.delay-400 { transition-delay: 400ms !important; }
.delay-500 { transition-delay: 500ms !important; }

/* Duration modifiers */
.duration-300 { transition-duration: 300ms !important; }
.duration-500 { transition-duration: 500ms !important; }
.duration-700 { transition-duration: 700ms !important; }
.duration-1000 { transition-duration: 1000ms !important; }

/* ============================================
   MOBILE RESPONSIVE FIXES
   ============================================ */

/* Budget Planner Section */
.budget-planner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

@media (max-width: 768px) {
  .budget-planner-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .budget-calculator-card {
    order: -1; /* Show calculator first on mobile */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 1.5rem !important;
    overflow-x: hidden;
  }
  
  .budget-calculator-card > div {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* Budget Tier Buttons - 4 columns on desktop, 2x2 on mobile */
.budget-tier-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

@media (max-width: 639px) {
  .budget-tier-buttons {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .budget-calculator-card {
    padding: 1rem !important;
  }
  
  .budget-calculator-card div[style*="font-size:2.5rem"] {
    font-size: 1.75rem !important;
  }
  
  .budget-calculator-card div[style*="font-size:0.85rem"] {
    font-size: 0.75rem !important;
  }
  
  .budget-calculator-card div[style*="font-size:0.7rem"] {
    font-size: 0.65rem !important;
  }
}

/* AI Quick Prompts - allow wrapping on mobile */
.ai-quick-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.ai-quick-prompts .quick-prompt-btn {
  flex: 1 1 auto;
  min-width: 120px;
  max-width: 200px;
}

@media (max-width: 639px) {
  .ai-quick-prompts .quick-prompt-btn {
    flex: 1 1 45%;
    max-width: none;
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
  }
}

/* Hero CTA buttons - stack on mobile */
.hero-cta-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (max-width: 639px) {
  .hero-cta-group {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .hero-cta-group .btn {
    width: 100%;
    text-align: center;
  }
}

/* County pills - allow wrapping */
.hero-counties-premium {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 639px) {
  .hero-counties-premium .county-pill {
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
  }
}

/* AI Inline Box - full width on mobile */
@media (max-width: 639px) {
  .ai-inline-box {
    margin: 0 -1rem;
    border-radius: 0;
  }
  
  .ai-inline-input-row {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .ai-inline-input-row input {
    width: 100%;
  }
  
  .ai-inline-input-row button {
    width: 100%;
    padding: 0.75rem;
  }
}

/* Container padding adjustment on mobile */
@media (max-width: 639px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Prevent horizontal overflow */
  body {
    overflow-x: hidden;
  }
  
  /* Ensure images don't overflow */
  img {
    max-width: 100%;
    height: auto;
  }
}

/* ============================================
   HOVER MICRO-INTERACTIONS
   Modern hover effects for interactive elements
   ============================================ */

/* Button hover effects */
.btn {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-primary:hover {
  background-color: var(--terracotta-dark, #A0004A);
  box-shadow: 0 4px 14px rgba(204, 0, 96, 0.3);
}

.btn-secondary:hover {
  background-color: var(--sage, #B8AECE);
  color: white;
}

/* Card hover effects */
.hp-card,
.hp-ig-card,
.budget-calculator-card {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hp-card:hover,
.hp-ig-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.budget-calculator-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.15);
}

/* Link hover effects */
a:not(.btn) {
  transition: color 0.2s ease;
}

.hp-feature-link {
  position: relative;
  display: inline-block;
}

.hp-feature-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--terracotta);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hp-feature-link:hover::after {
  width: 100%;
}

/* Navigation link hover */
.nav-links a {
  position: relative;
  transition: color 0.2s ease;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--terracotta);
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-links a:hover::after {
  width: 100%;
}

/* Quick prompt button hover */
.quick-prompt-btn {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.2s ease,
              box-shadow 0.2s ease;
}

.quick-prompt-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* AI widget button hover */
#ai-toggle {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s ease;
}

#ai-toggle:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Instagram card hover */
.hp-ig-avatar {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hp-ig-card:hover .hp-ig-avatar {
  transform: scale(1.05);
}

/* County pill hover */
.county-pill {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.county-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Budget tier button hover effect */
.budget-tier-buttons > div {
  transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.budget-tier-buttons > div:hover {
  transform: scale(1.02);
  border-color: var(--terracotta);
  box-shadow: 0 2px 8px rgba(204, 0, 96, 0.15);
}

/* Hero tag/pill hover */
.hero-pill, .hero-tag {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-pill:hover, .hero-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .hp-card,
  .hp-ig-card,
  .budget-calculator-card,
  a:not(.btn),
  .quick-prompt-btn,
  #ai-toggle,
  .county-pill,
  .budget-tier-buttons > div {
    transition: none !important;
    transform: none !important;
  }
  
  .hp-feature-link::after,
  .nav-links a::after {
    transition: none !important;
  }
}