/* ============================================================
 * ESSIKNETWORK — Port exact des animations React (Tailwind v4)
 * Source : HeroSection, ServicesSection, Header, modals, App.tsx
 * Vocabulaire React : animate-in fade-in zoom-in-95 duration-150/200,
 * slide-in-from-top-4, animate-pulse, animate-spin 8s,
 * transition-all duration-300, group-hover:, active:scale-[0.98].
 * Elementor ne fournit rien de tout cela nativement → ce fichier
 * le recrée à l'identique. Contenu toujours dynamique (Controls).
 * ============================================================ */

/* ---------- Keyframes React ---------- */
@keyframes essik-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes essik-zoom-in-95 { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
@keyframes essik-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes essik-slide-in-top { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes essik-spin-slow { to { transform: rotate(360deg); } }

/* ---------- Entrées type modals/dropdowns React (150-200ms) ---------- */
.essik-anim-fade-zoom { animation: essik-fade-in .15s ease-out both, essik-zoom-in-95 .15s ease-out both; }
.essik-anim-fade-zoom-slow { animation: essik-fade-in .2s ease-out both, essik-zoom-in-95 .2s ease-out both; }
.essik-anim-slide-top { animation: essik-slide-in-top .2s ease-out both; }

/* ---------- Hero : entrée au chargement, stagger React-like ---------- */
.essik-hero-animated .essik-anim-item { opacity: 0; animation: essik-fade-up .6s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: var(--essik-d, 0ms); }
.essik-hero-animated .essik-hero-visual-inner { opacity: 0; animation: essik-zoom-in-95 .7s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: 250ms; }

/* ---------- Scroll reveal (sections sous la ligne de flottaison) ---------- */
.essik-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); transition-delay: var(--essik-d, 0ms); }
.essik-reveal.is-visible { opacity: 1; transform: none; }
/* Éditeur Elementor : preview live TOUJOURS visible (les re-rendus AJAX ne
 * déclenchent pas l'IntersectionObserver → sans ce garde-fou les cartes
 * resteraient invisibles dans le builder). Front public inchangé. */
.elementor-editor-active .essik-reveal,
.elementor-editor-preview .essik-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.essik-reveal[data-anim="fade"] { transform: none; }
.essik-reveal[data-anim="zoom"] { transform: scale(.95); }
.essik-reveal[data-anim="zoom"].is-visible { transform: scale(1); }
.essik-reveal[data-anim="none"] { opacity: 1; transform: none; transition: none; }

/* ---------- Hovers cartes React (group-hover recréé en :hover pur) ---------- */
.essik-service-card { transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease, background-color .3s ease; }
.essik-service-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(2,6,23,.12); border-color: var(--essik-card-hover-border, rgba(255,85,0,.5)) !important; }
.essik-service-card .essik-service-icon { transition: background-color .3s ease, color .3s ease, transform .3s ease; }
.essik-service-card:hover .essik-service-icon { background: var(--essik-icon-hover-bg, #FF5500) !important; color: var(--essik-icon-hover-color, #fff) !important; }
.essik-service-card .essik-service-title { transition: color .3s ease; }
.essik-service-card:hover .essik-service-title { color: var(--essik-card-title-hover, #FF5500) !important; }
.essik-service-card .essik-service-link { transition: color .2s ease, gap .2s ease; }
.essik-service-card:hover .essik-service-link { color: #E04B00 !important; }

/* Flèches React : group-hover:translate-x-1 (+ RTL) */
.essik-arrow { display: inline-flex; transition: transform .2s ease; }
a:hover > .essik-arrow, button:hover > .essik-arrow { transform: translateX(4px); }
html[dir="rtl"] a:hover > .essik-arrow, html[dir="rtl"] button:hover > .essik-arrow { transform: translateX(-4px); }

/* Boutons React : active:scale-[0.98] */
.essik-hero-btn, .essik-global-cta, .essik-service-link { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .1s ease, box-shadow .2s ease; }
.essik-hero-btn:active, .essik-global-cta:active { transform: scale(.98); }

/* Icônes React : group-hover:scale-110 */
.essik-icon-scale { transition: transform .3s ease; }
.essik-service-card:hover .essik-icon-scale { transform: scale(1.1); }

/* Pulse badge React (animate-pulse) + spin lent micro-badge (8s) */
.essik-badge-dot { animation: essik-pulse-dot 2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes essik-pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.essik-spin-slow { animation: essik-spin-slow 8s linear infinite; }

/* Transition thème React (App root duration-200) */
body, .essik-hero-section, .essik-service-card, .essik-dashcard { transition: background-color .2s ease, border-color .2s ease; }

/* Option admin : désactiver le soulèvement au survol */
.essik-service-card[data-no-lift]:hover { transform: none !important; }

/* Accessibilité : désactive tout si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
  .essik-hero-animated .essik-anim-item,
  .essik-hero-animated .essik-hero-visual-inner,
  .essik-anim-fade-zoom, .essik-anim-fade-zoom-slow, .essik-anim-slide-top { animation: none !important; opacity: 1 !important; }
  .essik-reveal { transition: none !important; opacity: 1 !important; transform: none !important; }
  .essik-service-card:hover { transform: none !important; }
  .essik-badge-dot, .essik-spin-slow { animation: none !important; }
}