/* ==========================================================================
   INFOSEC — Animations
   ========================================================================== */

/* ── Scroll Reveal Base ────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal from left */
.reveal--left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.reveal--left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Reveal from right */
.reveal--right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.reveal--right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale up */
.reveal--scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.reveal--scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* ── Staggered children ────────────────────────────────────────────────── */
.stagger-children .reveal:nth-child(1) { transition-delay: 0ms; }
.stagger-children .reveal:nth-child(2) { transition-delay: 100ms; }
.stagger-children .reveal:nth-child(3) { transition-delay: 200ms; }
.stagger-children .reveal:nth-child(4) { transition-delay: 300ms; }
.stagger-children .reveal:nth-child(5) { transition-delay: 400ms; }
.stagger-children .reveal:nth-child(6) { transition-delay: 500ms; }

/* ── Hero title animation ──────────────────────────────────────────────── */
.hero__title {
  animation: heroFadeIn 1s var(--ease-out) 0.2s both;
}

.hero__subtitle {
  animation: heroFadeIn 1s var(--ease-out) 0.4s both;
}

.hero__actions {
  animation: heroFadeIn 1s var(--ease-out) 0.6s both;
}

.hero__stats {
  animation: heroFadeIn 1s var(--ease-out) 0.8s both;
}

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

/* ── Floating animation (for decorative elements) ──────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

/* ── Gradient text shimmer ─────────────────────────────────────────────── */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animate-gradient-text {
  background-size: 200% auto;
  animation: gradientShift 4s ease-in-out infinite;
}

/* ── Ping / pulse dot ──────────────────────────────────────────────────── */
@keyframes ping {
  0% { transform: scale(1); opacity: 1; }
  75%, 100% { transform: scale(2); opacity: 0; }
}

.animate-ping {
  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* ── Card glow pulse ───────────────────────────────────────────────────── */
@keyframes cardGlowPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(54, 147, 154, 0); }
  50% { box-shadow: 0 0 20px rgba(54, 147, 154, 0.15); }
}

/* ── Risk card attention pulse ─────────────────────────────────────────── */
@keyframes riskPulse {
  0%, 100% { border-color: rgba(184, 151, 90, 0.15); }
  50% { border-color: rgba(184, 151, 90, 0.35); }
}

.card--risk.visible {
  animation: riskPulse 3s ease-in-out infinite;
}

/* ── Counter number roll ───────────────────────────────────────────────── */
.stat__number[data-count] {
  transition: none;
}

/* ── Gauge fill animation ──────────────────────────────────────────────── */
.gauge__fill {
  transition: stroke-dashoffset 1.8s var(--ease-out);
}

/* ── Nav link underline sweep ──────────────────────────────────────────── */
@keyframes underlineSweep {
  from { width: 0; }
  to { width: 100%; }
}

/* ── Mobile menu entry ─────────────────────────────────────────────────── */
.mobile-menu__link {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.mobile-menu.open .mobile-menu__link:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.mobile-menu.open .mobile-menu__link:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
.mobile-menu.open .mobile-menu__link:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.mobile-menu.open .mobile-menu__link:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.25s; }
.mobile-menu.open .mobile-menu__link:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.mobile-menu.open .mobile-menu__link:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 0.35s; }

/* ── Accordion expand ──────────────────────────────────────────────────── */
.accordion__body {
  transition: max-height 0.5s var(--ease-out), opacity 0.3s var(--ease-out);
  opacity: 0;
}

.accordion__item.expanded .accordion__body {
  opacity: 1;
}

/* ── Reduced motion override ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--scale {
    opacity: 1;
    transform: none;
    transition: none;
  }
  
  .hero__title,
  .hero__subtitle,
  .hero__actions,
  .hero__stats {
    animation: none;
    opacity: 1;
  }
}