/* ============ POWER CAPITAL — Animations ============ */

/* ---- Apparition au scroll (fade + slide up) ---- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Empilement sticky des cartes Produits — STACK DEPTH (Framer-style) ---- */
/* White cards stick with a 20px "staircase" offset and growing z-index. As the
   next card rises over it, the card underneath recedes: scale down + dim — a real
   sense of depth, like a premium stack of cards. The text travels with the card
   (no per-element fade), exactly like the Framer original. */
.products-stack { position: relative; padding-bottom: 40px; }
.product-card {
  position: sticky;
  top: 120px;
  transform-origin: 50% 0;
  transition: transform .6s cubic-bezier(.16,1,.3,1),
              filter .6s cubic-bezier(.16,1,.3,1),
              box-shadow .6s ease;
}
/* staircase: +20px per card, rising z-index */
.product-card:nth-child(1) { top: 100px; z-index: 1; }
.product-card:nth-child(2) { top: 120px; z-index: 2; }
.product-card:nth-child(3) { top: 140px; z-index: 3; }
.product-card:nth-child(4) { top: 160px; z-index: 4; }

/* a card recedes by gentle, EQUAL steps as cards stack above it — so the depth
   feels consistent (no single card receding too far). 3 levels for 4 cards. */
.js-anim .product-card.is-behind-1 {
  transform: scale(.975) translateY(-5px);
  filter: brightness(.97);
}
.js-anim .product-card.is-behind-2 {
  transform: scale(.95) translateY(-10px);
  filter: brightness(.94);
}
.js-anim .product-card.is-behind-3 {
  transform: scale(.925) translateY(-15px);
  filter: brightness(.91);
}

/* Subtle entrance for the FIRST appearance of each card's text (one-shot, gentle),
   so the section doesn't feel static on first reveal but the text is never blurry. */
.js-anim .product-card .product-text > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.16,1,.3,1),
              transform .55s cubic-bezier(.16,1,.3,1);
}
.js-anim .product-card.pc-in .product-text > * { opacity: 1; transform: translateY(0); }
.js-anim .product-card.pc-in .product-text > *:nth-child(1) { transition-delay: .03s; }
.js-anim .product-card.pc-in .product-text > *:nth-child(2) { transition-delay: .10s; }
.js-anim .product-card.pc-in .product-text > *:nth-child(3) { transition-delay: .17s; }

/* ---- Header logo swap (transparent -> scrolled) ---- */
.brand-logo--dark { transition: opacity .3s ease; }

/* ---- Hover micro-interactions already in sections.css (image scale) ---- */

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .product-card { position: relative; top: auto !important; transform: none !important; filter: none !important; }
  .product-text > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}