/* ═══════════════════════════════════════════════════════
   SENVIRTUEL v2 — Système d'animations
═══════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────
   KEYFRAMES
───────────────────────────────────────────────────── */
@keyframes sv-slide-up {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sv-slide-left {
  from { opacity: 0; transform: translateX(-44px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes sv-slide-right {
  from { opacity: 0; transform: translateX(44px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes sv-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sv-scale-up {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes sv-pop {
  0%   { opacity: 0; transform: scale(0.7) translateY(16px); }
  70%  { transform: scale(1.06) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes sv-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes sv-float-delayed {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-14px) rotate(3deg); }
}
@keyframes sv-shimmer {
  from { background-position: -200% center; }
  to   { background-position:  200% center; }
}
@keyframes sv-glow-pulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}
@keyframes sv-spin-slow {
  to { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────
   HERO — animations directes (above the fold)
───────────────────────────────────────────────────── */
.sv-hero .sv-hero-eyebrow {
  animation: sv-slide-left 0.65s cubic-bezier(.22,1,.36,1) 0.15s both;
}
.sv-hero .sv-hero-title {
  animation: sv-slide-up 0.8s cubic-bezier(.22,1,.36,1) 0.3s both;
}
.sv-hero .sv-hero-subtitle {
  animation: sv-slide-up 0.65s cubic-bezier(.22,1,.36,1) 0.48s both;
}
.sv-hero .sv-hero-actions {
  animation: sv-slide-up 0.65s cubic-bezier(.22,1,.36,1) 0.62s both;
}
.sv-hero .sv-hero-stats {
  animation: sv-fade-in 0.7s ease 0.8s both;
}
.sv-hero .sv-hero-stats > div {
  animation: sv-pop 0.55s cubic-bezier(.34,1.56,.64,1) calc(0.9s + var(--i, 0) * 0.13s) both;
}

/* Orbes décoratifs dans le hero */
.sv-hero {
  position: relative;
}
.sv-hero::before,
.sv-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.sv-hero::before {
  width: 420px; height: 420px;
  top: -100px; right: -80px;
  background: radial-gradient(circle, rgba(99,102,241,0.18) 0%, transparent 70%);
  animation: sv-glow-pulse 4s ease-in-out infinite;
}
.sv-hero::after {
  width: 300px; height: 300px;
  bottom: -60px; left: -60px;
  background: radial-gradient(circle, rgba(34,211,238,0.13) 0%, transparent 70%);
  animation: sv-glow-pulse 5s ease-in-out 1.5s infinite;
}
.sv-hero .container { position: relative; z-index: 1; }

/* ─────────────────────────────────────────────────────
   GRADIENT TEXT — shimmer animé
───────────────────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 40%, #a78bfa 70%, var(--primary) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: sv-shimmer 4s linear infinite;
}

/* ─────────────────────────────────────────────────────
   SCROLL REVEAL — système général
───────────────────────────────────────────────────── */
.anim-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.65s cubic-bezier(.22,1,.36,1),
              transform 0.65s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.anim-reveal.from-left  { transform: translateX(-40px); }
.anim-reveal.from-right { transform: translateX(40px); }
.anim-reveal.anim-scale { transform: scale(0.88) translateY(20px); }
.anim-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Décalages de stagger */
.anim-d0 { transition-delay: 0s; }
.anim-d1 { transition-delay: 0.07s; }
.anim-d2 { transition-delay: 0.14s; }
.anim-d3 { transition-delay: 0.21s; }
.anim-d4 { transition-delay: 0.28s; }
.anim-d5 { transition-delay: 0.35s; }
.anim-d6 { transition-delay: 0.42s; }
.anim-d7 { transition-delay: 0.49s; }

/* ─────────────────────────────────────────────────────
   CATÉGORIES — hover enrichis
───────────────────────────────────────────────────── */
.sv-cat-card {
  transition: transform 0.38s cubic-bezier(.22,1,.36,1),
              box-shadow 0.38s ease,
              filter 0.25s ease;
  position: relative;
  overflow: hidden;
}
.sv-cat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: inherit;
}
.sv-cat-card:hover {
  transform: translateY(-9px) scale(1.04);
  box-shadow:
    0 22px 50px -8px var(--cat-glow, rgba(99,102,241,0.45)),
    0 0 0 1px rgba(255,255,255,0.12);
  filter: brightness(1.12) saturate(1.15);
}
.sv-cat-card:hover::before { opacity: 1; }
.sv-cat-card:active { transform: translateY(-3px) scale(1.01); }

.sv-cat-icon {
  display: block;
  font-size: 2.4rem;
  line-height: 1;
  transition: transform 0.45s cubic-bezier(.34,1.56,.64,1);
}
.sv-cat-card:hover .sv-cat-icon {
  transform: scale(1.3) rotate(-10deg);
}
.sv-cat-name {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.sv-cat-card:hover .sv-cat-name {
  transform: translateY(-2px);
}

/* ─────────────────────────────────────────────────────
   PRODUITS — hover enrichis + glow ring
───────────────────────────────────────────────────── */
.product-card {
  transition: transform 0.38s cubic-bezier(.22,1,.36,1),
              box-shadow 0.38s ease,
              border-color 0.25s ease;
}
.product-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 21px;
  background: linear-gradient(135deg, var(--pc-color, var(--primary)), transparent 65%);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 0;
  pointer-events: none;
}
.product-card > * { position: relative; z-index: 1; }
.product-card:hover {
  transform: translateY(-9px);
}
.product-card:hover::before { opacity: 0.28; }

/* Bouton add — pulse au hover carte */
.product-card:hover .product-card-add {
  animation: sv-glow-pulse 1.5s ease-in-out infinite;
  --pulse-color: var(--pc-color, var(--primary-glow));
}
@keyframes sv-glow-pulse {
  0%, 100% { box-shadow: 0 4px 12px -2px var(--pc-color, var(--primary-glow)); }
  50%       { box-shadow: 0 8px 24px 2px var(--pc-color, var(--primary-glow)); }
}

/* ─────────────────────────────────────────────────────
   SECTION HEAD — ligne déco animée sous le titre
───────────────────────────────────────────────────── */
.sv-section-title,
.sv-cat-section-title {
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}
.sv-section-title::after,
.sv-cat-section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 2px;
  transition: width 0.7s cubic-bezier(.22,1,.36,1) 0.25s;
}
.is-visible .sv-section-title::after,
.is-visible .sv-cat-section-title::after {
  width: 64px;
}

/* ─────────────────────────────────────────────────────
   REVIEWS — hover
───────────────────────────────────────────────────── */
.review-card {
  transition: transform 0.35s cubic-bezier(.22,1,.36,1),
              box-shadow 0.35s ease;
}
.review-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px -10px rgba(0,0,0,0.45);
}

/* ─────────────────────────────────────────────────────
   GARANTIES — icône bounce hover
───────────────────────────────────────────────────── */
.sv-guarantee-item {
  transition: transform 0.3s ease;
}
.sv-guarantee-item:hover {
  transform: translateY(-4px);
}
.sv-guarantee-item > div:first-child {
  transition: transform 0.45s cubic-bezier(.34,1.56,.64,1);
}
.sv-guarantee-item:hover > div:first-child {
  transform: scale(1.15) rotate(-6deg);
}

/* ─────────────────────────────────────────────────────
   HERO STATS — compteur + hover
───────────────────────────────────────────────────── */
.sv-hero-stats > div {
  transition: transform 0.3s ease;
  cursor: default;
}
.sv-hero-stats > div:hover {
  transform: translateY(-3px);
}
.sv-hero-stat-value {
  background: linear-gradient(135deg, var(--txt-1), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─────────────────────────────────────────────────────
   BOUTONS — micro-interactions enrichies
───────────────────────────────────────────────────── */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.btn-primary:hover::after { opacity: 1; }

/* ─────────────────────────────────────────────────────
   UTILITAIRES FLOAT (décoratifs)
───────────────────────────────────────────────────── */
.sv-float      { animation: sv-float 3.5s ease-in-out infinite; }
.sv-float-slow { animation: sv-float 5.5s ease-in-out infinite; }
.sv-float-alt  { animation: sv-float-delayed 4s ease-in-out 1s infinite; }

/* ─────────────────────────────────────────────────────
   FLASH DEAL — barre glow pulsée
───────────────────────────────────────────────────── */
.sv-flash-left .badge-danger {
  animation: sv-glow-pulse 2s ease-in-out infinite;
  --pulse-color: rgba(239,68,68,0.4);
}

/* ─────────────────────────────────────────────────────
   RESPECT prefers-reduced-motion
───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .anim-reveal {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .sv-hero .sv-hero-eyebrow,
  .sv-hero .sv-hero-title,
  .sv-hero .sv-hero-subtitle,
  .sv-hero .sv-hero-actions,
  .sv-hero .sv-hero-stats,
  .sv-hero .sv-hero-stats > div,
  .sv-hero::before,
  .sv-hero::after {
    animation: none;
  }
  .gradient-text { animation: none; }
  .sv-cat-icon   { transition: none; }
  .sv-float, .sv-float-slow, .sv-float-alt { animation: none; }
}