/* === Queens Boutique FWI — Motion Pass (WEB-3087) === */
/* Template : fashion boutique mode curvy — navy / sky / amber */

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

  /* ------------------------------------------------------------------ */
  /* 1. Hero cascade — entrée de page (index.html uniquement)            */
  /* ------------------------------------------------------------------ */
  @keyframes fade-up {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .hero-tagline                    { animation: fade-up .50s ease .05s both; }
  .hero-content h1                 { animation: fade-up .65s ease .18s both; }
  .hero-content p                  { animation: fade-up .60s ease .32s both; }
  .hero-content .btn-group         { animation: fade-up .55s ease .46s both; }
  .hero-inner > div[aria-hidden]   { animation: fade-up .70s ease .56s both; }

  /* ------------------------------------------------------------------ */
  /* 2. Scroll reveal — piloté par l'IO de main.js (classe .visible)     */
  /* ------------------------------------------------------------------ */
  .fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .65s ease, transform .65s ease;
  }
  .fade-in.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Cascades en grille — feature cards */
  .feature-cards .feature-card:nth-child(2) { transition-delay: .10s; }
  .feature-cards .feature-card:nth-child(3) { transition-delay: .20s; }

  /* Cascades en grille — collections */
  .collections-grid .collection-card:nth-child(2) { transition-delay: .10s; }
  .collections-grid .collection-card:nth-child(3) { transition-delay: .20s; }
  .collections-grid .collection-card:nth-child(4) { transition-delay: .30s; }

  /* ------------------------------------------------------------------ */
  /* 3. Dérive douce du dégradé sur les .visual-placeholder              */
  /* ------------------------------------------------------------------ */
  @keyframes placeholder-drift {
    0%   { background-position: 10%  30%; }
    50%  { background-position: 90%  70%; }
    100% { background-position: 10%  30%; }
  }

  .visual-placeholder {
    background-size: 240% 240%;
    animation: placeholder-drift 9s ease-in-out infinite;
  }

  /* Lift très discret au survol des cards contenant un placeholder */
  .feature-card:hover .visual-placeholder,
  .collection-card:hover .visual-placeholder {
    filter: brightness(1.05);
    transition: filter .3s ease;
  }

  /* ------------------------------------------------------------------ */
  /* 4. Cards — lift au survol                                           */
  /* ------------------------------------------------------------------ */
  .feature-card,
  .collection-card,
  .review-card {
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .feature-card:hover,
  .collection-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(30, 58, 138, .10);
  }
  .review-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
  }

  /* ------------------------------------------------------------------ */
  /* 5. Boutons — lift au survol                                         */
  /* ------------------------------------------------------------------ */
  .btn,
  .btn--primary,
  .btn--outline,
  .btn--outline-white {
    transition: transform .20s ease, box-shadow .20s ease,
                background-color .20s, border-color .20s, color .20s;
  }
  .btn:hover:not(:disabled),
  .btn--primary:hover,
  .btn--outline:hover,
  .btn--outline-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .13);
  }
  .cta-band .btn:hover,
  .cta-band .btn--outline-white:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .20);
  }

  /* ------------------------------------------------------------------ */
  /* 6. Bouton WhatsApp flottant — pulsation subtile + hover scale       */
  /* ------------------------------------------------------------------ */
  @keyframes wa-pulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(37, 211, 102, .35); }
    50%       { box-shadow: 0 4px 22px rgba(37, 211, 102, .58); }
  }
  .whatsapp-btn {
    animation: wa-pulse 2.8s ease-in-out infinite;
    transition: transform .25s ease;
  }
  .whatsapp-btn:hover {
    transform: scale(1.08);
  }

  /* ------------------------------------------------------------------ */
  /* 7. Focus visible soigné — accessibilité                             */
  /* ------------------------------------------------------------------ */
  :focus-visible {
    outline: 2px solid #F59E0B;
    outline-offset: 3px;
    border-radius: 3px;
    transition: outline-offset .15s ease;
  }

}

/* -------------------------------------------------------------------- */
/* Garde-fou reduced-motion (doit rester en phase avec style.css)       */
/* -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto;
  }
}