/* =============================================
   FADE IN UP — IntersectionObserver
   ============================================= */
.fade-in-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-up.is-visible { opacity: 1; transform: translateY(0); }

.fade-in-up[data-delay="80"]  { transition-delay: 80ms; }
.fade-in-up[data-delay="100"] { transition-delay: 100ms; }
.fade-in-up[data-delay="110"] { transition-delay: 110ms; }
.fade-in-up[data-delay="160"] { transition-delay: 160ms; }
.fade-in-up[data-delay="180"] { transition-delay: 180ms; }
.fade-in-up[data-delay="200"] { transition-delay: 200ms; }
.fade-in-up[data-delay="220"] { transition-delay: 220ms; }
.fade-in-up[data-delay="240"] { transition-delay: 240ms; }
.fade-in-up[data-delay="260"] { transition-delay: 260ms; }
.fade-in-up[data-delay="300"] { transition-delay: 300ms; }
.fade-in-up[data-delay="320"] { transition-delay: 320ms; }
.fade-in-up[data-delay="330"] { transition-delay: 330ms; }
.fade-in-up[data-delay="340"] { transition-delay: 340ms; }
.fade-in-up[data-delay="400"] { transition-delay: 400ms; }
.fade-in-up[data-delay="420"] { transition-delay: 420ms; }
.fade-in-up[data-delay="500"] { transition-delay: 500ms; }
.fade-in-up[data-delay="600"] { transition-delay: 600ms; }
.fade-in-up[data-delay="700"] { transition-delay: 700ms; }
.fade-in-up[data-delay="800"] { transition-delay: 800ms; }

/* =============================================
   TEXT SCRAMBLE — style Edge Studio
   ============================================= */
.scramble-text { display: inline-block; }

/* =============================================
   SHIMMER — badge / CTA
   ============================================= */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.shimmer {
  background: linear-gradient(
    90deg,
    var(--color-accent) 0%,
    var(--color-accent-light) 30%,
    #FFFFFF 50%,
    var(--color-accent-light) 70%,
    var(--color-accent) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}

/* =============================================
   GLOW PULSÉ
   ============================================= */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(200,241,53,.15), 0 0 40px rgba(200,241,53,.06); }
  50%       { box-shadow: 0 0 30px rgba(200,241,53,.3),  0 0 60px rgba(200,241,53,.12); }
}

.glow-pulse { animation: glow-pulse 3s ease infinite; }

/* =============================================
   ORBE FLOTTANT
   ============================================= */
@keyframes orb-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-20px) scale(1.05); }
}

.orb-float { animation: orb-float 8s ease infinite; }

/* =============================================
   LIGNE HORIZONTALE ANIMÉE — style Wibify
   ============================================= */
@keyframes line-scan {
  0%   { transform: scaleX(0); transform-origin: left; }
  50%  { transform: scaleX(1); transform-origin: left; }
  50.01% { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

.line-animated {
  height: 0.5px;
  background: var(--color-accent);
  animation: line-scan 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* =============================================
   COUNTER ANIMATION
   ============================================= */
.count-up { display: inline-block; }

/* =============================================
   3D TILT CARD — via JS data-tilt
   ============================================= */
[data-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
}

[data-tilt] .card__inner {
  transform: translateZ(20px);
}

/* =============================================
   HERO DASHBOARD FLOTTANT
   ============================================= */
@keyframes dashboard-float {
  0%, 100% { transform: rotateY(-8deg) rotateX(4deg) translateY(0); }
  50%       { transform: rotateY(-6deg) rotateX(3deg) translateY(-10px); }
}

.hero__dashboard { animation: dashboard-float 6s ease infinite; }
.hero__dashboard:hover { animation-play-state: paused; }

/* =============================================
   SCAN LINE — effet tech
   ============================================= */
@keyframes scan {
  0%   { top: 0; opacity: 0.6; }
  100% { top: 100%; opacity: 0; }
}

.scan-line {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,241,53,.4), transparent);
  animation: scan 4s linear infinite;
  pointer-events: none;
}

/* =============================================
   RESPECT REDUCED MOTION
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  .fade-in-up { opacity: 1; transform: none; transition: none; }
  .ticker__track { animation: none; }
  .shimmer, .glow-pulse, .orb-float, .hero__dashboard, .scan-line { animation: none; }
  [data-tilt] { transform: none !important; }
  .btn:active { transform: none !important; }
}