@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;
  }

  .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.
 *


 */