/* ==========================================================================
   KSPTech — Animations
   Scroll reveals, keyframes, and micro-interactions.
   ========================================================================== */

/* Scroll reveal base state */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].in-view {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="left"].in-view { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="right"].in-view { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="scale"].in-view { transform: scale(1); }

/* Stagger children via inline delay set by JS: --d */
[data-reveal] { transition-delay: var(--d, 0s); }

/* Hero entrance (page load, not scroll-triggered) */
.hero-copy .eyebrow,
.hero-copy h1,
.hero-copy p,
.hero-copy .hero-actions {
  opacity: 0;
  animation: heroIn 0.8s var(--ease) forwards;
}
.hero-copy .eyebrow { animation-delay: 0.15s; }
.hero-copy h1 { animation-delay: 0.28s; }
.hero-copy p { animation-delay: 0.42s; }
.hero-copy .hero-actions { animation-delay: 0.56s; }

.hero-visual { opacity: 0; animation: heroVisualIn 1s var(--ease) 0.4s forwards; }

@keyframes heroIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroVisualIn {
  from { opacity: 0; transform: scale(0.92) rotate(-2deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

/* Ambient float / pulse for hero graphic nodes */
@keyframes pulseNode {
  0%, 100% { opacity: 0.5; r: 3; }
  50% { opacity: 1; r: 5; }
}
.orbit-svg .node { animation: pulseNode 3.4s ease-in-out infinite; }
.orbit-svg .node:nth-child(odd) { animation-delay: 0.8s; }
.orbit-svg .ring { animation: spinSlow 40s linear infinite; transform-origin: center; }
.orbit-svg .ring--reverse { animation-direction: reverse; animation-duration: 55s; }

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Gradient drift for dark section backdrops */
.section--dark::before {
  content: '';
  position: absolute;
  width: 900px; height: 900px;
  background: radial-gradient(circle, rgba(36,87,232,0.25), transparent 60%);
  top: -30%; left: -10%;
  filter: blur(30px);
  animation: driftA 18s ease-in-out infinite alternate;
  pointer-events: none;
}
.section--dark::after {
  content: '';
  position: absolute;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(124,92,255,0.2), transparent 60%);
  bottom: -25%; right: -10%;
  filter: blur(30px);
  animation: driftB 22s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes driftA {
  from { transform: translate(0, 0); }
  to { transform: translate(60px, 40px); }
}
@keyframes driftB {
  from { transform: translate(0, 0); }
  to { transform: translate(-50px, -30px); }
}

/* Card hover lift already handled via transitions in style.css */

/* Mobile menu link hover underline */
.mobile-menu a { position: relative; }

/* Number counter emphasis while animating */
.stat-number.is-counting { }

/* FAQ chevron rotation handled in style.css */

/* Modal fade for project details */
.modal { }

/* Reduced motion overrides */
@media (prefers-reduced-motion: reduce) {
  .hero-copy .eyebrow, .hero-copy h1, .hero-copy p, .hero-copy .hero-actions, .hero-visual {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .section--dark::before, .section--dark::after { animation: none !important; }
  .float-card { animation: none !important; }
}