/* ============================================================
   MIKSO — Motion Design System
   CSS-only animations + states initiales pour GSAP
   ============================================================ */

/* ---------- Custom Cursor — Crosshair précision ---------- */
@media (hover: hover) and (pointer: fine) {
  body, body * { cursor: none !important; }
}

/* Point central — suit le curseur instantanément */
#cursor-dot {
  position: fixed;
  width: 3px; height: 3px;
  background: var(--cyan, #4DD9F0);
  border-radius: 50%;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px rgba(77, 217, 240, 0.9);
  will-change: transform;
}

/* Conteneur du viseur — suit avec lerp */
#cursor-cross {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 9998;
  will-change: transform;
}

/* Les 4 branches du viseur */
#cursor-cross .ch-t,
#cursor-cross .ch-b,
#cursor-cross .ch-l,
#cursor-cross .ch-r {
  position: absolute;
  background: rgba(255, 255, 255, 0.70);
  transition: all 0.22s cubic-bezier(.4, 0, .2, 1);
}

/* Vertical — branche haute */
#cursor-cross .ch-t {
  width: 1.5px;
  height: 9px;
  left: -0.75px;
  top: -14px; /* gap 5px depuis le centre */
}

/* Vertical — branche basse */
#cursor-cross .ch-b {
  width: 1.5px;
  height: 9px;
  left: -0.75px;
  top: 5px;
}

/* Horizontal — branche gauche */
#cursor-cross .ch-l {
  height: 1.5px;
  width: 9px;
  top: -0.75px;
  left: -14px;
}

/* Horizontal — branche droite */
#cursor-cross .ch-r {
  height: 1.5px;
  width: 9px;
  top: -0.75px;
  left: 5px;
}

/* Hover : branches qui se contractent + teinte cyan */
#cursor-cross.is-hovering .ch-t { height: 5px; top: -9px; background: rgba(77, 217, 240, 0.85); }
#cursor-cross.is-hovering .ch-b { height: 5px; top: 4px;  background: rgba(77, 217, 240, 0.85); }
#cursor-cross.is-hovering .ch-l { width: 5px;  left: -9px; background: rgba(77, 217, 240, 0.85); }
#cursor-cross.is-hovering .ch-r { width: 5px;  left: 4px;  background: rgba(77, 217, 240, 0.85); }

/* Click : flash blanc rapide */
#cursor-cross.is-clicking .ch-t,
#cursor-cross.is-clicking .ch-b,
#cursor-cross.is-clicking .ch-l,
#cursor-cross.is-clicking .ch-r {
  background: rgba(255, 255, 255, 1);
}
#cursor-dot.is-clicking {
  background: #fff;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.9);
}

/* ---------- Page Transition Overlay ---------- */
#page-transition {
  position: fixed;
  inset: 0;
  background: var(--void, #04061A);
  z-index: 9990;
  transform: translateY(100%);
  pointer-events: none;
  will-change: transform;
}

#page-transition::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(77,217,240,.9) 40%, rgba(91,143,255,.9) 60%, transparent 100%);
  box-shadow: 0 0 24px rgba(77,217,240,.5);
}

/* ---------- Wave SVG drift ---------- */
@keyframes wave-drift-a {
  from { transform: translateX(0px) translateY(0px); }
  to   { transform: translateX(12px) translateY(6px); }
}
@keyframes wave-drift-b {
  from { transform: translateX(0px) translateY(0px); }
  to   { transform: translateX(-10px) translateY(8px); }
}
@keyframes wave-drift-c {
  from { transform: translateX(0px) translateY(0px); }
  to   { transform: translateX(8px) translateY(-5px); }
}

.wave-bg path:nth-child(3n+1) { animation: wave-drift-a 9s ease-in-out infinite alternate; }
.wave-bg path:nth-child(3n+2) { animation: wave-drift-b 12s ease-in-out infinite alternate-reverse; }
.wave-bg path:nth-child(3n+3) { animation: wave-drift-c 8s ease-in-out infinite alternate; }

/* ---------- Hero pill dot pulse ---------- */
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(77,217,240,.8); opacity: 1; }
  50%       { box-shadow: 0 0 14px rgba(77,217,240,.9), 0 0 28px rgba(77,217,240,.3); opacity: .7; }
}
.hero-pill::before {
  animation: dot-pulse 2.2s ease-in-out infinite;
}

/* ---------- Glow streak pulse on .gcard ---------- */
@keyframes glow-streak-pulse {
  0%, 100% { opacity: .55; }
  50%       { opacity: 1; }
}
.gcard::after {
  animation: glow-streak-pulse 3.5s ease-in-out infinite;
}

/* ---------- Floating orbs ---------- */
.orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

/* ---------- Shimmer sur les boutons CTA ---------- */
.btn-shimmer-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.btn-shimmer-inner::after {
  content: '';
  position: absolute;
  top: -50%; left: -120%;
  width: 60%; height: 200%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-20deg);
  transition: none;
}

/* ---------- Perspective container pour les cards ---------- */
.gcard, .pcard {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ---------- Navbar transition ---------- */
.navbar {
  transition: background .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.4,0,.2,1);
}

/* ---------- Logo animation ---------- */
@keyframes logo-cyan-breathe {
  0%, 80%, 100% { text-shadow: none; }
  88%           { text-shadow: 0 0 20px rgba(77,217,240,.7), 0 0 40px rgba(77,217,240,.3); }
}
.logo em {
  animation: logo-cyan-breathe 6s ease-in-out infinite;
}

/* ---------- Stat numbers ---------- */
.stat-val {
  display: block;
  font-variant-numeric: tabular-nums;
}

/* ---------- Section reveals — états initiaux GSAP ---------- */
/* Ces éléments sont cachés via GSAP à l'init ; on définit leur will-change ici */
.section-intro h2,
.section-intro .lead,
.section-intro .eyebrow,
.vstep,
.mstep,
.pcard,
.stat-item {
  will-change: transform, opacity;
}

/* ---------- Staggered card entrance (classe ajoutée après reveal) ---------- */
.gcard.revealed {
  transition: transform .3s cubic-bezier(.2,0,0,1), box-shadow .3s ease;
}

/* ---------- Magnetic button container ---------- */
.btn-magnetic-wrap {
  display: inline-block;
  position: relative;
}

/* ---------- Reduced motion — tout désactiver ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  #cursor-dot, #cursor-ring { display: none; }
  body, body * { cursor: auto !important; }
}

/* ---------- Scrollbar dark theme ---------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--midnight, #080D2A); }
::-webkit-scrollbar-thumb { background: rgba(77,217,240,.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(77,217,240,.5); }