/* ==========================================================================
   GhazTech Design System — Animations
   Keyframes, reveal states, hover/elevation transitions, star-fill animation.
   All animations restrict themselves to transform/opacity for GPU compositing.
   ========================================================================== */

/* ---- Reveal-on-scroll base state (driven by observer.js) ---- */
.reveal {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity var(--duration-slow) var(--ease-premium),
    transform var(--duration-slow) var(--ease-premium);
  will-change: transform, opacity;
}
.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-left {
  opacity: 0;
  transform: translate3d(-36px, 0, 0);
  transition: opacity var(--duration-slow) var(--ease-premium),
    transform var(--duration-slow) var(--ease-premium);
}
.reveal-left.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-right {
  opacity: 0;
  transform: translate3d(36px, 0, 0);
  transition: opacity var(--duration-slow) var(--ease-premium),
    transform var(--duration-slow) var(--ease-premium);
}
.reveal-right.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity var(--duration-slow) var(--ease-premium),
    transform var(--duration-slow) var(--ease-premium);
}
.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ---- Keyframes ---- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes floatY {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -12px, 0);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes checkPop {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  60% {
    transform: scale(1.15);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

/* Same pop as checkPop, but preserving the translateY that vertically
   centres the valid-field tick inside its input. */
@keyframes checkPopCentered {
  0% {
    transform: translateY(-50%) scale(0.4);
    opacity: 0;
  }
  60% {
    transform: translateY(-50%) scale(1.15);
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) scale(1);
  }
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

@keyframes starFill {
  0% {
    transform: scale(0.6) rotate(-12deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.25) rotate(4deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}
.star-pop {
  animation: starFill var(--duration-base) var(--ease-premium);
}

/* Sector marquee — the track holds the pill list twice, so shifting it by
   exactly half its width loops seamlessly. */
@keyframes marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes chipPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(22, 58, 153, 0.25);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(22, 58, 153, 0);
  }
}

/* ---- Hero / decorative float elements ---- */
.float-slow {
  animation: floatY 7s ease-in-out infinite;
}
.float-slower {
  animation: floatY 10s ease-in-out infinite;
  animation-delay: 1.2s;
}

/* ---- Hover elevation utility (applied broadly to .glass surfaces) ---- */
.hover-lift {
  transition: transform var(--duration-base) var(--ease-premium),
    box-shadow var(--duration-base) var(--ease-premium);
}
.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: var(--glass-shadow-lift);
}

/* ---- Parallax targets (transform driven by parallax.js) ---- */
[data-parallax] {
  will-change: transform;
}

/* ---- Staggered reveal delay helper classes, applied inline by observer.js
   through --reveal-delay custom property to avoid class explosion. ---- */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
  transition-delay: var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .bg-ambient,
  .float-slow,
  .float-slower,
  .sector-track {
    animation: none !important;
  }
  /* Show the process connectors already drawn rather than sweeping them in. */
  .process-step + .process-step::before {
    transition: none !important;
    transform: scaleX(1) !important;
  }
  .timeline__item:not(:last-child)::before {
    transition: none !important;
    transform: scaleY(1) !important;
  }
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }
}