/* ===========================================================================
   modern.css — additive modernization layer (loaded LAST).
   Theme-aware: uses the existing CSS variables (--accent, --bg-surface, --border,
   --text-*), so it adapts to every theme. Motion is GPU-friendly (transform /
   opacity only) and fully disabled under prefers-reduced-motion. No layout or
   structural changes — depth, tasteful motion, and accent micro-interactions only.
   =========================================================================== */

/* Smooth, consistent easing on interactive surfaces. */
.card,
.classic-metric,
.forecast-day,
.metric-tile,
.feature-card,
.nav-scroll-item {
  transition:
    transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.28s ease,
    border-color 0.28s ease,
    background-color 0.28s ease;
  will-change: transform;
}

/* Refined card depth + a hover lift with a faint accent-tinted ring; plus a faint
   top inner highlight (the gradient) for a crisp, layered feel. */
.card {
  position: relative;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 10px 28px -14px rgba(0, 0, 0, 0.38);
  background-image: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--accent) 5%, transparent),
    transparent 120px
  );
}
.card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.22),
    0 22px 48px -18px rgba(0, 0, 0, 0.5),
    0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent);
}

/* Metric tiles: a gentle lift; the value picks up the accent on hover. */
.classic-metric:hover,
.metric-tile:hover {
  transform: translateY(-2px);
}
.classic-metric:hover .classic-metric-value,
.classic-metric:hover [class*="value"] {
  color: var(--accent);
  transition: color 0.28s ease;
}

/* Forecast day cells: an accent underline that grows on hover / active. */
.forecast-day { position: relative; }
.forecast-day::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.forecast-day:hover::after,
.forecast-day.active::after { width: 64%; }

@media (prefers-reduced-motion: no-preference) {
  /* Staggered section reveal — hooks the existing lazy-load .is-visible class.
     Each revealed card fades and slides up; a small per-position delay gives a
     graceful cascade as sections scroll into view. */
  .lazy-section.is-visible > .card,
  .lazy-section.is-visible .feature-card,
  .lazy-section.is-visible > * > .card {
    animation: oras-reveal 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  @keyframes oras-reveal {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* The hero temperature settles in with a subtle rise. */
  #classic-temp {
    animation: oras-temp-in 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  @keyframes oras-temp-in {
    from { opacity: 0; transform: translateY(12px) scale(0.985); }
    to   { opacity: 1; transform: none; }
  }
}

/* Accent-coloured, keyboard-only focus rings (accessibility + polish). */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
.forecast-day:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Respect users who prefer reduced motion: no transforms, no reveals. */
@media (prefers-reduced-motion: reduce) {
  .card,
  .classic-metric,
  .forecast-day,
  .metric-tile,
  .feature-card {
    transition: none;
    will-change: auto;
  }
  .card:hover,
  .classic-metric:hover { transform: none; }
  .lazy-section.is-visible .card,
  #classic-temp { animation: none; }
}

/* --- Accent presence + modern polish (additive, theme-aware) --- */

/* A slim accent marker on card / section headers. */
.card-header,
.section-group-header {
  position: relative;
}
.card-header::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-5, 1.5rem));
  top: 0;
  bottom: var(--space-4, 1rem);
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 30%, transparent));
}

/* Modern thin, accent-tinted scrollbar. */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 55%, transparent) transparent;
}
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 75%, transparent);
  background-clip: content-box;
}

/* Smooth in-page scrolling (the section-nav jumps feel intentional). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* The location pill in the header gets a subtle accent on hover/focus. */
[class*="city-picker"]:hover,
[class*="location"]:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

/* --- Phase C-2: tasteful atmosphere + accent emphasis (additive, cheap) --- */

/* A soft accent glow on the hero temperature — gives the headline number life. */
#classic-temp {
  text-shadow: 0 0 40px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Section group headers: an accent dot + refined letter-spacing for editorial feel. */
.section-group-header {
  letter-spacing: 0.04em;
}

/* Key numeric values (scores, gauges) inherit a subtle accent on emphasis. */
.fishing-score,
.activity-score,
[class*="-score"]:not([class*="progress"]) {
  text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ===========================================================================
   v2 — sharper geometry + stronger accent (additive, theme-aware).
   Goal: a more modern, confident look — less rounding on the pill/modal shapes,
   and a clearer accent presence on primary actions and active states.
   =========================================================================== */

/* --- Sharper geometry: tighten the rounder hardcoded shapes to the token scale --- */
.section-nav-controls { border-radius: 10px; }
.section-nav-indicator { border-radius: 6px; }
.coords-modal,
.city-picker-sheet { border-radius: 12px; }
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.map-filter { border-radius: 8px; }

/* --- Accent-forward primary actions --- */
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--accent) 86%, #000);
  border-color: color-mix(in srgb, var(--accent) 86%, #000);
}

/* --- Accent-forward active states (selected pills / filters / tabs) --- */
.map-filter.active,
.map-filter[aria-pressed="true"],
.nav-scroll-item.active,
.tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* --- A crisp accent cap on cards for a consistent, stronger accent presence --- */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--accent),
    color-mix(in srgb, var(--accent) 30%, transparent)
  );
  border-radius: 8px 8px 0 0;
  opacity: 0.9;
  pointer-events: none;
}

/* The hero degree mark picks up the accent — a small, confident touch. */
#classic-temp .degree,
.classic-temp .degree { color: var(--accent); }