/* ============================================================
   SnapVideoDL — Signature Globe UI
   States: .globe-idle → .globe-ready → .globe-processing → .globe-done
   RTL-aware · responsive · dark-first + light overrides
   ============================================================ */

.globe-stage {
  display: flex; flex-direction: column; align-items: center;
  gap: 1.1rem; margin-block: 1.6rem .5rem;
}

/* ---------- Globe button ---------- */
.globe {
  --size: clamp(190px, 44vw, 300px);
  position: relative;
  width: var(--size); height: var(--size);
  border: 0; padding: 0; border-radius: 50%;
  background: transparent;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  transition: filter .3s ease, transform .2s ease;
}
.globe:not(:disabled) { cursor: pointer; }
.globe:not(:disabled):hover { transform: scale(1.03); }
.globe:not(:disabled):active { transform: scale(.98); }
.globe:focus-visible { outline: 3px solid var(--brand-2); outline-offset: 6px; }
.globe:disabled { filter: saturate(.65) brightness(.92); }

/* ---------- Halo (pulsing glow behind) ---------- */
.globe-halo {
  position: absolute; inset: -20%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle,
    rgba(124, 58, 237, .32) 0%,
    rgba(6, 182, 212, .14) 52%,
    transparent 70%);
  filter: blur(8px);
  animation: halo-pulse 4.5s ease-in-out infinite;
  pointer-events: none;
}
.globe-idle .globe-halo { opacity: .55; }
.globe-ready .globe-halo { opacity: 1; animation-duration: 2.2s; }
.globe-processing .globe-halo { opacity: 1; animation-duration: 1.1s; }
.globe-done .globe-halo {
  background: radial-gradient(circle,
    rgba(34, 211, 165, .4) 0%,
    rgba(6, 182, 212, .16) 52%,
    transparent 70%);
  animation: halo-flash .9s ease-out 2;
}
@keyframes halo-pulse {
  0%, 100% { transform: scale(1); opacity: .55; }
  50% { transform: scale(1.07); opacity: .95; }
}
@keyframes halo-flash {
  0% { transform: scale(1); opacity: .6; }
  50% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: .7; }
}

/* ---------- Orbit rings + satellite ---------- */
.globe-orbit-tilt {
  position: absolute; inset: -11%; z-index: 1; pointer-events: none;
  transform: rotate(-14deg) scaleY(.42);
}
.globe-orbit-tilt.tilt-b { transform: rotate(22deg) scaleY(.30); opacity: .55; }
.globe-orbit-spin { position: absolute; inset: 0; animation: orbit-spin 18s linear infinite; }
.globe-ready .globe-orbit-spin { animation-duration: 9s; }
.globe-processing .globe-orbit-spin { animation-duration: 3.5s; }
.globe-orbit-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(6, 182, 212, .4);
}
.globe-sat {
  position: absolute; top: -5px; inset-inline-start: 50%;
  width: 10px; height: 10px; margin-inline-start: -5px;
  border-radius: 50%; background: var(--brand-2);
  box-shadow: 0 0 12px 3px rgba(6, 182, 212, .8);
}
@keyframes orbit-spin { to { transform: rotate(360deg); } }

/* ---------- Sphere ---------- */
.globe-sphere { position: absolute; inset: 0; z-index: 2; border-radius: 50%; }
.globe-svg { width: 100%; height: 100%; display: block; }
.globe-base { fill: #0e1540; }
.globe-rim {
  fill: none; stroke: rgba(6, 182, 212, .55); stroke-width: 1.5;
}
.globe-meridians ellipse {
  fill: none; stroke: rgba(6, 182, 212, .5); stroke-width: 1.1;
}
.globe-parallels ellipse, .globe-parallels line {
  fill: none; stroke: rgba(124, 58, 237, .5); stroke-width: 1.1;
}
/* Spin: pattern repeats every 200 units → seamless translateX loop */
.globe-meridians { animation: globe-spin 30s linear infinite; }
.globe-ready .globe-meridians { animation-duration: 10s; }
.globe-processing .globe-meridians { animation-duration: 2.4s; }
.globe-done .globe-meridians { animation-duration: 14s; }
@keyframes globe-spin { to { transform: translateX(-200px); } }
@keyframes globe-spin-rtl { to { transform: translateX(200px); } }
[dir="rtl"] .globe-meridians { animation-name: globe-spin-rtl; }
[dir="rtl"] .globe-orbit-spin { animation-direction: reverse; }

/* 3D shading overlay */
.globe-shade {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .20) 0%, transparent 34%),
    radial-gradient(circle at 72% 78%, rgba(2, 4, 18, .55) 0%, transparent 52%);
  box-shadow: inset -14px -18px 44px rgba(2, 4, 18, .55),
              inset 8px 10px 30px rgba(124, 58, 237, .18);
}

/* ---------- Center core icon ---------- */
.globe-core {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-items: center; pointer-events: none;
}
.globe-core .core-icon {
  width: 30%; height: 30%; color: #fff;
  filter: drop-shadow(0 4px 14px rgba(6, 182, 212, .7));
  transition: opacity .25s ease, transform .25s ease;
}
.globe-core .icon-check { opacity: 0; transform: scale(.4); color: var(--success); }
.globe-core .core-spinner {
  opacity: 0; position: absolute; inset: 0;
  display: grid; place-items: center;
  transition: opacity .25s ease;
}
.globe-core .core-spinner .spinner { width: 30%; height: auto; aspect-ratio: 1 / 1; border-width: 4px; }
.globe-processing .globe-core .icon-dl { opacity: 0; transform: scale(.6); }
.globe-processing .globe-core .core-spinner { opacity: 1; }
.globe-done .globe-core .icon-dl { opacity: 0; transform: scale(.6); }
.globe-done .globe-core .icon-check { opacity: 1; transform: scale(1); }
.globe-done { animation: done-pop .65s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes done-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.09); }
  100% { transform: scale(1); }
}

/* ---------- Progress ring (processing) ---------- */
.globe-progress {
  position: absolute; inset: -7%; width: 114%; height: 114%;
  z-index: 3; opacity: 0; transition: opacity .3s ease; pointer-events: none;
  transform: rotate(-90deg);
}
.globe-processing .globe-progress { opacity: 1; animation: gp-rotate 1.6s linear infinite; }
.gp-track { fill: none; stroke: rgba(127, 140, 190, .25); stroke-width: 5; }
.gp-bar {
  fill: none; stroke: url(#svdlGpGrad); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 92 248; /* r=54 → C≈339.3 */
}
@keyframes gp-rotate { to { transform: rotate(270deg); } }

/* ---------- Ping ring (ready → "click me") ---------- */
.globe-ping {
  position: absolute; inset: 0; border-radius: 50%; z-index: 5;
  border: 2.5px solid rgba(6, 182, 212, .75);
  opacity: 0; pointer-events: none;
}
.globe-ready .globe-ping { animation: ping 1.9s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes ping {
  0% { transform: scale(1); opacity: .85; }
  80%, 100% { transform: scale(1.38); opacity: 0; }
}

/* ---------- Hint text ---------- */
.globe-hint {
  min-height: 1.7em; text-align: center;
  font-weight: 650; font-size: .98rem; color: var(--text-muted);
  transition: color .25s;
}
.globe-hint.show { color: var(--text); }
.globe-hint.pulse { animation: hint-pulse 1.9s ease-in-out infinite; }
@keyframes hint-pulse {
  0%, 100% { opacity: .75; }
  50% { opacity: 1; }
}

/* ---------- Light theme overrides ---------- */
[data-theme="light"] .globe-base { fill: #dde6ff; }
[data-theme="light"] .globe-meridians ellipse { stroke: rgba(6, 130, 180, .55); }
[data-theme="light"] .globe-parallels ellipse,
[data-theme="light"] .globe-parallels line { stroke: rgba(124, 58, 237, .5); }
[data-theme="light"] .globe-rim { stroke: rgba(6, 130, 180, .6); }
[data-theme="light"] .globe-shade {
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .65) 0%, transparent 36%),
    radial-gradient(circle at 72% 78%, rgba(20, 26, 56, .14) 0%, transparent 52%);
  box-shadow: inset -14px -18px 44px rgba(20, 26, 56, .14),
              inset 8px 10px 30px rgba(124, 58, 237, .12);
}
[data-theme="light"] .globe-core .core-icon { color: #2b3a75; filter: drop-shadow(0 4px 12px rgba(6, 182, 212, .45)); }
[data-theme="light"] .globe-core .icon-check { color: #0d9d78; }
[data-theme="light"] .globe-halo {
  background: radial-gradient(circle,
    rgba(124, 58, 237, .20) 0%,
    rgba(6, 182, 212, .10) 52%,
    transparent 70%);
}
[data-theme="light"] .globe:disabled { filter: saturate(.7) brightness(.97); }

/* ---------- Responsive ---------- */
@media (max-width: 520px) {
  .globe { --size: clamp(170px, 58vw, 240px); }
  .globe-orbit-tilt { inset: -9%; }
  .globe-hint { font-size: .9rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .globe-meridians, .globe-orbit-spin, .globe-halo,
  .globe-ping, .globe-progress, .globe-hint.pulse { animation: none !important; }
  .globe-ready .globe-ping { opacity: .5; }
}