/* ===================================================
   animations.css — GSAP ScrollTrigger helper classes
   Initial states set here; GSAP overwrites via JS
   =================================================== */

/* ===== Fade-up (default reveal) ===== */
[data-anim="fade-up"] {
  opacity: 0;
  transform: translateY(40px);
}

/* ===== Fade-in ===== */
[data-anim="fade-in"] {
  opacity: 0;
}

/* ===== Slide-left ===== */
[data-anim="slide-left"] {
  opacity: 0;
  transform: translateX(-60px);
}

/* ===== Slide-right ===== */
[data-anim="slide-right"] {
  opacity: 0;
  transform: translateX(60px);
}

/* ===== Scale-up ===== */
[data-anim="scale-up"] {
  opacity: 0;
  transform: scale(0.9);
}

/* ===== Stagger children ===== */
[data-anim-stagger] > * {
  opacity: 0;
  transform: translateY(30px);
}

/* ===== Text reveal line ===== */
.text-reveal-wrap {
  overflow: hidden;
  display: block;
}

.text-reveal {
  display: block;
  transform: translateY(100%);
}

/* ===== Counter ===== */
.counter-value {
  display: inline-block;
}

/* ===== Parallax ===== */
[data-parallax] {
  will-change: transform;
}

/* ===== Pin indicator (tech horizontal) ===== */
.tech-progress {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.3s;
}

.tech-progress.visible { opacity: 1; }

.tech-progress-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transition: background 0.3s, transform 0.3s;
}

.tech-progress-dot.active {
  background: var(--color-accent);
  transform: scale(1.4);
}

/* ===== Line draw ===== */
.line-draw {
  width: 0;
  height: 1px;
  background: var(--color-accent);
  transition: width 0.8s var(--ease-out);
}

.line-draw.visible { width: 100%; }

/* ===== Glitch text effect (hero title) ===== */
@keyframes glitch-1 {
  0%   { clip-path: inset(0 0 90% 0); transform: translate(-2px); }
  20%  { clip-path: inset(30% 0 50% 0); transform: translate(2px); }
  40%  { clip-path: inset(70% 0 10% 0); transform: translate(-2px); }
  60%  { clip-path: inset(10% 0 70% 0); transform: translate(2px); }
  80%  { clip-path: inset(50% 0 30% 0); transform: translate(-2px); }
  100% { clip-path: inset(0 0 90% 0); transform: translate(0); }
}

.hero-title.glitch {
  position: relative;
}

/* ===== Animated grid background (light base) ===== */
.bg-grid {
  background-image:
    linear-gradient(rgba(26, 35, 136, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 35, 136, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center center;
}

/* ===== Floating glow orb (light-base tint) ===== */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.glow-orb-primary {
  background: rgba(26, 35, 136, 0.07);
}

.glow-orb-accent {
  background: rgba(0, 229, 255, 0.10);
}

/* ===== Reduced-motion fallback ===== */
@media (prefers-reduced-motion: reduce) {
  [data-anim],
  [data-anim-stagger] > *,
  .text-reveal,
  .hero-scroll-line {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}