/* ==========================================================================
   Catikaa - couche mouvement
   CSS natif : etats initiaux, micro-interactions, marquee, curseur, 3D.
   Les sequences riches sont pilotees par anime.js (js/motion.js).
   Tout est neutralise sous prefers-reduced-motion en fin de fichier.
   ========================================================================== */

/* Aucun masquage par CSS : c'est motion.js qui pose opacity:0 en ligne, via
   hide(), qui enregistre chaque element pour le filet de securite. Une regle
   CSS masquerait des elements que le filet ne saurait pas rattraper. */

/* --- Barre de progression de lecture ---------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--color-electric-blue);
  z-index: 70;
  pointer-events: none;
  transition: opacity .2s ease;
}

/* --- Curseur personnalise (pointeur fin uniquement) -------------------------- */
.cursor,
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  border-radius: var(--radius-full);
  pointer-events: none;
  z-index: 200;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0);
}
.cursor {
  width: 32px; height: 32px;
  margin: -16px 0 0 -16px;
  border: 1px solid var(--color-smoke);
  transition: width .2s ease, height .2s ease, margin .2s ease,
              background-color .2s ease, border-color .2s ease, opacity .2s ease;
}
.cursor-dot {
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--color-midnight-ink);
  transition: opacity .2s ease;
}
.cursor.is-hover {
  width: 56px; height: 56px;
  margin: -28px 0 0 -28px;
  background: rgba(37, 99, 235, 0.07);
  border-color: var(--color-electric-blue);
}
.cursor.is-down { width: 22px; height: 22px; margin: -11px 0 0 -11px; }

@media (pointer: coarse) {
  .cursor, .cursor-dot { display: none; }
}

/* --- Decoupe en mots pour les revelations de texte --------------------------- */
.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.word__i {
  display: inline-block;
  will-change: transform, opacity;
}

/* --- Scene 3D du mockup produit ---------------------------------------------- */
.mockup-stage {
  perspective: 1600px;
  perspective-origin: 50% 0%;
}
.mockup-stage .mockup {
  transform-origin: 50% 0%;
  will-change: transform;
}

/* --- Pills flottantes du hero (respiration continue) -------------------------- */
.hero__pills .pill {
  will-change: transform;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.hero__pills .pill:hover {
  border-color: var(--color-smoke);
  box-shadow: var(--shadow-sm);
}

/* --- Marquee du logo cloud ---------------------------------------------------- */
.marquee { display: flex; flex-direction: column; gap: var(--spacing-4); }

.marquee__row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 46s linear infinite;
  will-change: transform;
}
.marquee__row[data-dir="right"] .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee .logo-item {
  flex: none;
  padding-inline: var(--spacing-40);
  transition: color .2s ease, transform .2s ease;
}
.marquee .logo-item:hover { transform: scale(1.06); }

@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Perspective sur les grilles : sans elle, les rotateX des cascades
   se lisent comme un simple ecrasement vertical. */
.js-motion .grid-2,
.js-motion .grid-3,
.js-motion .grid-4,
.js-motion .sim { perspective: 1400px; }

/* --- Cartes : inclinaison 3D + halo suivant le curseur ------------------------- */
.tilt {
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, border-color .3s ease;
  will-change: transform;
}
.tilt.is-tilting { transition: transform .08s linear, box-shadow .3s ease, border-color .3s ease; }
.tilt:hover { border-color: var(--color-smoke); box-shadow: var(--shadow-sm); }

.tilt > * { transform: translateZ(0.01px); }
.tilt .feature__icon,
.tilt .price { transform: translateZ(28px); }

/* z-index 0 et non -1 : en negatif le halo passerait derriere le fond blanc
   de la carte, donc invisible. A 7 % d'opacite il peut couvrir le texte sans
   nuire a la lisibilite. */
.spot { position: relative; }
.spot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
              rgba(37, 99, 235, 0.07), transparent 68%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 0;
}
.spot:hover::after { opacity: 1; }

/* --- Boutons magnetiques + onde au clic ---------------------------------------- */
.magnetic { position: relative; will-change: transform; }
.magnetic__label { display: inline-flex; align-items: center; gap: var(--spacing-8); pointer-events: none; }

.btn { position: relative; overflow: hidden; }
.ripple {
  position: absolute;
  border-radius: var(--radius-full);
  background: currentColor;
  opacity: .18;
  transform: scale(0);
  pointer-events: none;
  animation: ripple-out .55s ease-out forwards;
}
@keyframes ripple-out {
  to { transform: scale(2.4); opacity: 0; }
}

/* --- Lignes de la timeline du sequestre ----------------------------------------- */
/* Masquage arme uniquement quand motion.js va reellement dessiner la timeline
   (attribut data-draw). En mode degrade, rien n'est masque. */
.timeline__line { transform-origin: top center; }
.js-motion .timeline[data-draw] .timeline__line { transform: scaleY(0); }
.js-motion .timeline[data-draw] .timeline__dot { transform: scale(0); }

.timeline__item.is-current .timeline__dot { animation: dot-pulse 2.2s ease-in-out infinite; }
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--tint-blue); }
  50%      { box-shadow: 0 0 0 7px rgba(219, 234, 255, 0.45); }
}

/* --- Lignes du tableau : entree en cascade -------------------------------------- */
.table tbody tr { will-change: transform, opacity; }
.table tbody tr:hover td:first-child { transform: translateX(2px); }
.table tbody tr td:first-child { transition: transform .2s ease; }

/* --- Navigation ------------------------------------------------------------------ */
.brand__mark { transition: transform .3s ease; will-change: transform; }
.brand:hover .brand__mark { transform: rotate(90deg) scale(1.08); }

.nav__link { position: relative; }
.nav__link::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: 4px;
  height: 1.5px;
  background: var(--color-midnight-ink);
  border-radius: var(--radius-full);
  transition: left .25s ease, right .25s ease;
}
.nav__link:hover::after,
.nav__link.is-active::after { left: 16px; right: 16px; }

/* --- Fond pointille : derive lente ------------------------------------------------ */
.dotted-fade { animation: dot-drift 24s ease-in-out infinite alternate; }
@keyframes dot-drift {
  from { background-position: 0 0; }
  to   { background-position: 32px 16px; }
}

/* --- Elevation reactive des cartes flottantes -------------------------------------- */
.card--float { transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease; }
.card--float:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* --- Chiffres qui defilent ---------------------------------------------------------- */
.metric__value, .stat__value, .receipt__total .amount { font-variant-numeric: tabular-nums; }

/* --- Boutons de la table : apparition au survol de la ligne -------------------------- */
.table__actions .btn { transition: transform .2s ease, background-color .15s ease, border-color .15s ease, opacity .2s ease; }
.table tbody tr:hover .table__actions .btn { transform: translateY(-1px); }

/* --- Modale et toasts : anime.js pilote, on neutralise les keyframes CSS ------------- */
.js-motion .modal__panel,
.js-motion .toast { animation: none; }

/* --- Accessibilite : on coupe tout ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js-motion .timeline[data-draw] .timeline__line { transform: none !important; }
  .js-motion .timeline[data-draw] .timeline__dot { transform: none !important; }
  .marquee__track { animation: none; }
  .dotted-fade { animation: none; }
  .cursor, .cursor-dot { display: none; }
  .scroll-progress { display: none; }
  .tilt { transform: none !important; }
  .mockup-stage .mockup { transform: none !important; }
  .timeline__item.is-current .timeline__dot { animation: none; }
}