/* ═══════════════════════════════════════════════════
   IRAWO STAR — REUSABLE COMPONENTS
═══════════════════════════════════════════════════ */

/* ── NIGERIA MAP (SVG) ─────────────────────────── */
.ng-map {
  width: 100%;
  height: 100%;
}

.ng-map__state {
  fill: rgba(21, 101, 192, 0.12);
  stroke: rgba(21, 101, 192, 0.3);
  stroke-width: 1;
  transition: all 0.3s ease;
  cursor: pointer;
}

.ng-map__state:hover,
.ng-map__state.active {
  fill: rgba(21, 101, 192, 0.35);
  stroke: var(--c-primary);
  filter: drop-shadow(0 0 12px rgba(21, 101, 192, 0.5));
}

.ng-map__dot {
  fill: var(--c-accent);
  filter: drop-shadow(0 0 6px var(--c-accent));
  animation: mapPulse 2s infinite;
  cursor: pointer;
  transition: r 0.2s;
}

.ng-map__dot:hover { r: 8; }

@keyframes mapPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

.ng-map__label {
  fill: var(--c-silver);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
  letter-spacing: 0.05em;
}

.ng-map__outline {
  fill: rgba(21, 101, 192, 0.05);
  stroke: rgba(21, 101, 192, 0.2);
  stroke-width: 1.5;
}

/* ── SCROLL PROGRESS BAR ───────────────────────── */
.scroll-progress {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--c-accent), var(--c-primary));
  z-index: 1001;
  transform-origin: left;
  transition: none;
}

/* ── FLOATING CTA ───────────────────────────────── */
.float-cta {
  position: fixed;
  bottom: var(--sp-8);
  right: var(--sp-8);
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: all var(--dur-base) var(--ease-out);
}

.float-cta.visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.float-cta__btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}

.float-cta__btn:hover { transform: scale(1.1); box-shadow: var(--shadow-deep); }
.float-cta__btn svg   { width: 22px; height: 22px; }

.float-cta__btn--wa { background: #25D366; color: #fff; }
.float-cta__btn--up {
  background: var(--c-bg-2);
  border: 1px solid var(--c-glass-border);
  color: var(--c-silver);
}

/* ── PAGE LOADER ────────────────────────────────── */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  transition: opacity 0.6s var(--ease-out), visibility 0.6s;
}

.page-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.page-loader__logo { width: 64px; height: 64px; animation: loaderPulse 1.5s ease-in-out infinite; }

@keyframes loaderPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.95); }
  50%       { opacity: 1;   transform: scale(1);    }
}

.page-loader__bar-wrap {
  width: 200px;
  height: 1px;
  background: rgba(0,0,0,0.1);
  border-radius: 1px;
  overflow: hidden;
}

.page-loader__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--c-primary), var(--c-dark-blue));
  border-radius: 1px;
  animation: loaderBar 1.8s var(--ease-out) forwards;
}

@keyframes loaderBar { from { width: 0; } to { width: 100%; } }

.page-loader__text {
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* ── TILT CARD (3D hover effect) ───────────────── */
[data-tilt] { transform-style: preserve-3d; }

/* ── RIPPLE EFFECT ──────────────────────────────── */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(21, 101, 192, 0.25);
  transform: scale(0);
  animation: rippleAnim 0.6s linear;
  pointer-events: none;
}

@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ── REVEAL UTILITIES ───────────────────────────── */
[data-reveal] { opacity: 0; will-change: transform, opacity; }
[data-split-line] { overflow: hidden; }
[data-split-line .line-inner] { display: block; }

/* ── GLOW AMBIENT ───────────────────────────────── */
.ambient-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.ambient-glow--blue {
  background: radial-gradient(circle, rgba(21,101,192,0.2), transparent 70%);
  width: 600px; height: 600px;
}

.ambient-glow--dark-blue {
  background: radial-gradient(circle, rgba(29,47,138,0.15), transparent 70%);
  width: 400px; height: 400px;
}

/* ── NOISE TEXTURE OVERLAY ──────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.022;
  pointer-events: none;
  z-index: 9998;
}

/* ── VIDEO HOVER PLAY ───────────────────────────── */
.prop-card__video { pointer-events: none; }