/* ============================================================
   Axis IQ — Custom Styles
   Tailwind handles utilities; this file handles custom rules.
   ============================================================ */

/* --- Base -------------------------------------------------- */
body {
  background-color: #0a0e0f;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
}

/* --- Typography -------------------------------------------- */
.text-gradient-teal {
  background: linear-gradient(135deg, #00c4b4 0%, #008a7e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.high-contrast-title {
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* --- Legacy reveal (IntersectionObserver class toggle) ----- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal {
  opacity: 0;
  transition: all 0.8s ease-out;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.reveal-hidden {
  transform: translateY(30px);
}

/* --- Animation Layer (respects prefers-reduced-motion) ----- */
@media (prefers-reduced-motion: no-preference) {

  /* Word-split hero headline */
  .anim-word span {
    display: inline-block;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .anim-word.fired span {
    opacity: 1;
    transform: translateY(0);
  }

  /* Fade up */
  .anim-fade {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .anim-fade.fired {
    opacity: 1;
    transform: translateY(0);
  }

  /* Slide from left */
  .anim-left {
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .anim-left.fired {
    opacity: 1;
    transform: translateX(0);
  }

  /* Teal bar wipe */
  .anim-bar::before {
    content: '';
    display: block;
    height: 2px;
    background: #00c4b4;
    width: 0;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    margin-bottom: 1rem;
  }
  .anim-bar.fired::before {
    width: 100%;
  }

  /* CTA pulse ring */
  .cta-pulse {
    animation: ctaPulse 2.5s ease-in-out infinite;
  }
  @keyframes ctaPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 196, 180, 0.3); }
    50%       { box-shadow: 0 0 0 10px rgba(0, 196, 180, 0); }
  }

  /* Stat counters */
  .stat-counter {
    transition: color 0.3s ease;
  }
}