/*
 * MowNWA Scan View — decorative overlay styles
 * Applied only while window.MowNWAScanView.isActive() === true.
 *
 * The #mownwa-scan-overlay div is injected as a direct child of the
 * MapLibre container (map.getContainer()) and removed on clear().
 * pointer-events: none — never blocks map interaction.
 */

/* ── Main overlay ────────────────────────────────────────────────────────────── */
#mownwa-scan-overlay {
  /* Cover the entire map container. */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  /* z-index 1: above the WebGL canvas (z auto/0), below MapLibre UI controls (z 2+). */
  z-index: 1;

  /* Dark forest-green semi-transparent tint. */
  background-color: rgba(0, 18, 8, 0.42);

  /* Subtle terrain-grid: 1-px green lines every 40 px in both axes. */
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 39px,
      rgba(0, 255, 100, 0.055) 39px,
      rgba(0, 255, 100, 0.055) 40px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 39px,
      rgba(0, 255, 100, 0.055) 39px,
      rgba(0, 255, 100, 0.055) 40px
    );

  /* Interaction: fully transparent to pointer events. */
  pointer-events: none;

  /* Clip the sweep animation inside the map boundary. */
  overflow: hidden;

  /* Subtle opacity pulse to sell the "live scanning" feel. */
  animation: mownwa-scan-flicker 5s ease-in-out infinite;

  /* Don't intrude on rounded map wrappers. */
  border-radius: inherit;
}

/* ── Scan sweep line ─────────────────────────────────────────────────────────── */
/*
 * A soft horizontal glow band sweeps from top to bottom on a 3 s loop.
 * It sits above the grid (::after paints after the background).
 */
#mownwa-scan-overlay::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 90px;

  /* Feathered neon-green beam. */
  background: linear-gradient(
    to bottom,
    transparent            0%,
    rgba(0, 255, 100, 0.07) 30%,
    rgba(0, 255, 100, 0.22) 50%,
    rgba(0, 255, 100, 0.07) 70%,
    transparent            100%
  );

  pointer-events: none;

  /* Start above the top edge so the entry is invisible. */
  top: -90px;
  animation: mownwa-scan-sweep 3s linear infinite;
}

/* ── Keyframes ───────────────────────────────────────────────────────────────── */

/* Sweep travels from -90 px (off top) to 100 % (off bottom). */
@keyframes mownwa-scan-sweep {
  from { top: -90px;  }
  to   { top: 100%;   }
}

/* Gentle opacity flicker mimics a live data feed. */
@keyframes mownwa-scan-flicker {
  0%,  100% { opacity: 1;    }
  42%        { opacity: 0.93; }
  47%        { opacity: 0.86; }
  52%        { opacity: 0.93; }
}

/* ── Reduced-motion override ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #mownwa-scan-overlay,
  #mownwa-scan-overlay::after {
    animation: none;
  }
}

/* ── Mobile safety ───────────────────────────────────────────────────────────── */
/*
 * No fixed panels or bottom sheets — the overlay is purely positional
 * relative to the map container, so it scales naturally on any screen size.
 * Nothing below references viewport units that could cause layout shift.
 */

/* ── 3D Scan toggle button ───────────────────────────────────────────────────── */
#mownwa-scan-toggle-btn {
  position: fixed;
  bottom: 80px;   /* above typical mobile nav bars */
  right: 12px;
  z-index: 9000;  /* above map controls */

  /* Sizing */
  padding: 8px 14px;
  min-width: 88px;
  height: 36px;

  /* Typography */
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;

  /* Appearance — dark-green scan aesthetic */
  background: rgba(0, 20, 10, 0.88);
  color: #33ff88;
  border: 1px solid rgba(0, 255, 100, 0.45);
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(0, 255, 100, 0.2), 0 2px 6px rgba(0,0,0,0.5);

  /* Interaction */
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;

  transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

#mownwa-scan-toggle-btn:hover {
  background: rgba(0, 40, 20, 0.95);
  box-shadow: 0 0 14px rgba(0, 255, 100, 0.38), 0 2px 8px rgba(0,0,0,0.55);
  color: #66ffaa;
}

#mownwa-scan-toggle-btn:active {
  transform: scale(0.96);
}

/* Active / pressed state */
#mownwa-scan-toggle-btn[aria-pressed="true"] {
  background: rgba(0, 255, 100, 0.14);
  border-color: rgba(0, 255, 100, 0.75);
  color: #aaffcc;
  box-shadow: 0 0 18px rgba(0, 255, 100, 0.45), 0 2px 8px rgba(0,0,0,0.5);
}

/* ── Non-blocking warning toast ──────────────────────────────────────────────── */
#mownwa-scan-toast {
  position: fixed;
  bottom: 124px;
  right: 12px;
  z-index: 9100;

  padding: 7px 12px;
  max-width: 240px;

  font-family: system-ui, -apple-system, sans-serif;
  font-size: 12px;
  color: #ccffdd;

  background: rgba(0, 15, 8, 0.92);
  border: 1px solid rgba(0, 255, 100, 0.3);
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);

  pointer-events: none;
  animation: mownwa-scan-toast-in 0.2s ease;
}

@keyframes mownwa-scan-toast-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ── Mobile: nudge button left on very narrow viewports ─────────────────────── */
@media (max-width: 360px) {
  #mownwa-scan-toggle-btn {
    right: 6px;
    font-size: 12px;
    padding: 7px 10px;
  }
}