/* ============================================================
   animations.css — Reusable animation system for Intrinsic Power
   ============================================================ */

/* ----------------------------------------------------------
   Keyframe Definitions
   ---------------------------------------------------------- */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Ken Burns — slow zoom on hero image */
@keyframes kenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* Shimmer sweep — plays once on featured image */
@keyframes shimmer {
  0%   { left: -100%; }
  100% { left: 100%; }
}

/* Pulse glow for feat-tags */
@keyframes pulseGlow {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}


/* ----------------------------------------------------------
   Utility Classes — Elements start invisible
   ---------------------------------------------------------- */

.anim-fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.anim-fade-in {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.anim-slide-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.anim-slide-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.anim-scale-in {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* ----------------------------------------------------------
   Triggered State — Applied by IntersectionObserver
   ---------------------------------------------------------- */

.anim-fade-up.is-visible,
.anim-fade-in.is-visible,
.anim-slide-left.is-visible,
.anim-slide-right.is-visible,
.anim-scale-in.is-visible {
  opacity: 1;
  transform: none;
}

/* ----------------------------------------------------------
   Stagger Delays
   ---------------------------------------------------------- */

.anim-delay-1 { transition-delay: 100ms; }
.anim-delay-2 { transition-delay: 200ms; }
.anim-delay-3 { transition-delay: 300ms; }
.anim-delay-4 { transition-delay: 400ms; }

/* ----------------------------------------------------------
   Button Transitions
   ---------------------------------------------------------- */

.btn,
button,
[type="submit"] {
  transition: opacity 0.25s ease, transform 0.15s ease;
}

/* ----------------------------------------------------------
   Link Transitions
   ---------------------------------------------------------- */

a {
  transition: color 0.25s ease;
}

/* ----------------------------------------------------------
   Nav Backdrop Animation
   ---------------------------------------------------------- */

nav {
  animation: slideDown 0.5s ease forwards;
}

/* ----------------------------------------------------------
   Hero Image — Ken Burns slow zoom
   ---------------------------------------------------------- */

.hero-r img {
  animation: kenBurns 20s ease-in-out infinite alternate;
}

/* ----------------------------------------------------------
   Hero Gradient Accent Line — animated green-blue border
   ---------------------------------------------------------- */


/* ----------------------------------------------------------
   Hero Grid Background — subtle tech dot pattern
   ---------------------------------------------------------- */

.hero-l {
  background-image: radial-gradient(rgba(39, 173, 129, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ----------------------------------------------------------
   Featured Card Shimmer
   ---------------------------------------------------------- */

.card.featured {
  position: relative;
  overflow: hidden;
}

.card.featured::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
  animation: shimmer 2s ease 0.5s 1 forwards;
  pointer-events: none;
}

/* ----------------------------------------------------------
   Card Spotlight — radial gradient follows mouse
   ---------------------------------------------------------- */

.card.has-spotlight::before,
.stat.has-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle 200px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(39, 173, 129, 0.06),
    transparent 60%
  );
  pointer-events: none;
  z-index: 1;
}

.card {
  position: relative;
}

/* ----------------------------------------------------------
   Insight Border Draw Animation
   ---------------------------------------------------------- */

.insight.g,
.insight.b {
  border-left: none;
  position: relative;
  overflow: hidden;
}

.insight.g::before,
.insight.b::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 0;
  transition: height 0.8s ease;
}

.insight.g::before { background: var(--g); }
.insight.b::before { background: var(--b); }

.anim-slide-right.is-visible .insight.g::before,
.anim-slide-right.is-visible .insight.b::before,
.insight.g.is-visible::before,
.insight.b.is-visible::before {
  height: 100%;
}

/* ----------------------------------------------------------
   Scroll Progress Bar
   ---------------------------------------------------------- */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--g), var(--b));
  z-index: 300;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* ----------------------------------------------------------
   Feat-tag subtle pulse when card is visible
   ---------------------------------------------------------- */

.card.is-visible .feat-tag {
  animation: pulseGlow 2s ease 0.5s 2;
}

/* ----------------------------------------------------------
   Accessibility — Respect reduced-motion preference
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .anim-fade-up,
  .anim-fade-in,
  .anim-slide-left,
  .anim-slide-right,
  .anim-scale-in {
    opacity: 1;
    transform: none;
  }

  .hero-r img {
    animation: none;
  }

  .insight.g::before,
  .insight.b::before {
    height: 100%;
  }
}