/* ============================================================
   NATUREA — ANIMATION SYSTEM v3 "CRÈME ORGANIQUE"
   Scroll-driven dématérialisation + rematérialisation
   Particules de crème, morphing, distorsion, fluidité
   ============================================================ */

/* ---- VARIABLES ANIMATION ---- */
:root {
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
}

/* ============================================================
   1. CANVAS PARTICULES CRÈME (fond global)
   ============================================================ */
#cream-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  mix-blend-mode: soft-light;
}

/* ============================================================
   2. BLOB ORGANIQUE — fond animé sections
   ============================================================ */
.blob-bg {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: blob-morph 12s ease-in-out infinite alternate;
  opacity: 0.12;
}
.blob-bg-1 {
  width: 600px; height: 600px;
  background: var(--terra);
  top: -200px; left: -100px;
  animation-delay: 0s;
}
.blob-bg-2 {
  width: 500px; height: 500px;
  background: var(--sauge);
  bottom: -150px; right: -80px;
  animation-delay: -4s;
}
.blob-bg-3 {
  width: 400px; height: 400px;
  background: var(--lin);
  top: 30%; left: 40%;
  animation-delay: -8s;
}
@keyframes blob-morph {
  0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: scale(1) rotate(0deg); }
  25%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: scale(1.08) rotate(15deg); }
  50%  { border-radius: 50% 60% 30% 60% / 40% 70% 60% 30%; transform: scale(0.95) rotate(-10deg); }
  75%  { border-radius: 40% 50% 60% 40% / 60% 40% 50% 70%; transform: scale(1.05) rotate(8deg); }
  100% { border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%; transform: scale(1) rotate(0deg); }
}

/* ============================================================
   3. DÉMATÉRIALISATION AU SCROLL — éléments
   ============================================================ */

/* État initial — invisible, prêt */
.dematerialize {
  opacity: 0;
  transform: translateY(40px) scale(0.96);
  filter: blur(8px);
  transition:
    opacity 0.9s var(--ease-out-expo),
    transform 0.9s var(--ease-out-expo),
    filter 0.7s ease;
  will-change: opacity, transform, filter;
}

/* Rematérialisation — visible */
.dematerialize.materialize {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Délais en cascade */
.dematerialize:nth-child(1) { transition-delay: 0s; }
.dematerialize:nth-child(2) { transition-delay: 0.12s; }
.dematerialize:nth-child(3) { transition-delay: 0.24s; }
.dematerialize:nth-child(4) { transition-delay: 0.36s; }
.dematerialize:nth-child(5) { transition-delay: 0.48s; }
.dematerialize:nth-child(6) { transition-delay: 0.60s; }

/* Variantes directionnelles */
.dem-left {
  transform: translateX(-60px) scale(0.95);
  filter: blur(10px);
}
.dem-left.materialize { transform: translateX(0) scale(1); filter: blur(0); }

.dem-right {
  transform: translateX(60px) scale(0.95);
  filter: blur(10px);
}
.dem-right.materialize { transform: translateX(0) scale(1); filter: blur(0); }

.dem-scale {
  transform: scale(0.75);
  filter: blur(12px);
  opacity: 0;
}
.dem-scale.materialize { transform: scale(1); filter: blur(0); opacity: 1; }

/* Variante "crème qui s'étale" — depuis le centre */
.dem-cream {
  transform: scale(0.6) translateY(20px);
  filter: blur(16px) saturate(0);
  opacity: 0;
  transition:
    opacity 1.1s var(--ease-out-expo),
    transform 1.2s var(--ease-spring),
    filter 1s ease,
    color 0.8s ease;
}
.dem-cream.materialize {
  transform: scale(1) translateY(0);
  filter: blur(0) saturate(1);
  opacity: 1;
}

/* ============================================================
   4. TEXTE RÉVÉLÉ — lettre par lettre (clip-path)
   ============================================================ */
.text-reveal-wrap {
  overflow: hidden;
  display: block;
}
.text-reveal {
  display: block;
  transform: translateY(105%);
  transition: transform 0.8s var(--ease-out-expo);
}
.text-reveal.revealed {
  transform: translateY(0);
}
.text-reveal-wrap:nth-child(2) .text-reveal { transition-delay: 0.08s; }
.text-reveal-wrap:nth-child(3) .text-reveal { transition-delay: 0.16s; }

/* ============================================================
   5. SECTION TRANSITION — wipe crème
   ============================================================ */
.section-wipe {
  position: relative;
  overflow: hidden;
}
.section-wipe::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px;
  height: 6px;
  background: linear-gradient(90deg,
    var(--terra) 0%,
    var(--sauge) 35%,
    var(--lin) 60%,
    var(--terra) 100%
  );
  background-size: 200% 100%;
  animation: cream-wipe-line 4s linear infinite;
  z-index: 1;
  opacity: 0.7;
}
@keyframes cream-wipe-line {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ============================================================
   6. CARTES PRODUITS — hover liquide
   ============================================================ */
.product-card {
  transform-style: preserve-3d;
  perspective: 1000px;
}
.product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(181,113,74,0.12) 0%,
    transparent 65%
  );
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
}
.product-card:hover::after { opacity: 1; }

/* ============================================================
   7. MORPHING BLOB SUR IMAGES
   ============================================================ */
.img-morph-wrap {
  position: relative;
  overflow: hidden;
}
.img-morph-wrap img {
  transition: transform 0.8s var(--ease-out-expo), filter 0.6s ease;
}
.img-morph-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(181,113,74,0.0) 0%, rgba(107,124,92,0.15) 100%);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.img-morph-wrap:hover::before { opacity: 1; }
.img-morph-wrap:hover img {
  transform: scale(1.06);
  filter: saturate(1.1) contrast(1.03);
}

/* ============================================================
   8. MARQUEE CRÈME — vitesse variable
   ============================================================ */
.marquee-strip {
  overflow: hidden;
  cursor: default;
}
.marquee-strip:hover .marquee-inner {
  animation-play-state: paused;
}
.marquee-inner {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee-scroll 28s linear infinite;
}
.marquee-inner:hover { animation-duration: 80s; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   9. HERO CHIPS — flottement continu
   ============================================================ */
.hero-chip {
  animation: chip-levitate 4s ease-in-out infinite alternate !important;
}
.hero-chip-1 { animation-delay: 0s !important; }
.hero-chip-2 { animation-delay: -1.5s !important; }
@keyframes chip-levitate {
  0%   { transform: translateY(0px) translateX(0px); }
  33%  { transform: translateY(-6px) translateX(2px); }
  66%  { transform: translateY(-3px) translateX(-2px); }
  100% { transform: translateY(-8px) translateX(1px); }
}

/* ============================================================
   10. CURSOR CUSTOM — goutte de crème
   ============================================================ */
.cursor-dot {
  position: fixed;
  width: 8px; height: 8px;
  background: var(--terra);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease, width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
  mix-blend-mode: multiply;
}
.cursor-ring {
  position: fixed;
  width: 40px; height: 40px;
  border: 1.5px solid var(--terra);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: transform 0.18s ease, width 0.3s ease, height 0.3s ease, border-color 0.3s ease;
  opacity: 0.6;
}
.cursor-dot.hover   { width: 14px; height: 14px; }
.cursor-ring.hover  { width: 60px; height: 60px; border-color: var(--sauge); opacity: 0.4; }
.cursor-dot.click   { transform: translate(-50%,-50%) scale(0.5); }
@media (max-width: 900px) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ============================================================
   11. SECTION TITLE — underline liquide
   ============================================================ */
.section-title em {
  position: relative;
  display: inline;
}
.section-title em::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0%; height: 2px;
  background: linear-gradient(90deg, var(--terra), var(--sauge));
  border-radius: 2px;
  transition: width 1.2s var(--ease-out-expo);
}
.section-title.underline-active em::after {
  width: 100%;
}

/* ============================================================
   12. SCROLL PROGRESS GLOBAL
   ============================================================ */
.page-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--terra), var(--sauge), var(--terra));
  background-size: 200% 100%;
  animation: progress-shimmer 2s linear infinite;
  z-index: 999;
  transition: width 0.1s linear;
}
@keyframes progress-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ============================================================
   13. FLOATING PÉTALES / GOUTTELETTES — scroll triggered
   ============================================================ */
.petal {
  position: fixed;
  border-radius: 50% 20% 50% 20%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  animation: petal-fall linear forwards;
}
@keyframes petal-fall {
  0%   { opacity: 0; transform: translateY(-20px) rotate(0deg) scale(0.5); }
  15%  { opacity: 0.7; }
  85%  { opacity: 0.4; }
  100% { opacity: 0; transform: translateY(100vh) rotate(360deg) scale(0.8); }
}

/* ============================================================
   14. PRODUCT IMAGE — distorsion au hover (CSS only)
   ============================================================ */
@keyframes img-distort-in {
  0%   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  30%  { clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%); }
  60%  { clip-path: polygon(2% 0, 98% 0, 100% 100%, 0% 100%); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
.product-img-wrap img {
  animation-duration: 0.6s;
  animation-fill-mode: forwards;
}
.product-card:hover .product-img-wrap img {
  animation-name: img-distort-in;
}

/* ============================================================
   15. STAT NUMBERS — counter glow
   ============================================================ */
.stat-num {
  transition: text-shadow 0.5s ease;
}
.stat-num.glowing {
  text-shadow:
    0 0 20px rgba(181,113,74,0.6),
    0 0 40px rgba(181,113,74,0.3),
    0 0 80px rgba(181,113,74,0.1);
}

/* ============================================================
   16. SECTION DARK — star field effect
   ============================================================ */
.section-dark {
  position: relative;
  overflow: hidden;
}
.section-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(212,196,168,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 10%, rgba(212,196,168,0.3) 0%, transparent 100%),
    radial-gradient(2px 2px at 45% 70%, rgba(181,113,74,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 50%, rgba(212,196,168,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 80%, rgba(107,124,92,0.3) 0%, transparent 100%),
    radial-gradient(2px 2px at 90% 90%, rgba(212,196,168,0.2) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  animation: star-twinkle 6s ease-in-out infinite alternate;
}
@keyframes star-twinkle {
  0%   { opacity: 0.4; }
  50%  { opacity: 1; }
  100% { opacity: 0.6; }
}

/* ============================================================
   17. BOUTONS — ripple liquide amélioré
   ============================================================ */
.btn-liquid-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transform: scale(0);
  animation: liquid-ripple 0.7s ease-out forwards;
  pointer-events: none;
}
@keyframes liquid-ripple {
  0%   { transform: scale(0); opacity: 1; }
  70%  { transform: scale(2.5); opacity: 0.3; }
  100% { transform: scale(3); opacity: 0; }
}

/* ============================================================
   18. TESTI CARDS — flottement léger
   ============================================================ */
.testi-card {
  transition: transform 0.4s var(--ease-spring), box-shadow 0.4s ease;
}
.testi-card:hover {
  transform: translateY(-8px) rotate(0.5deg);
  box-shadow: 0 32px 64px rgba(44,36,32,0.15);
}

/* ============================================================
   19. FOOTER — vague crème
   ============================================================ */
footer::before {
  content: '';
  display: block;
  height: 80px;
  background: linear-gradient(to bottom right,
    var(--creme-deep) 0%,
    var(--creme-deep) 49%,
    var(--brun) 50%
  );
  margin-top: -1px;
}

/* ============================================================
   20. REDUCED MOTION OVERRIDE
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .dematerialize,
  .dem-left,
  .dem-right,
  .dem-scale,
  .dem-cream,
  .blob-bg,
  .hero-chip,
  .petal {
    animation: none !important;
    transition: opacity 0.3s ease !important;
    transform: none !important;
    filter: none !important;
  }
}