/* animations.css — Template G — Centre des Arts et de la Culture
   CSS-first. IntersectionObserver vanilla (fallback timeline seul). */

/* Keyframes */
@keyframes cac-fade-up {
  from { opacity: 0; transform: translateY(var(--cac-y, 18px)); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cac-logo-in {
  from { opacity: 0.55; transform: scale(0.96); }
  to   { opacity: 1;    transform: scale(1); }
}
@keyframes cac-focus-ring {
  from { outline-offset: 0px; outline-color: transparent; }
  to   { outline-offset: 4px; outline-color: var(--color-secondary, #F59E0B); }
}

@media (prefers-reduced-motion: no-preference) {

  /* Amplitude réduite sur mobile */
  @media (max-width: 640px) {
    .hero-eyebrow, .hero h1, .hero-lead, .hero-cta-group { --cac-y: 8px; }
  }

  /* 1. Hero cascade */
  .hero-eyebrow { animation: cac-fade-up 300ms ease both; }
  .hero h1      { animation: cac-fade-up 350ms 80ms ease both; }
  .hero-lead    { animation: cac-fade-up 350ms 160ms ease both; }
  .hero-cta-group { animation: cac-fade-up 300ms 240ms ease both; }

  /* 2. Logo load ≤ 300 ms */
  .site-logo img, .site-logo svg {
    animation: cac-logo-in 260ms ease-out both;
  }

  /* 3. Page header interne */
  .page-header-content { animation: cac-fade-up 380ms 60ms ease both; }

  /* 4. Cards hover */
  .card {
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  }
  .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(13,110,130,0.14);
    border-color: rgba(194,65,12,0.4);
  }
  /* Soulignement terracotta sur h3 */
  .card h3 {
    background-image: linear-gradient(var(--color-accent,#C2410C), var(--color-accent,#C2410C));
    background-size: 0% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 220ms ease;
    padding-bottom: 1px;
  }
  .card:hover h3 { background-size: 100% 2px; }

  .activity-card {
    transition: transform 200ms ease, box-shadow 200ms ease;
  }
  .activity-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.09); }

  .event-card {
    transition: transform 200ms ease, box-shadow 200ms ease;
  }
  .event-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(13,110,130,0.15); }

  @media (max-width: 640px) {
    .card:hover, .event-card:hover { transform: translateY(-1px); }
  }

  /* 5. Boutons */
  .btn {
    transition: transform 150ms ease, background-color 180ms ease,
                border-color 180ms ease, color 180ms ease;
  }
  .btn:hover  { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }

  /* 6. Liens & focus */
  .nav-list a { transition: color 150ms ease, background-color 150ms ease; }
  .footer-nav a { transition: color 150ms ease; }
  .review-badge { transition: transform 200ms ease, box-shadow 200ms ease; }
  .review-badge:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
  :focus-visible { animation: cac-focus-ring 180ms ease forwards; }

  /* 7. Timeline scroll-driven (histoire.html) — Chrome 115+, FF 128+, Safari 18+ */
  @supports (animation-timeline: view()) {
    .timeline-item {
      animation: cac-fade-up 650ms ease both;
      animation-timeline: view();
      animation-range: entry 0% entry 38%;
    }
  }
  /* Fallback IO (script dans histoire.html) */
  .timeline-item[data-reveal="pending"] {
    opacity: 0; transform: translateY(24px);
    transition: opacity 600ms ease, transform 600ms ease;
  }
  .timeline-item[data-reveal="done"] { opacity: 1; transform: none; }

  /* 8. Stat bar hover */
  .stat-item { transition: background-color 150ms ease; }
  .stat-item:hover { background-color: rgba(255,255,255,0.06); }

} /* end prefers-reduced-motion: no-preference */

/* Filet de sécurité */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}