/* ═══════════════════════════════════════════════════════════
   animations.css — keyframes + reveal classes
   ═══════════════════════════════════════════════════════════ */

/* ─── Keyframes ─────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-48px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes float {
  0%, 100% { transform: translateY(0)   rotate(0deg);   }
  33%       { transform: translateY(-18px) rotate(2deg);  }
  66%       { transform: translateY(-8px)  rotate(-1deg); }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0) scale(1);    }
  50%       { transform: translateY(-24px) scale(1.04); }
}
@keyframes blobMorph {
  0%,100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25%     { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50%     { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; }
  75%     { border-radius: 40% 30% 60% 50% / 70% 40% 60% 30%; }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(1.06); opacity: .85; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes gradientMove {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}
@keyframes typewriterBlink {
  0%,100% { border-color: var(--accent); }
  50%     { border-color: transparent; }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes progressFill {
  from { width: 0; }
  to   { width: var(--progress); }
}
@keyframes ripple {
  to { transform: scale(3); opacity: 0; }
}

/* ─── Page load fade ────────────────────────────────────────── */
body { opacity: 0; transition: opacity .4s ease; }
body.page-loaded { opacity: 1; }

/* ─── Scroll reveal classes ─────────────────────────────────── */
.reveal, .reveal-left, .reveal-right, .reveal-scale {
  opacity: 0;
  transition: opacity .65s cubic-bezier(.22,1,.36,1),
              transform .65s cubic-bezier(.22,1,.36,1);
}
.reveal       { transform: translateY(28px); }
.reveal-left  { transform: translateX(-36px); }
.reveal-right { transform: translateX(36px); }
.reveal-scale { transform: scale(.93); }

.reveal.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible {
  opacity: 1;
  transform: none;
}

/* ─── Stagger wrapper — children auto-stagger ───────────────── */
.stagger-parent > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s cubic-bezier(.22,1,.36,1),
              transform .55s cubic-bezier(.22,1,.36,1);
}
.stagger-parent > *.visible {
  opacity: 1;
  transform: none;
}

/* ─── Floating blobs (hero bg) ──────────────────────────────── */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  animation: blobMorph 12s ease-in-out infinite, floatSlow 8s ease-in-out infinite;
  opacity: .18;
  will-change: border-radius, transform;
}
.blob--1 { width: 520px; height: 520px; background: #1a56db; top: -80px;  left: 55%; animation-delay: 0s, 0s; }
.blob--2 { width: 380px; height: 380px; background: #7c3aed; bottom: -60px; left: 65%; animation-delay: 4s, 2s; opacity: .12; }
.blob--3 { width: 260px; height: 260px; background: #f59e0b; top: 40%;  left: 20%; animation-delay: 8s, 4s; opacity: .08; }

/* ─── Floating decorative shapes ────────────────────────────── */
.float-shape {
  position: absolute;
  animation: float 6s ease-in-out infinite;
  pointer-events: none;
}

/* ─── Shimmer / loading skeleton ────────────────────────────── */
.shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 6px;
}

/* ─── Progress bars ─────────────────────────────────────────── */
.progress-bar {
  height: 6px;
  background: var(--mid);
  border-radius: 100px;
  overflow: hidden;
}
.progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), #60a5fa);
  border-radius: 100px;
  width: 0;
  transition: width 1.2s cubic-bezier(.22,1,.36,1);
}
.progress-bar__fill.animate { width: var(--progress); }

/* ─── Gradient animated text ────────────────────────────────── */
.gradient-text {
  background: linear-gradient(90deg, #fff 0%, var(--accent) 40%, #fff 60%, var(--accent) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}

/* ─── Button ripple effect ──────────────────────────────────── */
.btn { position: relative; overflow: hidden; }
.btn .ripple-el {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  width: 8px; height: 8px;
  margin-left: -4px; margin-top: -4px;
  transform: scale(0);
  animation: ripple .6s linear;
  pointer-events: none;
}

/* ─── Card hover shine ──────────────────────────────────────── */
.card-shine {
  position: relative;
  overflow: hidden;
}
.card-shine::after {
  content: '';
  position: absolute;
  top: -50%; left: -75%;
  width: 50%; height: 200%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.07) 50%, transparent 60%);
  transform: skewX(-15deg);
  transition: left .5s ease;
  pointer-events: none;
}
.card-shine:hover::after { left: 125%; }

/* ─── Animated underline links ──────────────────────────────── */
.link-underline {
  position: relative;
}
.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: var(--blue);
  transition: width .3s ease;
}
.link-underline:hover::after { width: 100%; }

/* ─── Notification / toast ──────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 28px; right: 28px;
  background: var(--navy);
  color: #fff;
  padding: 14px 24px;
  border-radius: 10px;
  font-size: .9rem;
  font-weight: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
  z-index: 9999;
  animation: fadeUp .4s ease, fadeIn .4s ease;
  border-left: 4px solid var(--accent);
}
.toast.success { border-color: #059669; }
.toast.error   { border-color: #dc2626; }

/* ─── Inner page hero (smaller, for sub-pages) ──────────────── */
.page-hero {
  background: linear-gradient(135deg, var(--navy) 0%, #0d2347 60%, #0a3060 100%);
  padding: 140px 0 80px;
  position: relative;
  overflow: hidden;
}
.page-hero .blob--1 { opacity: .10; }
.page-hero .blob--2 { opacity: .07; }
.page-hero__inner { position: relative; z-index: 1; }
.page-hero__tag {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(245,158,11,.15);
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 20px;
  animation: fadeUp .6s ease both;
}
.page-hero h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -.03em;
  line-height: 1.12;
  margin-bottom: 18px;
  animation: fadeUp .6s .1s ease both;
}
.page-hero p {
  font-size: 1.1rem;
  color: rgba(255,255,255,.72);
  max-width: 580px;
  line-height: 1.7;
  animation: fadeUp .6s .2s ease both;
}
.page-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  color: rgba(255,255,255,.45);
  margin-bottom: 20px;
  animation: fadeUp .5s ease both;
}
.page-hero__breadcrumb a { color: rgba(255,255,255,.55); }
.page-hero__breadcrumb a:hover { color: var(--accent); }
.page-hero__breadcrumb span { color: rgba(255,255,255,.25); }

/* ─── Nav active state ──────────────────────────────────────── */
.nav__link--active {
  color: var(--white) !important;
  position: relative;
}
.nav__link--active::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* ─── Burger open state ─────────────────────────────────────── */
.nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }