/* ============================================================
   Anuvu animated scene — drop-in globe + planes
   Match palette: --orbit-navy, --ocean, --mint
   ============================================================ */

.anuvu-scene {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 80% at 80% 60%, rgba(96,240,235,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 10% 0%,  rgba(96,240,235,0.08) 0%, transparent 60%),
    linear-gradient(135deg, #0a3350 0%, #0e3f5e 50%, #002b44 100%);
}

/* Host container helper — stretches the scene to fill its parent
   (overrides parent flex/center alignment) */
.anuvu-scene-host {
  width: 100%;
  height: 100%;
  align-self: stretch;
  flex: 1 1 auto;
  display: block;
}

/* When .maincardimage contains our scene, drop its white background */
.maincardimage:has([data-anuvu-scene]),
.maincardimage:has(.anuvu-scene) {
  background: transparent !important;
  border-bottom: none !important;
  display: block !important;
}

/* Star/sparkle layer */
.anuvu-scene__stars {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent 60%),
    radial-gradient(1px 1px at 28% 32%, #fff, transparent 60%),
    radial-gradient(1px 1px at 47% 14%, #fff, transparent 60%),
    radial-gradient(1px 1px at 62% 28%, #fff, transparent 60%),
    radial-gradient(1px 1px at 8%  62%, #fff, transparent 60%),
    radial-gradient(1.4px 1.4px at 22% 78%, #fff, transparent 60%),
    radial-gradient(1.4px 1.4px at 38% 52%, #fff, transparent 60%),
    radial-gradient(1px 1px at 18% 8%, #fff, transparent 60%);
  animation: anuvuTwinkle 4s ease-in-out infinite;
}
@keyframes anuvuTwinkle { 0%,100% { opacity:.45 } 50% { opacity:.8 } }

.anuvu-scene__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Grid pattern overlay on left side */
.anuvu-scene__grid {
  position: absolute; left: 0; top: 0; bottom: 0; width: 55%;
  background-image:
    linear-gradient(rgba(96,240,235,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,240,235,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 60%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 60%, transparent 100%);
  pointer-events: none;
}

/* Globe rotation */
.anuvu-globe-rot { animation: anuvuSpin 120s linear infinite; transform-origin: 680px 120px; }
@keyframes anuvuSpin { from { transform: rotate(0) } to { transform: rotate(360deg) } }

.anuvu-sat-orbit { animation: anuvuSpin 22s linear infinite; transform-origin: 680px 120px; }

/* Dashed flight-path marching ants */
.anuvu-arc { stroke-dasharray: 4 7; animation: anuvuDash 5s linear infinite; }
@keyframes anuvuDash { to { stroke-dashoffset: -140; } }

/* Pulsing hub markers */
.anuvu-pulse { animation: anuvuPulse 2.4s ease-out infinite; transform-origin: center; }
@keyframes anuvuPulse {
  0%   { r: 2; opacity: 1; }
  100% { r: 14; opacity: 0; }
}

/* ────────── Planes flying across ────────── */
.anuvu-scene { --plane-duration: 18s; }
.anuvu-plane {
  position: absolute;
  left: 0; right: 0;
  pointer-events: none;
  z-index: 4;
  animation: anuvuFly var(--plane-duration) linear infinite;
  will-change: transform, opacity;
}
.anuvu-plane--1 { top: 28%; }
.anuvu-plane--2 { top: 62%; animation-duration: calc(var(--plane-duration) * 1.6); animation-delay: -8s; opacity: .55; }
.anuvu-plane--3 { top: 45%; animation-duration: calc(var(--plane-duration) * 1.25); animation-delay: -16s; opacity: .35; }

/* Plane-count toggles (set via data-plane-count on .anuvu-scene) */
.anuvu-scene[data-plane-count="0"] .anuvu-plane { display: none; }
.anuvu-scene[data-plane-count="1"] .anuvu-plane--2,
.anuvu-scene[data-plane-count="1"] .anuvu-plane--3 { display: none; }
.anuvu-scene[data-plane-count="2"] .anuvu-plane--3 { display: none; }

/* Atmosphere toggles */
.anuvu-scene[data-hide-stars="true"] .anuvu-scene__stars { display: none; }
.anuvu-scene[data-hide-grid="true"]  .anuvu-scene__grid  { display: none; }
.anuvu-scene[data-hide-label="true"] .anuvu-scene__label { display: none; }
.anuvu-scene[data-hide-kpis="true"]  .anuvu-scene__kpis  { display: none; }

@keyframes anuvuFly {
  0%   { transform: translate3d(-22%, 18px, 0) rotate(-4deg); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translate3d(110%, -18px, 0) rotate(-4deg); opacity: 0; }
}

.anuvu-plane__wrap {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center;
  transform: translateY(-50%);
}
.anuvu-plane svg { display: block; filter: drop-shadow(0 4px 18px rgba(96,240,235,0.45)); }

.anuvu-contrail {
  position: absolute; right: 100%; top: 50%;
  height: 2px; width: 160px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0) 5%, rgba(255,255,255,0.35) 60%, rgba(255,255,255,0.9) 95%, #fff 100%);
  filter: blur(1px);
  transform: translateY(-50%);
  opacity: .85;
}
.anuvu-plane--2 .anuvu-contrail { width: 110px; opacity: .55; }
.anuvu-plane--3 .anuvu-contrail { width: 80px; opacity: .4; }

/* ────────── Overlay label (optional) ────────── */
.anuvu-scene__label {
  position: absolute;
  left: 24px; bottom: 18px;
  display: flex; align-items: center; gap: 8px;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  padding: 6px 12px;
  border-radius: 999px;
}
.anuvu-scene__label .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #60f0eb;
  box-shadow: 0 0 0 4px rgba(96,240,235,0.25);
  animation: anuvuLivePulse 2s ease-in-out infinite;
}
@keyframes anuvuLivePulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(96,240,235,0.35); }
  50%      { box-shadow: 0 0 0 6px rgba(96,240,235,0.08); }
}

.anuvu-scene__kpis {
  position: absolute;
  right: 24px; top: 18px;
  display: flex; gap: 14px;
  font-family: 'Jost', system-ui, sans-serif;
  color: rgba(255,255,255,0.85);
}
.anuvu-scene__kpis .k {
  text-align: right;
}
.anuvu-scene__kpis .k b {
  display: block;
  font-size: 18px; font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.anuvu-scene__kpis .k span {
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

/* Smaller container fallback */
@media (max-width: 600px) {
  .anuvu-scene__label, .anuvu-scene__kpis { display: none; }
}