@tailwind base;
@tailwind components;
@tailwind utilities;

/* Fallback for browsers where the fixed gradient layer fails to paint
   (old Safari) — the page must never end up white-on-white. */
body {
  background-color: #1e30cf;
}

/* Background fish: slow drift across the viewport, hidden when the user
   prefers reduced motion (a static fish mid-screen would look odd). */
.bg-fish {
  position: absolute;
  left: 0;
  color: rgba(255, 255, 255, 0.09);
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .bg-fish {
    display: block;
    animation: swim 100s linear infinite both;
  }
  .bg-fish-back {
    animation-name: swim-back;
  }
}

@keyframes swim {
  0% {
    transform: translateX(-15vw) translateY(0);
  }
  25% {
    transform: translateX(15vw) translateY(-14px);
  }
  50% {
    transform: translateX(45vw) translateY(8px);
  }
  75% {
    transform: translateX(75vw) translateY(-10px);
  }
  100% {
    transform: translateX(105vw) translateY(0);
  }
}

@keyframes swim-back {
  0% {
    transform: translateX(105vw) scaleX(-1) translateY(0);
  }
  25% {
    transform: translateX(75vw) scaleX(-1) translateY(12px);
  }
  50% {
    transform: translateX(45vw) scaleX(-1) translateY(-8px);
  }
  75% {
    transform: translateX(15vw) scaleX(-1) translateY(10px);
  }
  100% {
    transform: translateX(-15vw) scaleX(-1) translateY(0);
  }
}

@layer components {
  .glass-card {
    @apply bg-white/10 border border-white/[.16] rounded-[20px] backdrop-blur-md;
  }

  .glass-circle {
    @apply flex items-center justify-center rounded-full bg-white/[.12] border border-white/25 backdrop-blur-md;
  }

  /* The panel slides on transform, but visibility has to travel with it:
     without it the panel stays in the tab order while parked off-screen, and
     with `hidden` instead there is nothing to animate at all. Written out rather
     than as transition-[transform,visibility] — Tailwind does not emit that
     arbitrary value, so the class silently did nothing. */
  .nav-panel {
    transition: transform 300ms ease-out, visibility 300ms ease-out;
  }

  /* Burger → X. Three bars share one origin at the centre of the button; when
     closed the outer two are pushed apart, when open they collapse back onto the
     middle and cross, while the middle fades out. Only transform and opacity
     animate, so the whole thing stays on the compositor. */
  .burger-bar {
    @apply absolute left-0 top-1/2 -mt-px block h-0.5 w-full rounded-full bg-current transition duration-200 ease-out;
  }

  .burger-bar-top { @apply -translate-y-1.5; }
  .burger-bar-bot { @apply translate-y-1.5; }

  .nav-open .burger-bar-top { @apply translate-y-0 rotate-45; }
  .nav-open .burger-bar-mid { @apply opacity-0; }
  .nav-open .burger-bar-bot { @apply translate-y-0 -rotate-45; }

  .glass-pill {
    @apply rounded-full px-5 py-2.5 text-white/80 transition-colors duration-200 hover:text-white;
  }

  .glass-pill-active {
    @apply bg-white/[.14] border border-white/20 text-white;
  }

  .glass-chip {
    @apply inline-block bg-white/10 border border-white/[.16] rounded-full px-4 py-2 text-sm text-white transition-colors duration-200 hover:bg-white/20;
  }

  .glass-input-bar {
    @apply flex items-center gap-3.5 bg-white/[.12] border border-white/[.28] rounded-[18px] backdrop-blur-md;
  }

  .stat-tile {
    @apply flex-1 bg-white/10 border border-white/[.18] rounded-2xl px-4 py-3.5 backdrop-blur-md;
  }

  .btn-gold {
    @apply inline-flex items-center justify-center bg-accent-temperature text-depth-mid font-semibold rounded-xl px-5 py-2.5 transition-opacity duration-200 hover:opacity-90;
  }

  .eyebrow {
    @apply uppercase tracking-[4px] text-accent-level font-medium;
  }

  .metric-label {
    @apply uppercase tracking-[2px] font-medium;
  }

  .search-result {
    @apply glass-card transition-colors duration-150;
  }

  .search-result-current {
    @apply bg-white/20 border-white/40;
  }

  .scrollbar-hidden {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .scrollbar-hidden::-webkit-scrollbar {
    display: none;
  }
}

#map,
#map .leaflet-container {
  background: #f4f4f2;
}

/* Leaflet dark glass popups. Scoped to #map so these outrank leaflet.css,
   which is linked in the page body and therefore loads after this file. */
#map .leaflet-popup-content-wrapper {
  background: rgba(12, 12, 28, 0.88);
  backdrop-filter: blur(8px);
  color: #fff;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
}
#map .leaflet-popup-tip {
  background: rgba(12, 12, 28, 0.88);
}
#map a.leaflet-popup-close-button {
  color: rgba(255, 255, 255, 0.6);
}
.station-popup {
  font-family: "Sora", system-ui, sans-serif;
}
.station-popup .name {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
}
.station-popup .water-body {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
}
.station-popup .stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.station-popup .stat {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  padding: 6px 10px;
}
.station-popup .stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.7);
}
.station-popup .stat-value {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.station-popup .stat-unit {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
}
.station-popup .details-link {
  display: inline-block;
  margin-top: 4px;
  padding: 6px 14px;
  background: #f4d06a;
  color: #2a1cc4;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s;
}
.station-popup .details-link:hover {
  opacity: 0.85;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */