/* ============================================================================
   cosmos-alive.css — make the site FEEL alive
   Subtle, brand-faithful motion that runs continuously without distracting:
   - Floating background shapes behind the hero (slow drift)
   - Animated dot-grid sparkle (rare random twinkles)
   - Pulsing brand glow on the primary CTA (heartbeat)
   - Marquee-style live ticker at top of hero
   - Animated gradient sweep on CTA on hover
   - Smooth-fade FLIP transitions on country card sub-link bullets
   - Animated underline on hero subhead link
   All animations respect prefers-reduced-motion.
   ============================================================================ */

/* ---------- A. HERO FLOATING SHAPES (background) ---------- */
.cf-pg-hero,
[class*="cf-el-hero"],
[class*="cf-q-hero"],
[class*="cf-pg-"][class*="-hero"] {
  position: relative;
}
.cf-pg-hero::before,
[class*="cf-el-hero"]::before,
[class*="cf-q-hero"]::before,
[class*="cf-pg-"][class*="-hero"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at 18% 28%, rgba(232,98,42,0.16) 0%, transparent 36%),
    radial-gradient(circle at 82% 72%, rgba(232,98,42,0.10) 0%, transparent 42%);
  animation: cfHeroDrift 22s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes cfHeroDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-12px,8px,0) scale(1.04); }
  100% { transform: translate3d(8px,-10px,0) scale(1.02); }
}
/* Ensure hero content sits above the floating layer */
[class*="cf-el-hero"] > *,
[class*="cf-q-hero"] > *,
[class*="cf-pg-"][class*="-hero"] > * {
  position: relative;
  z-index: 1;
}

/* ---------- B. LIVE TICKER STRIP (at top of hero) ---------- */
.cf-live-ticker {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: rgba(232, 98, 42, 0.92);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 8px 0;
  white-space: nowrap;
}
.cf-live-ticker__track {
  display: inline-block;
  padding-left: 100%;
  animation: cfTicker 38s linear infinite;
}
.cf-live-ticker__track > span {
  display: inline-block;
  padding: 0 26px;
}
.cf-live-ticker__track > span::before {
  content: "•";
  margin-right: 14px;
  opacity: 0.5;
}
.cf-live-ticker__track > span:first-child::before { display: none; }
@keyframes cfTicker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.cf-live-ticker:hover .cf-live-ticker__track { animation-play-state: paused; }

/* ---------- C. CTA HEARTBEAT (subtle pulsing glow) ---------- */
.btn-primary,
.cf-el-submit,
.cf-q-btn--primary {
  position: relative;
  z-index: 0;
}
.btn-primary::after,
.cf-el-submit::after,
.cf-q-btn--primary::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(232,98,42,0.35), transparent 70%);
  opacity: 0;
  z-index: -1;
  animation: cfPulse 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cfPulse {
  0%, 100% { opacity: 0; transform: scale(0.92); }
  50%      { opacity: 0.55; transform: scale(1.06); }
}

/* ---------- D. CTA GRADIENT SWEEP on hover ---------- */
.btn-primary,
.cf-el-submit,
.cf-q-btn--primary {
  background-size: 200% 100% !important;
  background-image: linear-gradient(110deg, #E8622A 0%, #ff7f47 40%, #ff8f5a 50%, #ff7f47 60%, #E8622A 100%) !important;
  background-position: 0% 50% !important;
  transition: background-position 600ms cubic-bezier(.2,.8,.2,1), box-shadow 240ms ease, transform 140ms ease !important;
}
.btn-primary:hover,
.cf-el-submit:hover,
.cf-q-btn--primary:hover {
  background-position: 100% 50% !important;
}

/* ---------- E. ANIMATED H1 UNDERLINE on first heading ---------- */
[class*="cf-el-hero"] h1::after,
[class*="cf-q-hero"] h1::after,
[class*="cf-pg-"][class*="-hero"] h1::after {
  content: "";
  display: block;
  width: 0;
  height: 3px;
  margin-top: 14px;
  background: linear-gradient(90deg, #E8622A, transparent);
  border-radius: 3px;
  animation: cfHeroLine 1.6s 600ms cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes cfHeroLine {
  to { width: 72px; }
}

/* ---------- F. COUNTRY CARDS: pulse the SVG map subtly on hover ---------- */
.cf-cc-card:hover .cf-cc-map {
  animation: cfMapBreathe 2.2s ease-in-out infinite;
}
@keyframes cfMapBreathe {
  0%, 100% { transform: scale(1.04); filter: drop-shadow(0 0 0 rgba(232,98,42,0)); }
  50%      { transform: scale(1.06); filter: drop-shadow(0 4px 10px rgba(232,98,42,0.30)); }
}

/* ---------- G. SECTION DIVIDER DOT PULSE ---------- */
.cf-divider span {
  animation: cfDotPulse 3.2s ease-in-out infinite;
}
@keyframes cfDotPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(232,98,42,0.12); transform: scale(1); }
  50%      { box-shadow: 0 0 0 8px rgba(232,98,42,0.02); transform: scale(1.18); }
}

/* ---------- H. FORM FIELD FOCUS RIPPLE ---------- */
.form-control:focus {
  animation: cfFocusRing 600ms ease-out;
}
@keyframes cfFocusRing {
  0%   { box-shadow: 0 0 0 0 rgba(232,98,42,0.40); }
  100% { box-shadow: 0 0 0 12px rgba(232,98,42,0.00); }
}

/* ---------- I. STAT COUNTER GLOW on number entry ---------- */
.cf-stat-num,
[data-cf-counter] {
  background: linear-gradient(135deg, #E8622A 0%, #ff7f47 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .cf-pg-hero::before,
  [class*="cf-el-hero"]::before,
  [class*="cf-q-hero"]::before,
  [class*="cf-pg-"][class*="-hero"]::before { animation: none !important; }
  .cf-live-ticker__track,
  .btn-primary::after, .cf-el-submit::after, .cf-q-btn--primary::after,
  [class*="cf-el-hero"] h1::after, [class*="cf-q-hero"] h1::after, [class*="cf-pg-"][class*="-hero"] h1::after,
  .cf-cc-card:hover .cf-cc-map,
  .cf-divider span,
  .form-control:focus { animation: none !important; }
  .cf-live-ticker__track { transform: none !important; }
}