/* ==========================================================
   Vision International Holdings — Douala/Bonanjo, Cameroon
   Brand accents: signature sky blue + Cameroon green/red/gold
   ========================================================== */

:root {
  --cm-green: #007a3d;
  --cm-red: #ce1126;
  --cm-gold: #fcd116;
  --brand-blue: #0284c7;
}

[x-cloak] { display: none !important; }

::selection { background: #bae6fd; color: #0c4a6e; }

html { scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; }

/* ---------- Flag accent strip ---------- */
.flag-strip {
  height: 4px;
  background: linear-gradient(90deg, var(--cm-green) 0 33.33%, var(--cm-red) 33.33% 66.66%, var(--cm-gold) 66.66% 100%);
  background-size: 200% 100%;
  animation: flagShift 6s linear infinite;
}
@keyframes flagShift {
  0% { background-position: 0% 0; }
  100% { background-position: -200% 0; }
}

.cm-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .85rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(4px);
}
.cm-badge .flag-dot {
  display: inline-flex;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: conic-gradient(var(--cm-green) 0 120deg, var(--cm-red) 120deg 240deg, var(--cm-gold) 240deg 360deg);
  flex: none;
}

/* ---------- Hero ---------- */
.hero-gradient {
  background: linear-gradient(120deg, #0c4a6e 0%, #0369a1 35%, #0ea5e9 70%, #38bdf8 100%);
  background-size: 220% 220%;
  animation: heroPan 16s ease infinite;
}
@keyframes heroPan {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .35;
  pointer-events: none;
  animation: floatY 9s ease-in-out infinite;
}
@keyframes floatY {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-24px) translateX(12px); }
}

.hero-dots {
  background-image: radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 26px 26px;
  animation: dotsDrift 40s linear infinite;
}
@keyframes dotsDrift {
  0% { background-position: 0 0; }
  100% { background-position: 260px 130px; }
}

.hero-scroll-cue {
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255,255,255,.6);
  border-radius: 999px;
  position: relative;
}
.hero-scroll-cue::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  width: 4px;
  height: 8px;
  border-radius: 999px;
  background: #fff;
  transform: translateX(-50%);
  animation: scrollCue 1.8s ease infinite;
}
@keyframes scrollCue {
  0% { opacity: 1; top: 6px; }
  70% { opacity: 0; top: 20px; }
  100% { opacity: 0; top: 6px; }
}

/* ---------- Buttons ---------- */
.btn-shine {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn-shine::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.45) 45%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s ease;
  z-index: 1;
}
.btn-shine:hover::after { transform: translateX(120%); }
.btn-shine:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(2,132,199,.45); }

/* ---------- Cards ---------- */
.card-hover {
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 32px -12px rgba(2,132,199,.2), 0 8px 12px -8px rgba(2,132,199,.12);
  border-color: #38bdf8;
}
.card-hover .icon-pop { transition: transform .35s ease; }
.card-hover:hover .icon-pop { transform: scale(1.12) rotate(-4deg); }

.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform .5s ease; }
.img-zoom:hover img { transform: scale(1.08); }

/* ---------- Nav underline ---------- */
.nav-underline { position: relative; }
.nav-underline::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--cm-green), var(--brand-blue), var(--cm-red));
  transition: width .25s ease;
}
.nav-underline:hover::after { width: 100%; }

/* ---------- Stat counters ---------- */
.stat-count { font-variant-numeric: tabular-nums; }

/* ---------- Marquee (partners) ---------- */
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
}
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---------- CTA banner motion (ship / plane / truck) ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(115deg, #075985, #0284c7 55%, #0c4a6e);
}
.cta-plane {
  position: absolute;
  top: 14%;
  left: -10%;
  font-size: 1.6rem;
  color: rgba(255,255,255,.5);
  animation: flyAcross 14s linear infinite;
}
@keyframes flyAcross {
  0% { left: -10%; transform: translateY(0) rotate(6deg); }
  50% { transform: translateY(-10px) rotate(6deg); }
  100% { left: 110%; transform: translateY(0) rotate(6deg); }
}
.cta-ship {
  position: absolute;
  bottom: 10%;
  color: rgba(255,255,255,.4);
  font-size: 1.4rem;
  animation: bobShip 5s ease-in-out infinite;
}
@keyframes bobShip {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.cta-truck {
  position: absolute;
  bottom: 6%;
  left: -8%;
  font-size: 1.4rem;
  color: rgba(255,255,255,.55);
  animation: driveAcross 10s linear infinite;
}
@keyframes driveAcross {
  0% { left: -8%; }
  100% { left: 108%; }
}

/* ---------- Reveal (fallback for elements w/o AOS) ---------- */
.reveal-up {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal-up.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Back to top ---------- */
#backToTop {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.9);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
#backToTop.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f0f9ff; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--cm-green), var(--brand-blue), var(--cm-red));
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: #38bdf8; }

/* ---------- Rich text content ---------- */
.rich-content img { border-radius: 0.5rem; margin: 1rem 0; }
.rich-content h2, .rich-content h3 { color: #075985; font-weight: 700; margin-top: 1.5rem; margin-bottom: .5rem; }
.rich-content p { margin-bottom: 1rem; line-height: 1.75; }
.rich-content ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-gradient, .hero-orb, .hero-dots, .hero-scroll-cue::before,
  .marquee-track, .cta-plane, .cta-ship, .cta-truck, .flag-strip {
    animation: none !important;
  }
  html { scroll-behavior: auto; }
}