/* neon-glow.css — Framer-inspired cursor spotlight border + soft bloom (Ma Vitrine).
   Own implementation. Targets existing .btn / .search-form / .tile / .city-card classes
   so the same file works on preview and prod index.astro. */
:root {
  --neon-spot: #7dd3ff;
  --neon-spot-hot: #c084fc;
  --neon-spot-brand: #5b8cff;
  --neon-ms: 220ms;
}

/* ---- Cards / tiles / search: spotlight border ring ---- */
.tile,
.city-card,
.search-form {
  --mx: 50%;
  --my: 50%;
  --neon: 0;
  position: relative;
  isolation: isolate;
  transition:
    border-color var(--neon-ms) ease,
    box-shadow var(--neon-ms) ease,
    transform var(--neon-ms) ease,
    background-color var(--neon-ms) ease;
}

/* 1px border ring lit by a radial spotlight at the cursor (masked). */
.tile::before,
.city-card::before,
.search-form::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  z-index: 3;
  opacity: var(--neon);
  transition: opacity var(--neon-ms) ease;
  background: radial-gradient(
    180px circle at var(--mx) var(--my),
    var(--neon-spot) 0%,
    var(--neon-spot-hot) 28%,
    rgba(91, 140, 255, 0.35) 55%,
    transparent 72%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* Soft faint radial on the card surface (inner glow). */
.tile::after,
.city-card::after,
.search-form::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: var(--neon);
  transition: opacity var(--neon-ms) ease;
  background: radial-gradient(
    220px circle at var(--mx) var(--my),
    rgba(125, 211, 255, 0.16) 0%,
    rgba(192, 132, 252, 0.08) 35%,
    transparent 62%
  );
}

.tile > *,
.city-card > *,
.search-form > * {
  position: relative;
  z-index: 2;
}

/* ---- Buttons: gentle gradient-border glow / bloom ---- */
.btn,
.search-submit,
.nearme-btn,
.discovery-nav a {
  --mx: 50%;
  --my: 50%;
  --neon: 0;
  position: relative;
  isolation: isolate;
  transition:
    box-shadow var(--neon-ms) ease,
    border-color var(--neon-ms) ease,
    background-color var(--neon-ms) ease,
    transform var(--neon-ms) ease,
    color var(--neon-ms) ease;
}

.btn::before,
.discovery-nav a::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  z-index: 2;
  opacity: var(--neon);
  transition: opacity var(--neon-ms) ease;
  background: radial-gradient(
    140px circle at var(--mx) var(--my),
    #fff 0%,
    var(--neon-spot) 25%,
    var(--neon-spot-hot) 55%,
    transparent 75%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.btn-light::before,
.btn-outline::before,
.discovery-nav a::before {
  border-radius: 999px;
}
.btn > *,
.discovery-nav a > * {
  position: relative;
  z-index: 3;
}

/* Neighbor spill: cards near the pointer get a weaker border light (--neon-near 0..1). */
.tile-grid,
.city-grid {
  position: relative;
}

/* ---- Hover (fine pointer only) ---- */
@media (hover: hover) and (pointer: fine) {
  .tile:hover,
  .city-card:hover,
  .search-form:hover,
  .btn:hover,
  .search-submit:hover,
  .nearme-btn:hover,
  .discovery-nav a:hover {
    --neon: 1;
  }

  .tile:hover,
  .city-card:hover {
    border-color: rgba(125, 211, 255, 0.35);
    box-shadow:
      0 0 0 1px rgba(125, 211, 255, 0.12),
      0 0 24px rgba(125, 211, 255, 0.18),
      0 0 48px rgba(192, 132, 252, 0.1),
      var(--shadow, 0 4px 14px rgba(20, 33, 61, 0.06));
    transform: translateY(-1px);
  }

  /* Group / neighbor glow (set by neon-glow.js via --neon) */
  .tile[style*="--neon"],
  .city-card[style*="--neon"] {
    /* style attr sets --neon; ::before/::after already read it */
  }

  .search-form:hover {
    box-shadow:
      0 0 0 1px rgba(125, 211, 255, 0.22),
      0 0 28px rgba(125, 211, 255, 0.16),
      0 0 48px rgba(192, 132, 252, 0.08),
      var(--shadow, 0 4px 14px rgba(20, 33, 61, 0.06));
  }

  .btn-light:hover {
    box-shadow:
      0 0 0 1px rgba(125, 211, 255, 0.35),
      0 0 18px rgba(125, 211, 255, 0.4),
      0 0 36px rgba(192, 132, 252, 0.22);
    transform: translateY(-1px);
  }
  .btn-outline:hover {
    border-color: rgba(125, 211, 255, 0.75);
    box-shadow:
      0 0 0 1px rgba(125, 211, 255, 0.35),
      0 0 20px rgba(125, 211, 255, 0.4),
      0 0 40px rgba(192, 132, 252, 0.25);
    transform: translateY(-1px);
  }
  .search-submit:hover {
    box-shadow:
      0 0 0 1px rgba(125, 211, 255, 0.35),
      0 0 16px rgba(91, 140, 255, 0.45);
  }
  .nearme-btn:hover {
    box-shadow: 0 0 0 1px rgba(125, 211, 255, 0.3), 0 0 12px rgba(125, 211, 255, 0.3);
  }
  .discovery-nav a:hover {
    box-shadow:
      0 0 0 1px rgba(125, 211, 255, 0.25),
      0 0 14px rgba(125, 211, 255, 0.28);
  }
}

/* ---- Keyboard focus-visible ---- */
.btn:focus-visible,
.search-submit:focus-visible,
.nearme-btn:focus-visible,
.tile:focus-visible,
.city-card:focus-visible,
.discovery-nav a:focus-visible,
.search-form:focus-within {
  outline: none;
  --neon: 1;
  box-shadow:
    0 0 0 1px rgba(125, 211, 255, 0.45),
    0 0 18px rgba(125, 211, 255, 0.35),
    0 0 32px rgba(192, 132, 252, 0.18);
}

/* ---- Reduced motion: static glow, no translate ---- */
@media (prefers-reduced-motion: reduce) {
  .tile,
  .city-card,
  .search-form,
  .btn,
  .search-submit,
  .nearme-btn,
  .discovery-nav a {
    transition: box-shadow var(--neon-ms) ease, border-color var(--neon-ms) ease, opacity var(--neon-ms) ease;
  }
  .tile:hover,
  .city-card:hover,
  .btn:hover,
  .btn:focus-visible,
  .tile:focus-visible,
  .city-card:focus-visible {
    transform: none !important;
  }
}