/* ==========================================================================
   GeekHub Enterprise Technologies — animations.css
   Scroll reveal, entrance animations, hover effects
   No yellow. Accent: #1D236D (--accent / --accent-bright).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SCROLL REVEAL — base hidden states
   JS adds .is-visible when element enters viewport
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.70s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.70s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal--fade {
  opacity: 0;
  transform: none;
  transition: opacity 0.75s ease;
}

.reveal--left {
  opacity: 0;
  transform: translateX(-32px);
  transition:
    opacity 0.70s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.70s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal--right {
  opacity: 0;
  transform: translateX(32px);
  transition:
    opacity 0.70s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.70s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal--scale {
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal--top {
  opacity: 0;
  transform: translateY(-30px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. VISIBLE STATE
   -------------------------------------------------------------------------- */
.reveal.is-visible,
.reveal--fade.is-visible,
.reveal--left.is-visible,
.reveal--right.is-visible,
.reveal--scale.is-visible,
.reveal--top.is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   3. STAGGER CHILDREN
   -------------------------------------------------------------------------- */
.stagger-children > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.stagger-children.is-visible > *:nth-child(1)  { transition-delay: 0.00s; }
.stagger-children.is-visible > *:nth-child(2)  { transition-delay: 0.09s; }
.stagger-children.is-visible > *:nth-child(3)  { transition-delay: 0.18s; }
.stagger-children.is-visible > *:nth-child(4)  { transition-delay: 0.27s; }
.stagger-children.is-visible > *:nth-child(5)  { transition-delay: 0.36s; }
.stagger-children.is-visible > *:nth-child(6)  { transition-delay: 0.45s; }
.stagger-children.is-visible > *:nth-child(7)  { transition-delay: 0.54s; }
.stagger-children.is-visible > *:nth-child(n+8) { transition-delay: 0.60s; }

.stagger-children.is-visible > * {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   4. DELAY HELPERS
   -------------------------------------------------------------------------- */
.delay-100 { transition-delay: 0.10s !important; }
.delay-200 { transition-delay: 0.20s !important; }
.delay-300 { transition-delay: 0.30s !important; }
.delay-400 { transition-delay: 0.40s !important; }
.delay-500 { transition-delay: 0.50s !important; }
.delay-600 { transition-delay: 0.60s !important; }

/* --------------------------------------------------------------------------
   5. HERO ENTRANCE
   -------------------------------------------------------------------------- */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

.hero-animate-1 { animation: heroFadeUp 0.80s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both; }
.hero-animate-2 { animation: heroFadeUp 0.80s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both; }
.hero-animate-3 { animation: heroFadeUp 0.80s cubic-bezier(0.22, 1, 0.36, 1) 0.38s both; }
.hero-animate-4 { animation: heroFadeUp 0.80s cubic-bezier(0.22, 1, 0.36, 1) 0.52s both; }
.hero-animate-5 { animation: heroFadeIn  0.90s ease                           0.68s both; }

/* --------------------------------------------------------------------------
   6. COUNTER ANIMATION
   -------------------------------------------------------------------------- */
.counter-number {
  display: inline-block;
}

/* --------------------------------------------------------------------------
   7. MARQUEE
   -------------------------------------------------------------------------- */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}

.marquee-track:hover { animation-play-state: paused; }

.marquee-wrap {
  overflow: hidden;
  mask-image: linear-gradient(
    to right, transparent 0%, black 8%, black 92%, transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right, transparent 0%, black 8%, black 92%, transparent 100%
  );
}

/* --------------------------------------------------------------------------
   8. DOT PULSE (accent colour)
   -------------------------------------------------------------------------- */
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(29, 35, 109, 0.6); }
  50%       { box-shadow: 0 0 0 7px rgba(29, 35, 109, 0); }
}

.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-bright);
  animation: dotPulse 2.2s ease-in-out infinite;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   9. UNDERLINE HOVER
   -------------------------------------------------------------------------- */
.underline-hover {
  position: relative;
  display: inline-block;
}

.underline-hover::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent-bright);
  border-radius: 1px;
  transition: width 0.30s cubic-bezier(0.22, 1, 0.36, 1);
}

.underline-hover:hover::after { width: 100%; }

/* --------------------------------------------------------------------------
   10. IMAGE ZOOM ON HOVER
   -------------------------------------------------------------------------- */
.img-zoom { transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.img-zoom-wrap { overflow: hidden; }
.img-zoom-wrap:hover .img-zoom { transform: scale(1.05); }

/* --------------------------------------------------------------------------
   11. FLOAT ANIMATION (decorative elements)
   -------------------------------------------------------------------------- */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

.float-y { animation: floatY 5.5s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   12. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal,
  .reveal--fade,
  .reveal--left,
  .reveal--right,
  .reveal--scale,
  .reveal--top,
  .stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}