/* SeaRadar landing motion layer — a cohesive sonar-themed movement language.
   Everything here is progressive: elements are injected by landing.js, and the
   whole layer collapses to static under prefers-reduced-motion. */

/* --- Scroll progress bar --------------------------------------------------- */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: 60;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #1677e8, #14c8e7, #45dfc1);
  box-shadow: 0 1px 10px rgba(22, 119, 232, .45);
  will-change: transform;
}

/* --- Nav condenses on scroll ---------------------------------------------- */
.landing-nav {
  transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.landing-nav.scrolled {
  background: rgba(251, 253, 255, .78);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(210, 229, 240, .7), 0 12px 30px rgba(30, 92, 128, .07);
}

/* --- Sonar pings radiating behind the hero copy --------------------------- */
.hero-sonar { position: absolute; left: clamp(22px, 7vw, 110px); top: 44%; z-index: 1; pointer-events: none; }
.hero-sonar span {
  position: absolute;
  width: 30px; height: 30px; margin: -15px;
  border: 1.5px solid rgba(22, 119, 232, .38);
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  animation: sonar-ping 4.6s cubic-bezier(.2, .6, .3, 1) infinite;
}
.hero-sonar span:nth-child(2) { animation-delay: 1.53s; border-color: rgba(20, 200, 231, .34); }
.hero-sonar span:nth-child(3) { animation-delay: 3.06s; border-color: rgba(69, 223, 193, .3); }
@keyframes sonar-ping {
  0%   { transform: scale(0);  opacity: .5; }
  70%  { opacity: .1; }
  100% { transform: scale(24); opacity: 0; }
}

/* --- Live pill: expanding sonar dot --------------------------------------- */
.live-pill i { position: relative; }
.live-pill i::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: #29d6a0;
  animation: dot-ping 2.6s ease-out infinite;
}
@keyframes dot-ping {
  0%   { transform: scale(1); opacity: .55; }
  100% { transform: scale(3.6); opacity: 0; }
}

/* --- Moving sheen across the primary CTAs --------------------------------- */
.primary-cta, .nav-cta { position: relative; overflow: hidden; isolation: isolate; }
.primary-cta::after, .nav-cta::after {
  content: "";
  position: absolute; top: -20%; left: -70%;
  width: 45%; height: 140%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-18deg);
  animation: cta-sheen 5.5s ease-in-out infinite;
  pointer-events: none;
}
.nav-cta::after { animation-delay: .8s; }
@keyframes cta-sheen {
  0%, 55% { left: -70%; }
  85%, 100% { left: 140%; }
}

/* --- Rotating radar sweep over the preview map ---------------------------- */
.radar-sweep {
  position: absolute;
  inset: 72px 40px 30px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(rgba(22, 119, 232, .2), rgba(22, 119, 232, 0) 34%, rgba(22, 119, 232, 0));
  mix-blend-mode: multiply;
  animation: radar-spin 6.5s linear infinite;
}
@keyframes radar-spin { to { transform: rotate(360deg); } }

/* --- Preview signals settle in, then breathe ------------------------------ */
.preview-signal { animation: signal-in .7s cubic-bezier(.2, .75, .25, 1) both; }
.preview-signal:nth-of-type(1) { animation-delay: .35s; }
.preview-signal:nth-of-type(2) { animation-delay: .5s; }
.preview-signal:nth-of-type(3) { animation-delay: .65s; }
.preview-signal i { animation: pulse-dot 2.8s ease-in-out infinite; }
.preview-signal.warn i { animation-delay: .6s; }
@keyframes signal-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; } 50% { opacity: .6; } }

/* --- Product window: perspective for pointer tilt ------------------------- */
.product-section { perspective: 1500px; }
.product-window { transform-style: preserve-3d; }
.product-window.tilting { transition: transform .12s ease-out, box-shadow .45s ease; }

/* --- Evidence icons come alive -------------------------------------------- */
.evidence-grid .bubbles i { animation: bubble-pulse 3.6s ease-in-out infinite; }
.evidence-grid .bubbles i:nth-child(2) { animation-delay: .5s; }
.evidence-grid .bubbles i:nth-child(3) { animation-delay: 1s; }
@keyframes bubble-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }

.evidence-grid .timing i { animation: timing-bounce 1.9s ease-in-out infinite; }
.evidence-grid .timing i:nth-child(2) { animation-delay: .13s; }
.evidence-grid .timing i:nth-child(3) { animation-delay: .26s; }
.evidence-grid .timing i:nth-child(4) { animation-delay: .39s; }
@keyframes timing-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.evidence-grid .source i:nth-child(1) { animation: source-blink 3s ease-in-out infinite; }
.evidence-grid .source i:nth-child(2) { animation: source-blink 3s ease-in-out infinite .5s; }
.evidence-grid .source i:nth-child(3) { animation: source-blink 3s ease-in-out infinite 1s; }
@keyframes source-blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.evidence-grid .code, .evidence-grid .pool { animation: icon-breathe 4.2s ease-in-out infinite; }
@keyframes icon-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* Hover accent line on each evidence tile */
.evidence-grid article::before {
  content: "";
  position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, #1677e8, #14c8e7, #45dfc1);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .45s cubic-bezier(.2, .75, .25, 1);
}
.evidence-grid article:hover::before { transform: scaleX(1); }

/* Count-up numbers avoid layout shift while animating */
.dial span, .age b { font-variant-numeric: tabular-nums; }

/* --- Final CTA: expanding sonar rings ------------------------------------- */
.cta-rings { position: absolute; right: 150px; top: -80px; z-index: 0; pointer-events: none; }
.cta-rings span {
  position: absolute;
  width: 120px; height: 120px; margin: -60px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  transform: scale(.2);
  opacity: 0;
  animation: cta-ring 6s ease-out infinite;
}
.cta-rings span:nth-child(2) { animation-delay: 2s; }
.cta-rings span:nth-child(3) { animation-delay: 4s; }
@keyframes cta-ring {
  0%   { transform: scale(.2); opacity: .5; }
  100% { transform: scale(3.4); opacity: 0; }
}

@media (max-width: 900px) {
  .cta-rings { right: 40px; top: -40px; }
  .radar-sweep { inset: 60px 30px 30px; }
}

/* --- Respect reduced motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress, .hero-sonar, .cta-rings, .radar-sweep { display: none !important; }
  .live-pill i::after, .primary-cta::after, .nav-cta::after { animation: none !important; content: none !important; }
  .preview-signal, .preview-signal i,
  .evidence-grid .bubbles i, .evidence-grid .timing i, .evidence-grid .source i,
  .evidence-grid .code, .evidence-grid .pool { animation: none !important; }
}