/* ============================================================
   BK Poličnik MTB — custom styles and animations
   ============================================================ */

:root {
  --brand: #22c55e;
  --brand-dark: #16a34a;
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #020617; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #334155; }

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16,.84,.44,1),
              transform .7s cubic-bezier(.16,.84,.44,1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal-scale { transform: scale(.94); }
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible { transform: none; }

/* stagger delays */
.d1 { transition-delay: .08s; }
.d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; }
.d4 { transition-delay: .32s; }
.d5 { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Hero grid + glow ---------- */
.grid-bg {
  background-image:
    linear-gradient(to right, rgba(30,41,59,.35) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(30,41,59,.35) 1px, transparent 1px);
  background-size: 4rem 4rem;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 55%, transparent 100%);
}
.aurora {
  position: absolute; border-radius: 999px; filter: blur(90px);
  opacity: .5; pointer-events: none;
  animation: floaty 14s ease-in-out infinite;
}
@keyframes floaty {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(24px,-28px) scale(1.08); }
}

/* ---------- Gradient text shimmer ---------- */
.shimmer {
  background: linear-gradient(100deg,#4ade80,#a7f3d0,#4ade80);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: 200% center; } }

/* ---------- Buttons ---------- */
.btn-primary {
  position: relative; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%);
}
.btn-primary:hover::after { transform: translateX(120%); transition: transform .8s ease; }

/* ---------- Card hover lift ---------- */
.card-lift { transition: transform .35s cubic-bezier(.16,.84,.44,1), border-color .35s, box-shadow .35s; }
.card-lift:hover { transform: translateY(-6px); box-shadow: 0 24px 60px -24px rgba(34,197,94,.25); }

/* ---------- Route card image tint ---------- */
.route-thumb {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(34,197,94,.28), transparent 55%),
    linear-gradient(135deg,#0f172a,#1e293b);
}

/* ---------- Difficulty badges ---------- */
.tez-sky   { background: rgba(56,189,248,.12); color:#7dd3fc; border-color: rgba(56,189,248,.3); }
.tez-teal  { background: rgba(20,184,166,.12); color:#5eead4; border-color: rgba(20,184,166,.3); }
.tez-green { background: rgba(34,197,94,.12);  color:#86efac; border-color: rgba(34,197,94,.3); }
.tez-amber { background: rgba(245,158,11,.12); color:#fcd34d; border-color: rgba(245,158,11,.3); }

/* ---------- Nav active link ---------- */
.nav-link { position: relative; }
.nav-link::after {
  content:""; position:absolute; left:0; right:100%; bottom:-6px; height:2px;
  background: var(--brand); transition: right .3s ease;
}
.nav-link:hover::after, .nav-link.active::after { right: 0; }
.nav-link.active { color:#4ade80; }

/* ---------- Mobile menu ---------- */
#mobileMenu { transition: max-height .4s ease, opacity .3s ease; max-height:0; opacity:0; overflow:hidden; }
#mobileMenu.open { max-height: 420px; opacity:1; }

/* ---------- Leaflet map ---------- */
.leaflet-container { background:#a9a69f !important; font-family: inherit; }
/* The basemap is dimmed so it sits better against the dark page.
   The filter goes on the tile pane, not on individual tiles — the
   track and markers live in another pane and stay at full strength. */
.leaflet-tile-pane { filter: brightness(.72) saturate(.9) contrast(1.06); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background:#1e293b; color:#e2e8f0; }
.map-shell { box-shadow: 0 30px 80px -40px rgba(0,0,0,.9); }

/* ---------- Elevation SVG ---------- */
.elev-line { fill: none; stroke: var(--brand); stroke-width: 2; }
.elev-area { fill: url(#elevGrad); }

/* ---------- Counter ---------- */
.count { font-variant-numeric: tabular-nums; }

/* ---------- Marquee (partners / regions) ---------- */
.marquee { display:flex; gap:3rem; width:max-content; animation: slide 26s linear infinite; }
.marquee:hover { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- Fade-in page ---------- */
.page-fade { animation: pageIn .6s ease both; }
@keyframes pageIn { from { opacity:0; transform: translateY(8px);} to {opacity:1; transform:none;} }

/* ---------- Spinner ---------- */
.spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(148,163,184,.25); border-top-color: var(--brand);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }