/* ==========================================================================
   DENEO V2 — Couche d'animations « Immersion maîtrisée »
   --------------------------------------------------------------------------
   Règles non négociables respectées ici :
     • on n'anime QUE transform et opacity ;
     • durées courtes (300–600 ms) et easing doux var(--ease) pour les
       micro-interactions ; les ambiances lentes (bulles, caustiques) restent
       discrètes et continues ;
     • will-change utilisé avec parcimonie, retiré après révélation ;
     • tout est neutralisé sous prefers-reduced-motion: reduce (fin de fichier).

   Désactivation effet par effet :
     - Reveals au scroll ......... bloc [A]  (ou retirer l'attribut data-reveal)
     - Bulles montantes .......... bloc [B]  (ou retirer le partial « bubbles »)
     - Lumière caustique ......... bloc [C]  (ou retirer .water__caustics)
     - Flottement écran héro ..... bloc [D]
     - Chevron « scroll » ........ bloc [E]
   ========================================================================== */

/* ----------------------- [A] REVEALS AU SCROLL --------------------------- */
/* L'état caché est posé en CSS ; app.js ajoute .is-in via IntersectionObserver.
   Le décalage en cascade vient de --reveal-i (index posé sur l'élément). */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: calc(var(--reveal-i, 0) * 90ms);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(.92); }
[data-reveal="fade"]  { transform: none; }

[data-reveal].is-in {
  opacity: 1;
  transform: none;
  will-change: auto; /* on relâche la promesse une fois l'élément révélé */
}

/* Si JS indisponible : on force l'affichage pour ne jamais cacher du contenu (SEO/accessibilité). */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ------------------------ [B] BULLES MONTANTES --------------------------- */
/* Les spans .bubble sont générés par le partial « bubbles » avec des variables
   --x (position), --s (taille), --drift, --dur-b, --delay, --o (opacité max). */
@keyframes deneo-bubble-rise {
  0%   { transform: translateY(0)      translateX(0)             scale(.55); opacity: 0; }
  12%  { opacity: var(--o, .5); }
  50%  { transform: translateY(-46vh)  translateX(var(--drift, 12px)) scale(1); }
  88%  { opacity: var(--o, .5); }
  100% { transform: translateY(-94vh)  translateX(0)             scale(.9);  opacity: 0; }
}
.bubble {
  animation: deneo-bubble-rise var(--dur-b, 15s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity;
}

/* ------------------------ [C] LUMIÈRE CAUSTIQUE -------------------------- */
/* Deux nappes radiales qui dérivent lentement = reflets de lumière sur l'eau. */
@keyframes deneo-caustic-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(3%, 2%, 0) scale(1.12); }
}
@keyframes deneo-caustic-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.1); }
  50%      { transform: translate3d(-4%, -3%, 0) scale(1); }
}
.water__caustics::before { animation: deneo-caustic-a 22s ease-in-out infinite; }
.water__caustics::after  { animation: deneo-caustic-b 28s ease-in-out infinite; opacity: .6; }
.water__caustics { will-change: transform; }

/* ---------------------- [D] FLOTTEMENT ÉCRAN HÉRO ------------------------ */
/* L'écran produit « flotte » très légèrement, comme en apesanteur dans l'eau. */
@keyframes deneo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.hero__app { animation: deneo-float 6.5s ease-in-out infinite; animation-delay: 1.2s; }

/* Halo derrière l'écran : respiration d'opacité douce */
@keyframes deneo-glow {
  0%, 100% { opacity: .75; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}
.hero__media::before { animation: deneo-glow 7s ease-in-out infinite; }

/* ------------------------- [E] CHEVRON SCROLL --------------------------- */
/* « Découvrir » apparaît seul 3s après le chargement (pas lié au scroll) :
   on laisse le visiteur lire le héro, puis on suggère la suite. */
@keyframes deneo-appear { to { opacity: 1; } }
.hero__scroll { opacity: 0; animation: deneo-appear .8s var(--ease) 3s forwards; }

@keyframes deneo-bob {
  0%, 100% { transform: translateY(0); opacity: .8; }
  50%      { transform: translateY(6px); opacity: 1; }
}
.hero__scroll svg { animation: deneo-bob 1.8s ease-in-out infinite; }

/* Liseré .line qui se déploie quand sa section est révélée (raccord aquatique) */
[data-reveal].is-in .line, .is-in > .line { animation: deneo-line 0.7s var(--ease) both; }
@keyframes deneo-line { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); } }

/* ==========================================================================
   PRÉFÉRENCE « MOUVEMENT RÉDUIT » — on coupe tout mouvement non essentiel.
   Le contenu reste parfaitement visible et lisible.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal].is-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
  .bubble,
  .water__caustics::before,
  .water__caustics::after,
  .hero__app,
  .hero__media::before,
  .hero__scroll svg,
  .is-in .line {
    animation: none !important;
  }
  /* Le lien « Découvrir » reste visible immédiatement */
  .hero__scroll { animation: none !important; opacity: 1 !important; }
  .btn, .feature, .team-card, .blog-card, .partners__item img, .stores img { transition: none !important; }
}