/* =============================================================
   GLACES EVY — Pass animations (Template P · WebStudio Caraïbes)
   CSS-first · works with is-visible class from main.js IO
   prefers-reduced-motion: reduce honored (section 17 styles.css)
   ============================================================= */

/* ----------------------------------------------------------
   Keyframes
   ---------------------------------------------------------- */
@keyframes anim-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes anim-slide-in {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes anim-bounce-y {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(7px); }
}

/* ----------------------------------------------------------
   All motion wrapped: prefers-reduced-motion: no-preference
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

  /* ── 1. Generic scroll-reveal initial state ── */

  [data-animate] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.65s ease, transform 0.65s ease;
  }

  [data-animate].is-visible {
    opacity: 1;
    transform: none;
  }

  /* ── 2. Hero entrance — stagger via transition-delay
          IO fires immediately for in-viewport elements;
          delays create the entrance cascade.            ── */

  .hero-monument .eyebrow[data-animate]   { transition-delay: 0.1s; }
  .hero-monument h1[data-animate]         { transition-delay: 0.35s; }
  .hero-monument .hero-sub[data-animate]  { transition-delay: 0.65s; }
  .hero-monument .hero-ctas[data-animate] { transition-delay: 0.9s; }

  /* ── 3. About section — slight pull-quote delay ── */

  .about-text[data-animate]      { transition-delay: 0s; }
  .about-pullquote[data-animate] { transition-delay: 0.15s; }

  /* ── 4. Scroll-down arrow — gentle infinite bounce ── */

  .scroll-down {
    animation: anim-bounce-y 2s ease-in-out infinite;
    animation-delay: 1.3s;
  }

  /* ── 5. Saveur list — container transparent, items stagger ──
          Container [data-animate] gets is-visible; items animate
          via keyframes so hover transitions are clean after.   ── */

  .saveurs-list[data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .saveurs-list .saveur-item {
    opacity: 0;
  }

  .saveurs-list.is-visible .saveur-item:nth-child(1) {
    animation: anim-slide-in 0.55s ease both 0.06s;
  }
  .saveurs-list.is-visible .saveur-item:nth-child(2) {
    animation: anim-slide-in 0.55s ease both 0.21s;
  }
  .saveurs-list.is-visible .saveur-item:nth-child(3) {
    animation: anim-slide-in 0.55s ease both 0.36s;
  }

  /* ── 6. Reviews grid — cards stagger via keyframes ── */

  .reviews-grid[data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .reviews-grid .review-card {
    opacity: 0;
  }

  .reviews-grid.is-visible .review-card:nth-child(1) {
    animation: anim-fade-up 0.55s ease both 0.05s;
  }
  .reviews-grid.is-visible .review-card:nth-child(2) {
    animation: anim-fade-up 0.55s ease both 0.22s;
  }
  .reviews-grid.is-visible .review-card:nth-child(3) {
    animation: anim-fade-up 0.55s ease both 0.39s;
  }

  /* ── 7. Review card hover lift — no delay conflict post-reveal ── */

  .review-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease,
                border-top-color 0.2s ease;
  }

  .review-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
    border-top-color: var(--color-primary);
  }

  /* ── 8. Saveur number — warm accent on row hover ── */

  .saveur-number {
    transition: color 0.2s ease;
  }

  .saveur-item:hover .saveur-number {
    color: var(--color-primary);
  }

  /* ── 9. Button micro-lift ── */

  .btn {
    transition: background-color 250ms ease,
                color 250ms ease,
                border-color 250ms ease,
                transform 0.18s ease,
                box-shadow 0.18s ease;
  }

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

  .btn:active {
    transform: translateY(0);
    box-shadow: none;
  }

  /* ── 10. Nav animated underline sweep (desktop) ── */

  .nav-menu a {
    position: relative;
    text-decoration: none !important;
  }

  .nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0.75rem;
    right: 0.75rem;
    height: 1.5px;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
  }

  .nav-menu a:hover::after,
  .nav-menu a:focus-visible::after {
    transform: scaleX(1);
  }

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