/* ==========================================================================
   Animations Module — Transitions, Hover Effects, Scroll-Triggered Fades
   Mobile-first: base styles target mobile, min-width queries enhance.
   Only animates: color, background-color, opacity, transform, box-shadow
   ========================================================================== */

/* ==========================================================================
   1. Scroll-Triggered Fade-In Animations
   ========================================================================== */

.fade-in-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.fade-in-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   2. Hover Transitions — Buttons
   Animated properties: background-color, transform, box-shadow
   ========================================================================== */

/* Modern submit button hover (contact form) */
.contact-form .btn-submit {
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.contact-form .btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.contact-form .btn-submit:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Legacy .btn3 button hover — modernize with transitions */
.btn3 {
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn3:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn3:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   3. Hover Transitions — Links
   Animated properties: color, opacity
   Nav and footer links already have transitions in components.css.
   These rules add hover opacity treatment for general content links.
   ========================================================================== */

/* General content links (not in nav/footer — those are handled in components.css) */
.menu-section a,
.breakfast-menu a,
.contact-section a:not(.btn-submit) {
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

.menu-section a:hover,
.breakfast-menu a:hover,
.contact-section a:not(.btn-submit):hover {
  opacity: 0.8;
}

/* ==========================================================================
   4. Hover Transitions — Cards and Containers
   Animated properties: transform, box-shadow
   Modern card styling: border-radius, box-shadow, backdrop-filter
   ========================================================================== */

/* Info cards (contact page) — add hover lift effect */
.info-card {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.info-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Menu categories — modern card styling with hover */
.menu-category {
  background-color: var(--color-neutral-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.menu-category:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Breakfast categories — modern card styling with hover */
.breakfast-category {
  background-color: var(--color-neutral-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.breakfast-category:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   5. Modern Container Styling
   Replace flat solid borders with border-radius, box-shadow, backdrop-filter
   ========================================================================== */

/* Contact map container — rounded corners */
.contact-map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* Menu section containers — subtle rounded corners for modern feel */
.menu-section .container,
.breakfast-menu .container {
  border-radius: var(--radius-lg);
}

/* Mobile overlay — backdrop-filter for depth (used sparingly) */
.mobile-overlay::before {
  backdrop-filter: blur(4px);
}

/* ==========================================================================
   6. Prefers Reduced Motion
   Disables ALL CSS transitions, transforms, and opacity animations when
   the user has prefers-reduced-motion enabled. Duration becomes 0ms
   (effectively instant state changes). Content remains fully visible and
   layout is preserved.
   Requirements: 8.3, 8.4
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  /* --- Global: disable all transitions and animations site-wide ---
     This catches every element including pseudo-elements.
     Using 0.01ms (effectively 0ms / instant) preserves state changes
     while eliminating perceptible motion. */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* --- Scroll-triggered fade-in: make content immediately visible ---
     Elements must never be hidden (opacity: 0) under reduced motion;
     layout and content visibility are preserved. */
  .fade-in-section {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .fade-in-section.is-visible {
    opacity: 1;
    transform: none;
  }

  /* --- Button hover transitions: disable transforms/shadows --- */
  .contact-form .btn-submit,
  .btn3 {
    transition: none !important;
  }

  .contact-form .btn-submit:hover,
  .contact-form .btn-submit:active,
  .btn3:hover,
  .btn3:active {
    transform: none !important;
    box-shadow: none;
  }

  /* --- Card/container hover transitions: disable lift effects --- */
  .info-card,
  .menu-category,
  .breakfast-category {
    transition: none !important;
  }

  .info-card:hover,
  .menu-category:hover,
  .breakfast-category:hover {
    transform: none !important;
    box-shadow: var(--shadow-sm);
  }

  /* --- Navigation header transitions: instant background change --- */
  .site-header {
    transition: none !important;
  }

  .nav-links a,
  .nav-social a {
    transition: none !important;
  }

  .hamburger-line {
    transition: none !important;
  }

  /* --- Mobile overlay transitions: instant open/close --- */
  .mobile-overlay {
    transition: none !important;
  }

  .mobile-overlay::before {
    transition: none !important;
    backdrop-filter: none;
  }

  .mobile-overlay-inner {
    transition: none !important;
  }

  .mobile-overlay-close {
    transition: none !important;
  }

  .mobile-nav-links li a {
    transition: none !important;
  }

  .mobile-nav-social a {
    transition: none !important;
  }

  /* --- Footer transitions: disable --- */
  .footer-social a {
    transition: none !important;
  }

  /* --- Content link transitions: disable --- */
  a,
  .menu-section a,
  .breakfast-menu a,
  .contact-section a {
    transition: none !important;
  }

  /* --- Contact form input focus transitions: disable --- */
  .contact-form .form-group input,
  .contact-form .form-group textarea {
    transition: none !important;
  }

  /* --- Parallax / scroll-based motion: replace with static background ---
     background-attachment: fixed can cause perceptible motion when
     scrolling (background stays fixed while content moves). Under
     reduced motion, use scroll (static) so background does not
     reposition relative to content on scroll.
     Requirement 8.3: fixed-position or static background — no
     repositioning on scroll. */
  .parallax0,
  .parallax100,
  .header-intro,
  .section-video,
  .breakfast-header,
  .hero,
  [style*="background-attachment"] {
    background-attachment: scroll !important;
  }
}