/* ============================================================
   ANIMATIONS — Les Saveurs de Kianyz
   Animation pass only · WEB-880 (WEB-715 scope)
   ============================================================ */

/* Reduced-motion safety blanket — must remain intact */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

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

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

  @keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Soft pulse — 1 cycle = 3 s, never exceeds 3 flashes/s (WCAG 2.3.1) */
  @keyframes soft-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.68; }
  }

  /* ----------------------------------------------------------
     1. Hero entry — CSS keyframes, no JS required
  ---------------------------------------------------------- */
  .hero__eyebrow {
    animation: fade-slide-up 0.55s ease both;
    animation-delay: 0.05s;
  }

  .hero__title {
    animation: fade-slide-up 0.65s ease both;
    animation-delay: 0.18s;
  }

  .hero__desc {
    animation: fade-slide-up 0.55s ease both;
    animation-delay: 0.35s;
  }

  .hero__actions {
    animation: fade-slide-up 0.55s ease both;
    animation-delay: 0.50s;
  }

  .rating-badge {
    animation: fade-in 0.5s ease both;
    animation-delay: 0.65s;
  }

  .hero__visual {
    animation: fade-in 0.8s ease both;
    animation-delay: 0.22s;
  }

  /* ----------------------------------------------------------
     2. CTA bar — soft pulse on the phone link
  ---------------------------------------------------------- */
  .cta-bar a {
    animation: soft-pulse 3s ease-in-out infinite;
    display: inline-block;
  }

  /* ----------------------------------------------------------
     3. Buttons — scale + shadow on hover
  ---------------------------------------------------------- */
  .btn {
    transition: background 0.2s, color 0.2s, border-color 0.2s,
                transform 0.18s ease, box-shadow 0.18s ease;
  }

  .btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 18px rgba(194, 65, 12, 0.22);
  }

  .btn--accent:hover {
    box-shadow: 0 6px 18px rgba(13, 148, 136, 0.22);
  }

  .btn:active {
    transform: scale(0.97) !important;
    box-shadow: none !important;
  }

  /* ----------------------------------------------------------
     4. Form focus — border glow (complements existing border-color)
  ---------------------------------------------------------- */
  .form-group input,
  .form-group select,
  .form-group textarea {
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
  }

  /* ----------------------------------------------------------
     5. Focus-visible — accessible custom ring
  ---------------------------------------------------------- */
  :focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }

  /* ----------------------------------------------------------
     6. Visual placeholder — gradient shimmer on hover
  ---------------------------------------------------------- */
  .visual-placeholder {
    background-size: 200% 200%;
    transition: background-position 0.6s ease, transform 0.35s ease,
                box-shadow 0.35s ease;
  }

  /* Trigger when the placeholder itself or its parent card is hovered */
  .visual-placeholder:hover,
  .card:hover .visual-placeholder {
    background-position: 100% 100%;
  }

  /* ----------------------------------------------------------
     7. Scroll-reveal — class toggled by IntersectionObserver in main.js
        (replaces inline style injection; works without JS for static reads)
  ---------------------------------------------------------- */
  .fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.55s ease, transform 0.55s ease;
  }

  .fade-up.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Staggered entrance for grid children */
  .grid-3 > .fade-up:nth-child(1) { transition-delay: 0s; }
  .grid-3 > .fade-up:nth-child(2) { transition-delay: 0.10s; }
  .grid-3 > .fade-up:nth-child(3) { transition-delay: 0.20s; }

  .grid-2 > .fade-up:nth-child(1) { transition-delay: 0s; }
  .grid-2 > .fade-up:nth-child(2) { transition-delay: 0.12s; }

  /* ----------------------------------------------------------
     8. Section title & page-intro — gentle reveal
  ---------------------------------------------------------- */
  .section-title.fade-up { transition-delay: 0s; }
  .page-intro .fade-up   { transition-delay: 0s; }

}