/* ==========================================================================
   OhSht — Effects: shadows, glows, glass, motion
   Signature look = deep dark surfaces + teal neon glow on active elements
   + frosted glass panels floating over the map.
   ========================================================================== */

:root {
  /* Elevation shadows (soft, on near-black) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
  --shadow-sheet: 0 -12px 40px rgba(0, 0, 0, 0.6);   /* bottom sheet lift */

  /* Teal neon glow — the brand's hero effect (active tab, selected pin,
     focused search, primary CTA). */
  --glow-teal-sm: 0 0 12px rgba(25, 224, 206, 0.35);
  --glow-teal-md: 0 0 24px rgba(25, 224, 206, 0.45);
  --glow-teal-lg: 0 0 40px rgba(25, 224, 206, 0.55);
  --glow-cta: 0 6px 24px rgba(25, 224, 206, 0.40);   /* under teal buttons */

  /* Rating glow (stars light up) */
  --glow-rating: 0 0 14px rgba(25, 224, 206, 0.5);

  /* Glassmorphism panel — frosted search bar / menu over map */
  --glass-blur: 18px; /* @kind other */
  --glass-bg: rgba(18, 22, 27, 0.55);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);

  /* Focus ring */
  --ring: 0 0 0 3px rgba(25, 224, 206, 0.35);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);   /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}

/* Utility: frosted glass panel */
.ohsht-glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}