/* ================================================================
   CORPSHORE GHANA — ANIMATIONS
   ================================================================ */

/* Base keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-48px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes waPulse {
  0%   { box-shadow: 0 8px 32px rgba(37,211,102,.4); }
  50%  { box-shadow: 0 8px 40px rgba(37,211,102,.6), 0 0 0 12px rgba(37,211,102,.1); }
  100% { box-shadow: 0 8px 32px rgba(37,211,102,.4); }
}

@keyframes mapPulse {
  0%   { r: 8; opacity: .8; }
  50%  { r: 14; opacity: .3; }
  100% { r: 8; opacity: .8; }
}

@keyframes drawLine {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

@keyframes goldGlow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(252,209,22,.4)); }
  50%       { filter: drop-shadow(0 0 12px rgba(252,209,22,.8)); }
}

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

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ================================================================
   SCROLL-REVEAL CLASSES
   Applied by IntersectionObserver in main.js
   ================================================================ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}

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

.reveal-right {
  opacity: 0;
  transform: translateX(48px);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}

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

.reveal-scale {
  opacity: 0;
  transform: scale(.92);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}

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

/* Stagger delays */
.stagger-1 { transition-delay: .1s; }
.stagger-2 { transition-delay: .2s; }
.stagger-3 { transition-delay: .3s; }
.stagger-4 { transition-delay: .4s; }
.stagger-5 { transition-delay: .5s; }
.stagger-6 { transition-delay: .6s; }
.stagger-7 { transition-delay: .7s; }
.stagger-8 { transition-delay: .8s; }

/* ================================================================
   PAGE TRANSITIONS
   ================================================================ */
.page-transition {
  animation: fadeUp .5s cubic-bezier(.22,1,.36,1) both;
}

/* ================================================================
   HERO ANIMATIONS
   ================================================================ */
.hero__badge   { animation: fadeDown .6s .1s both; }
.hero h1       { animation: fadeUp .7s .2s both; }
.hero__sub     { animation: fadeUp .7s .35s both; }
.hero__actions { animation: fadeUp .7s .5s both; }
.hero__image-wrap { animation: fadeInRight .8s .3s both; }

/* ================================================================
   NAV SCROLL EFFECT
   ================================================================ */
.nav {
  transition: box-shadow .3s ease, background .3s ease;
}

/* ================================================================
   GOLD SHIMMER BADGE
   ================================================================ */
.shimmer {
  background: linear-gradient(
    90deg,
    rgba(252,209,22,0) 0%,
    rgba(252,209,22,.3) 50%,
    rgba(252,209,22,0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* ================================================================
   MAP CONNECTION LINES
   ================================================================ */
.map-line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawLine 2s cubic-bezier(.22,1,.36,1) forwards;
}

.map-line:nth-child(1) { animation-delay: .2s; }
.map-line:nth-child(2) { animation-delay: .4s; }
.map-line:nth-child(3) { animation-delay: .6s; }
.map-line:nth-child(4) { animation-delay: .8s; }
.map-line:nth-child(5) { animation-delay: 1.0s; }
.map-line:nth-child(6) { animation-delay: 1.2s; }
.map-line:nth-child(7) { animation-delay: 1.4s; }
.map-line:nth-child(8) { animation-delay: 1.6s; }

/* Map markers */
.map-marker-pulse {
  animation: mapPulse 2s ease-in-out infinite;
}

.map-marker-glow {
  animation: goldGlow 2s ease-in-out infinite;
}

/* ================================================================
   CAREERS CARD STAGGER
   ================================================================ */
.job-card {
  animation: fadeUp .4s ease both;
}

.job-card:nth-child(1) { animation-delay: .0s; }
.job-card:nth-child(2) { animation-delay: .06s; }
.job-card:nth-child(3) { animation-delay: .12s; }
.job-card:nth-child(4) { animation-delay: .18s; }
.job-card:nth-child(5) { animation-delay: .24s; }
.job-card:nth-child(6) { animation-delay: .30s; }

/* ================================================================
   COUNTER NUMBER
   ================================================================ */
.stat-card__number {
  transition: color .3s ease;
}

.stat-card--counting .stat-card__number {
  color: #e8be00;
}

/* ================================================================
   LOADING SPINNER
   ================================================================ */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(10,36,99,.15);
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

/* ================================================================
   PROGRESS BAR
   ================================================================ */
.progress-fill {
  transition: width .8s cubic-bezier(.22,1,.36,1);
}

/* ================================================================
   FORM FIELD FOCUS
   ================================================================ */
.form-field input,
.form-field select,
.form-field textarea {
  transition: border-color .2s ease, box-shadow .2s ease;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  box-shadow: 0 0 0 3px rgba(10,36,99,.08);
}

/* ================================================================
   INDUSTRY CARD HOVER ICON
   ================================================================ */
.industry-card:hover .industry-card__icon {
  transform: scale(1.1) rotate(-5deg);
  transition: transform .3s ease;
}

/* ================================================================
   STAT HEX COUNTER
   ================================================================ */
.stat-hex--counting .stat-hex__val {
  animation: goldGlow .3s ease-in-out;
}