/* ============================================================
   ABDIEL AI — ANIMATIONS
   ============================================================ */

/* ── REVEAL STATES
   NOTE: opacity/transform are set by GSAP via gsap.set() at runtime.
   The .will-hide class is added by JS before animation starts so elements
   are invisible only when JS is actually running — not by default CSS.
── */
.will-hide {
  opacity: 0;
  visibility: hidden;
}

/* Applied after animation completes */
.revealed {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* ── HERO HEADLINE SPLIT ── */
.hero-line .word {
  display: inline-block;
  overflow: hidden;
}

.hero-line .word-inner {
  display: inline-block;
  transform: translateY(110%);
}

/* ── MAGNETIC BUTTON ── */
.magnetic {
  transition: transform 0.3s var(--ease-out-expo),
              box-shadow 0.3s;
  will-change: transform;
}

/* ── SHIMMER EFFECT (for gold elements) ── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.shimmer {
  background: linear-gradient(
    90deg,
    var(--gold) 0%,
    var(--gold-light) 40%,
    var(--gold) 60%,
    var(--gold-light) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}

/* ── GLOWING NODE (hero canvas supplement) ── */
@keyframes nodeGlow {
  0%   { box-shadow: 0 0 8px rgba(212,175,55,0.4); }
  50%  { box-shadow: 0 0 24px rgba(212,175,55,0.8), 0 0 48px rgba(212,175,55,0.3); }
  100% { box-shadow: 0 0 8px rgba(212,175,55,0.4); }
}

@keyframes nodeGlowBlue {
  0%   { box-shadow: 0 0 8px rgba(59,130,246,0.4); }
  50%  { box-shadow: 0 0 24px rgba(59,130,246,0.8), 0 0 48px rgba(30,58,138,0.3); }
  100% { box-shadow: 0 0 8px rgba(59,130,246,0.4); }
}

/* ── FLOATING ANIMATION ── */
@keyframes float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-12px); }
  100% { transform: translateY(0px); }
}

/* ── PULSE RING ── */
@keyframes pulseRing {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* ── COUNTER ANIMATE ── */
.counter-animated {
  animation: countUp 0.3s ease-out forwards;
}

/* ── PROCESS CONNECTOR LINE DRAW ── */
@keyframes drawLine {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); }
}

.process-connector-line.animated {
  animation: drawLine 0.8s var(--ease-out-expo) forwards;
}

/* ── NAV UNDERLINE HOVER ── */
@keyframes navUnderline {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); }
}

/* ── CARD BORDER GLOW ON HOVER ── */
@keyframes borderGlow {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* ── TICKER (defined in style.css, repeated here for reference) ── */

/* ── GRID LINE ANIMATION (systems section) ── */
@keyframes gridPulse {
  0%   { opacity: 0.03; }
  50%  { opacity: 0.07; }
  100% { opacity: 0.03; }
}

/* ── GRADIENT BORDER SPIN ── */
@keyframes gradientSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── TEXT CLIP REVEAL ── */
@keyframes clipReveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

/* ── SECTION TRANSITION OVERLAY ── */
.section-transition {
  position: absolute;
  inset: 0;
  background: var(--dark);
  transform-origin: top;
  pointer-events: none;
}

/* ── LOADING BAR FILL ── */
@keyframes barFill {
  from { width: 0%; }
  to   { width: 100%; }
}

/* ── HERO STAT COUNTER ── */
.hero-stat-num {
  transition: opacity 0.3s;
}

/* ── SCROLL PROGRESS INDICATOR ── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--grad-gold);
  z-index: 9999;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.1s linear;
}

/* ── INTERACTIVE HOVER STATES ── */

/* Service card glow on hover */
.service-card:hover .service-icon {
  animation: nodeGlow 2s ease-in-out infinite;
}

.service-card--featured:hover .service-icon {
  animation: nodeGlowBlue 2s ease-in-out infinite;
}

/* Result card metric */
.result-card:hover .metric-num {
  animation: shimmer 2s linear infinite;
}

/* System card reveal */
.system-card {
  transition: background 0.4s, transform 0.3s var(--ease-out-expo);
}

.system-card:hover {
  transform: translateY(-4px);
}

/* Help card hover glow */
.help-card--dark:hover::before {
  opacity: 0.25;
}

.help-card--light:hover::before {
  opacity: 0.15;
}

/* ── MOBILE MENU ANIMATION ── */
.mobile-link {
  transition: transform 0.5s var(--ease-out-expo),
              opacity 0.5s var(--ease-out-expo),
              color 0.3s;
}

.mobile-menu.open .mobile-link {
  opacity: 1;
  transform: translateX(0);
}

.mobile-menu.open .mobile-link:nth-child(1) { transition-delay: 0.15s; }
.mobile-menu.open .mobile-link:nth-child(2) { transition-delay: 0.22s; }
.mobile-menu.open .mobile-link:nth-child(3) { transition-delay: 0.29s; }
.mobile-menu.open .mobile-link:nth-child(4) { transition-delay: 0.36s; }

.mobile-menu.open .mobile-cta {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s 0.45s var(--ease-out-expo),
              transform 0.5s 0.45s var(--ease-out-expo);
}

.mobile-menu.open .mobile-menu-footer {
  opacity: 1;
  transition: opacity 0.5s 0.55s;
}

/* ── FOUNDER GLOW ORBIT ── */
@keyframes orbit {
  from { transform: rotate(0deg) translateX(140px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(140px) rotate(-360deg); }
}

/* ── SYSTEMS BG ANIMATION ── */
@keyframes systemsBgPulse {
  0%   { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
}

.systems-bg-glow {
  animation: systemsBgPulse 8s ease-in-out infinite;
}

/* ── FINAL CTA GLOW ANIMATION ── */
@keyframes ctaGlowFloat {
  0%   { transform: translateX(-60%) translateY(0); }
  50%  { transform: translateX(-60%) translateY(-20px); }
  100% { transform: translateX(-60%) translateY(0); }
}

.final-cta-glow--gold {
  animation: ctaGlowFloat 6s ease-in-out infinite;
}