/* Stable globe visual layer — no layout-changing animation. */

/* Old gauge is hidden before/after; original live gauge remains during test. */
body[data-test-state="IDLE"] .gauge-svg,
body[data-test-state="SELECTING"] .gauge-svg,
body[data-test-state="VERIFYING"] .gauge-svg,
body[data-test-state="COMPLETE"] .gauge-svg,
body[data-test-state="ERROR"] .gauge-svg,
body[data-test-state="IDLE"] .gauge-reading,
body[data-test-state="SELECTING"] .gauge-reading,
body[data-test-state="VERIFYING"] .gauge-reading,
body[data-test-state="COMPLETE"] .gauge-reading,
body[data-test-state="ERROR"] .gauge-reading {
  display: none !important;
}

body[data-test-state="PINGING"] .gauge-svg,
body[data-test-state="DOWNLOADING"] .gauge-svg,
body[data-test-state="UPLOADING"] .gauge-svg,
body[data-test-state="PINGING"] .gauge-reading,
body[data-test-state="DOWNLOADING"] .gauge-reading,
body[data-test-state="UPLOADING"] .gauge-reading {
  display: block !important;
}

/* One permanent globe DOM element. Position and dimensions never animate. */
body[data-test-state="IDLE"] .go-button,
body[data-test-state="SELECTING"] .go-button,
body[data-test-state="VERIFYING"] .go-button,
body[data-test-state="COMPLETE"] .go-button,
body[data-test-state="ERROR"] .go-button {
  position: absolute !important;
  top: 54px !important;
  left: 50% !important;
  width: 272px !important;
  height: 272px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  overflow: visible !important;
  isolation: isolate !important;
  pointer-events: auto !important;
}

/* Original meter is shown during measurement, globe hidden without DOM removal. */
body[data-test-state="PINGING"] .go-button,
body[data-test-state="DOWNLOADING"] .go-button,
body[data-test-state="UPLOADING"] .go-button {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.go-globe-v3 {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  border-radius: 50% !important;
  user-select: none !important;
  pointer-events: none !important;
  transform: none;
  filter: drop-shadow(0 0 28px rgba(255,106,0,.42));
  will-change: filter;
}

/* Glow pulse uses filter only. No scale on mobile or desktop. */
body[data-test-state="IDLE"] .go-globe-v3,
body[data-test-state="SELECTING"] .go-globe-v3,
body[data-test-state="VERIFYING"] .go-globe-v3,
body[data-test-state="COMPLETE"] .go-globe-v3 {
  animation: stableGlobeGlow 2.25s ease-in-out infinite;
}

#go-button-label {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 8 !important;
  width: 76% !important;
  transform: translate(-50%, -50%) !important;
  color: #0b0b0b !important;
  text-align: center !important;
  white-space: normal !important;
  font-size: 2rem !important;
  font-weight: 900 !important;
  line-height: .96 !important;
  letter-spacing: .08em !important;
  text-shadow: 0 1px 1px rgba(255,255,255,.35) !important;
  pointer-events: none !important;
}

body[data-test-state="COMPLETE"] #go-button-label {
  width: 58% !important;
  font-size: 1.38rem !important;
  letter-spacing: .035em !important;
}

/* Three permanent stone-in-water rings. They are clipped by the fixed gauge on mobile. */
.go-ring,
.go-ring::before,
.go-ring::after {
  position: absolute !important;
  inset: -2px !important;
  z-index: 1 !important;
  border: 1.4px solid rgba(255,132,38,.30) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 16px rgba(255,106,0,.07) !important;
  pointer-events: none !important;
  opacity: 0;
}

.go-ring::before,
.go-ring::after {
  content: "" !important;
  display: block !important;
}

body[data-test-state="IDLE"] .go-ring,
body[data-test-state="SELECTING"] .go-ring,
body[data-test-state="VERIFYING"] .go-ring,
body[data-test-state="COMPLETE"] .go-ring,
body[data-test-state="ERROR"] .go-ring,
body[data-test-state="IDLE"] .go-ring::before,
body[data-test-state="SELECTING"] .go-ring::before,
body[data-test-state="VERIFYING"] .go-ring::before,
body[data-test-state="COMPLETE"] .go-ring::before,
body[data-test-state="ERROR"] .go-ring::before,
body[data-test-state="IDLE"] .go-ring::after,
body[data-test-state="SELECTING"] .go-ring::after,
body[data-test-state="VERIFYING"] .go-ring::after,
body[data-test-state="COMPLETE"] .go-ring::after,
body[data-test-state="ERROR"] .go-ring::after {
  animation: stableStoneWave 3.1s ease-out infinite !important;
}

.go-ring::before { animation-delay: 1.03s !important; }
.go-ring::after { animation-delay: 2.06s !important; }

/* Existing fixed particle layer only; no children are created in JS. */
.go-particle-layer-v3 {
  position: absolute !important;
  inset: -14% !important;
  z-index: 7 !important;
  display: block !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  overflow: hidden !important;
  background-image:
    radial-gradient(circle at 18% 34%, rgba(255,255,255,.95) 0 2px, rgba(255,161,55,.55) 3px, transparent 5px),
    radial-gradient(circle at 77% 21%, rgba(255,238,205,.95) 0 2px, rgba(255,128,25,.5) 3px, transparent 5px),
    radial-gradient(circle at 88% 58%, rgba(255,255,255,.9) 0 1.5px, rgba(255,148,40,.48) 3px, transparent 5px),
    radial-gradient(circle at 30% 80%, rgba(255,244,220,.9) 0 2px, rgba(255,106,0,.52) 3px, transparent 5px),
    radial-gradient(circle at 60% 90%, rgba(255,255,255,.9) 0 1.5px, rgba(255,168,70,.48) 3px, transparent 5px),
    radial-gradient(circle at 47% 12%, rgba(255,255,255,.9) 0 1.5px, rgba(255,145,38,.5) 3px, transparent 5px),
    radial-gradient(circle at 9% 62%, rgba(255,250,235,.92) 0 1.5px, rgba(255,117,16,.5) 3px, transparent 5px),
    radial-gradient(circle at 68% 47%, rgba(255,255,255,.86) 0 1px, rgba(255,151,47,.48) 2.5px, transparent 4.5px);
  opacity: .32;
  animation: stableSparkle 1.8s ease-in-out infinite alternate;
}

body[data-test-state="COMPLETE"] .go-particle-layer-v3 {
  opacity: .58;
  animation: stableSparkleComplete 1.25s ease-in-out infinite alternate;
}

/* Desktop-only subtle hover; mobile has no hover scaling. */
@media (hover: hover) and (pointer: fine) {
  body[data-test-state="IDLE"] .go-button:hover:not(:disabled) .go-globe-v3,
  body[data-test-state="COMPLETE"] .go-button:hover:not(:disabled) .go-globe-v3,
  body[data-test-state="ERROR"] .go-button:hover:not(:disabled) .go-globe-v3 {
    filter: drop-shadow(0 0 38px rgba(255,118,18,.62)) brightness(1.06) saturate(1.08);
  }
}

@keyframes stableGlobeGlow {
  0%,100% { filter: drop-shadow(0 0 26px rgba(255,106,0,.40)) brightness(1) saturate(1); }
  50% { filter: drop-shadow(0 0 40px rgba(255,118,18,.62)) brightness(1.07) saturate(1.12); }
}

@keyframes stableStoneWave {
  0% { opacity: .58; transform: scale(.84); }
  68% { opacity: .12; }
  100% { opacity: 0; transform: scale(1.62); }
}

@keyframes stableSparkle {
  from { opacity: .25; filter: brightness(.95); }
  to { opacity: .52; filter: brightness(1.24); }
}

@keyframes stableSparkleComplete {
  from { opacity: .42; filter: brightness(1); }
  to { opacity: .76; filter: brightness(1.35); }
}

/* Mobile: hard clipping prevents animation overflow from changing scroll/viewport width. */
@media (max-width: 700px) {
  html,
  body,
  #main-content,
  .speed-stage,
  .test-console {
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  .gauge {
    overflow: hidden !important;
    contain: layout paint size !important;
  }

  body[data-test-state="IDLE"] .go-button,
  body[data-test-state="SELECTING"] .go-button,
  body[data-test-state="VERIFYING"] .go-button,
  body[data-test-state="COMPLETE"] .go-button,
  body[data-test-state="ERROR"] .go-button {
    top: 46px !important;
    width: 238px !important;
    height: 238px !important;
  }

  #go-button-label { font-size: 1.65rem !important; }
  body[data-test-state="COMPLETE"] #go-button-label { font-size: 1.16rem !important; }

  /* Keep all waves within the fixed mobile gauge footprint. */
  @keyframes stableStoneWave {
    0% { opacity: .55; transform: scale(.86); }
    70% { opacity: .12; }
    100% { opacity: 0; transform: scale(1.46); }
  }
}

@media (max-width: 480px) {
  body[data-test-state="IDLE"] .go-button,
  body[data-test-state="SELECTING"] .go-button,
  body[data-test-state="VERIFYING"] .go-button,
  body[data-test-state="COMPLETE"] .go-button,
  body[data-test-state="ERROR"] .go-button {
    top: 44px !important;
    width: 220px !important;
    height: 220px !important;
  }

  .go-particle-layer-v3 { inset: -10% !important; }
}

@media (prefers-reduced-motion: reduce) {
  .go-globe-v3,
  .go-ring,
  .go-ring::before,
  .go-ring::after,
  .go-particle-layer-v3 {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}