/* ============================================================================
   RetailRadar — the radar hero.

   Ported verbatim from the original single-page coming_soon.html: the rings,
   sweep beam, pulse waves, crosshairs, click-flash layer and target blips are
   the brand mark in motion and were explicitly kept through the redesign. What
   changed is only its role — it was the entire page, and is now the hero's
   backdrop with headline and CTAs layered over it.
   ============================================================================ */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-h) - 34px);
  padding: 60px 20px 70px;
  overflow: hidden;
}

/* Oversized, very low-opacity logo mark behind everything — replaced the old
   photographic background texture and is what keeps the hero from going flat. */
.hero__backdrop {
  position: absolute;
  top: 46%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(1100px, 130vw);
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}

.hero__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(6, 9, 19, 0.75) 78%, var(--bg-main) 100%);
  pointer-events: none;
  z-index: 2;
}

.radar-stage {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.radar-viewport {
  position: absolute;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.radar-ring { position: absolute; border: 1px solid rgba(56, 189, 248, 0.18); border-radius: 50%; }
.radar-ring-1 { width: 220px; height: 220px; border-color: rgba(56, 189, 248, 0.25); }
.radar-ring-2 { width: 400px; height: 400px; border-color: rgba(56, 189, 248, 0.2); }
.radar-ring-3 { width: 560px; height: 560px; border-style: dashed; border-color: rgba(16, 185, 129, 0.2); }
.radar-ring-4 { width: 720px; height: 720px; border-color: rgba(56, 189, 248, 0.12); }

.radar-pulse-wave {
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  border: 1.5px solid rgba(56, 189, 248, 0.5);
  animation: radarPulse 4s cubic-bezier(0.1, 0.5, 0.8, 1) infinite;
}
.radar-pulse-wave-2 { animation-delay: 2s; }

@keyframes radarPulse {
  0%   { transform: scale(0.8); opacity: 0.8; border-color: rgba(56, 189, 248, 0.6); }
  100% { transform: scale(3.3); opacity: 0; border-color: rgba(16, 185, 129, 0); }
}

.radar-sweep-beam {
  position: absolute;
  width: 680px; height: 680px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    rgba(56, 189, 248, 0.45) 0deg,
    rgba(16, 185, 129, 0.15) 35deg,
    transparent 75deg,
    transparent 360deg
  );
  animation: radarSpin 6.5s linear infinite;
}

@keyframes radarSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.radar-crosshair-h {
  position: absolute; width: 720px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.15) 30%, rgba(56, 189, 248, 0.15) 70%, transparent);
}
.radar-crosshair-v {
  position: absolute; width: 1px; height: 720px;
  background: linear-gradient(180deg, transparent, rgba(56, 189, 248, 0.15) 30%, rgba(56, 189, 248, 0.15) 70%, transparent);
}

.radar-flash-layer {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.45) 0%, rgba(16, 185, 129, 0.25) 50%, transparent 75%);
}
.radar-flash-layer.active { animation: flashRipple 0.65s ease-out forwards; }

@keyframes flashRipple {
  0%   { opacity: 1; transform: scale(0.92); filter: brightness(2.2); }
  50%  { opacity: 0.7; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.0); }
}

.radar-click-blip { position: absolute; transform: translate(-50%, -50%); pointer-events: none; z-index: 25; }

.blip-core {
  width: 14px; height: 14px;
  background: #38bdf8;
  border-radius: 50%;
  box-shadow: 0 0 16px #38bdf8, 0 0 35px #10b981;
  animation: blipCoreBlink 1.8s ease-out forwards;
}
.blip-ring {
  position: absolute; top: 50%; left: 50%;
  width: 36px; height: 36px;
  border: 2px solid #38bdf8; border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: blipRingPing 1.8s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}
.blip-ring-2 {
  position: absolute; top: 50%; left: 50%;
  width: 70px; height: 70px;
  border: 1.5px dashed #10b981; border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: blipRingPing 1.8s cubic-bezier(0.1, 0.8, 0.3, 1) 0.15s forwards;
}
.blip-coordinates {
  position: absolute; top: 16px; left: 16px;
  font-family: 'Space Grotesk', monospace;
  font-size: 10px; font-weight: 700;
  color: #38bdf8;
  white-space: nowrap;
  letter-spacing: 0.08em;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.9);
  animation: blipTextFade 1.8s ease-out forwards;
}

@keyframes blipCoreBlink {
  0%   { transform: scale(0.2); opacity: 0; }
  20%  { transform: scale(1.5); opacity: 1; }
  40%  { transform: scale(1.0); opacity: 1; }
  65%  { transform: scale(1.2); opacity: 0.8; }
  100% { transform: scale(0); opacity: 0; }
}
@keyframes blipRingPing {
  0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}
@keyframes blipTextFade {
  0%   { opacity: 0; transform: translateY(-4px); }
  20%  { opacity: 1; transform: translateY(0); }
  70%  { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* --- hero content over the radar ------------------------------------------- */

.hero__content {
  position: relative;
  z-index: 20;
  text-align: center;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo-card-translucent {
  position: relative;
  z-index: 20;
  background: rgba(10, 15, 30, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 22px 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 35px rgba(56, 189, 248, 0.15);
  transition: all 0.3s ease;
  margin-bottom: 30px;
}
.logo-card-translucent:hover {
  background: rgba(10, 15, 30, 0.6);
  border-color: rgba(56, 189, 248, 0.28);
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.7), 0 0 50px rgba(56, 189, 248, 0.3);
}

.hero__headline { margin-bottom: 18px; text-shadow: 0 2px 30px rgba(6, 9, 19, 0.9); }
.hero__sub {
  color: var(--text-muted);
  font-size: clamp(14px, 1.7vw, 17px);
  max-width: 58ch;
  margin: 0 auto 32px;
  text-shadow: 0 2px 20px rgba(6, 9, 19, 0.9);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

.foreshadow-footer {
  margin-top: 42px;
  z-index: 30;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.45);
  text-shadow: 0 0 12px rgba(56, 189, 248, 0.15);
  pointer-events: none;
  user-select: none;
  animation: foreshadowGlow 4s ease-in-out infinite alternate;
}
@keyframes foreshadowGlow {
  0%   { opacity: 0.25; text-shadow: 0 0 6px rgba(56, 189, 248, 0.05); }
  100% { opacity: 0.75; text-shadow: 0 0 18px rgba(56, 189, 248, 0.35); color: rgba(226, 232, 240, 0.75); }
}

@media (max-width: 780px) {
  .radar-viewport { width: 480px; height: 480px; }
  .radar-sweep-beam { width: 460px; height: 460px; }
  .radar-crosshair-h { width: 480px; }
  .radar-crosshair-v { height: 480px; }
  .radar-ring-4 { width: 480px; height: 480px; }
  .radar-ring-3 { width: 380px; height: 380px; }
  .logo-card-translucent { padding: 18px 24px; }
  .foreshadow-footer { letter-spacing: 0.3em; }
}

/* Someone who has asked the OS to reduce motion should not be handed a
   permanently spinning beam and three looping pulses. */
@media (prefers-reduced-motion: reduce) {
  .radar-sweep-beam, .radar-pulse-wave, .foreshadow-footer { animation: none; }
  .radar-sweep-beam { opacity: 0.35; }
}