/* =============================================================
   YURLED — PDP v2 — product-animation.css
   ─────────────────────────────────────────────────────────────
   Toutes les transitions/keyframes de la PDP centralisées ici.
   Discret, jamais tape-à-l'œil. Les classes ci-dessous sont
   posées par le futur JS (Phase 3) — le CSS est prêt à les
   recevoir dès maintenant.
   ───────────────────────────────────────────────────────────── */

.yrlp-pdp,
.yrlp-pdp * {
  --yrlp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --yrlp-duration-fast: 0.2s;
  --yrlp-duration: 0.35s;
  --yrlp-duration-slow: 0.6s;
}

@media (prefers-reduced-motion: reduce) {
  .yrlp-pdp, .yrlp-pdp * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Apparition des éléments de la page (hero, sections) ── */
@keyframes yrlp-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.yrlp-fade-in {
  animation: yrlp-fade-up var(--yrlp-duration-slow) var(--yrlp-ease) both;
}

/* ── Hero banner : fondu au scroll — déplacé dans style.css
   (.yrl-hero-fade, sitewide), mutualisé avec le hero accueil.
   Voir style.css. ── */

/* ── Galerie : révélation au scroll (posé par product-gallery.js) ── */
.yrlp-gallery__item {
  transition: opacity var(--yrlp-duration-slow) var(--yrlp-ease),
              transform var(--yrlp-duration-slow) var(--yrlp-ease);
}

/* ── Changement de variante : léger fondu du prix ── */
.price-target {
  transition: opacity var(--yrlp-duration) ease;
}

.price-target.is-updating { opacity: 0; }

@keyframes yrlp-price-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.price-target.is-updated .price {
  animation: yrlp-price-in var(--yrlp-duration) var(--yrlp-ease);
}

/* ── Sélection d'une carte configurateur : petit "bounce" au clic ── */
@keyframes yrlp-select-bounce {
  0%   { transform: translateY(-2px) scale(1); }
  40%  { transform: translateY(-4px) scale(1.03); }
  100% { transform: translateY(-2px) scale(1); }
}

.swatch-btn.is-selecting {
  animation: yrlp-select-bounce var(--yrlp-duration) var(--yrlp-ease);
}

/* ── Étape du configurateur qui se débloque ── */
@keyframes yrlp-step-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tab-panel.active { animation: yrlp-step-in var(--yrlp-duration) var(--yrlp-ease); }

.nav-item.is-unlocking {
  animation: yrlp-select-bounce var(--yrlp-duration) var(--yrlp-ease);
}

/* ── Résumé dynamique : apparition douce quand on retire [hidden] ── */
.yrlp-summary:not([hidden]) {
  animation: yrlp-fade-up var(--yrlp-duration-slow) var(--yrlp-ease) both;
}

/* ── Ajout au panier : bouton qui pulse puis affiche la coche ── */
@keyframes yrlp-btn-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}

.single_add_to_cart_button.is-loading,
.buy-now-btn.is-loading {
  animation: yrlp-btn-pulse 0.9s ease-in-out infinite;
}

@keyframes yrlp-btn-success {
  from { transform: scale(0.94); opacity: 0.6; }
  to   { transform: scale(1); opacity: 1; }
}

.single_add_to_cart_button.is-added,
.buy-now-btn.is-added {
  background: var(--yrl-color-green) !important;
  color: #0e0e0e !important;
  animation: yrlp-btn-success var(--yrlp-duration) var(--yrlp-ease);
}

/* ── Barre flottante : glissement doux en bas d'écran ── */
.yrlp-floatbar {
  transform: translateY(100%);
  opacity: 0;
  transition: transform var(--yrlp-duration-slow) var(--yrlp-ease),
              opacity var(--yrlp-duration-slow) ease;
}

.yrlp-floatbar.is-visible {
  transform: translateY(0);
  opacity: 1;
}

/* ── Lightbox : fondu à l'ouverture/fermeture ── */
.custom-lightbox {
  opacity: 0;
  transition: opacity var(--yrlp-duration) ease;
}

.custom-lightbox[style*="display: block"],
.custom-lightbox.is-open {
  opacity: 1;
}

@keyframes yrlp-lightbox-zoom {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.lightbox-content { animation: yrlp-lightbox-zoom var(--yrlp-duration) var(--yrlp-ease); }

/* ── Accordéons : icône qui tourne ── */
.accordion-item.accordion-open .accordion-icon {
  transform: rotate(0deg);
}

.accordion-item:not(.accordion-open) .accordion-icon {
  transform: rotate(-90deg);
}

.accordion-icon { transition: transform var(--yrlp-duration) var(--yrlp-ease); }