/* ── AperoMetro — Aperol-inspired brand system ──────────────────────── */
:root {
  /* Cream surfaces */
  --cream:      #FFF6E9;
  --cream-2:    #F8E9CC;
  --peach:      #FFE6BE;
  --paper:      #FFF6E9;

  /* The brand: signature orange + deep red-orange + golden amber */
  --spritz:     #FE5000;   /* signature orange */
  --spritz-2:   #FF7128;   /* lighter orange wash */
  --amber:      #FFA52C;   /* golden amber */
  --gold:       #FFC56A;
  --coral:      #C2410C;   /* burnt terracotta — secondary accents */
  --coral-deep: #EB3300;   /* deep red-orange — pressed/active */

  /* Deep navy ink */
  --ink:        #16243F;   /* deep navy */
  --ink-2:      #2C3F61;
  --ink-soft:   #6E7C99;

  --shadow-warm: 24px 40px 80px rgba(254, 80, 0, 0.18);
  --shadow-btn:  0 14px 30px rgba(254, 80, 0, 0.28);

  --font-display: "Jost", system-ui, sans-serif;
  --font-accent:  "Spectral", Georgia, serif;

  /* The signature spritz gradient: amber → orange → deep red-orange */
  --grad-glass:  linear-gradient(180deg, #FFA52C 0%, #FE5000 55%, #EB3300 100%);
  --grad-sunset: linear-gradient(180deg, #FFA52C 0%, #FE5000 100%);
  --grad-sky:    linear-gradient(178deg, #FFA52C 0%, #FE5000 58%, #EB3300 100%);

  /* Button shape: fully rounded */
  --r-pill:      28px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
  background: var(--cream);
  font-family: var(--font-display);
  color: var(--ink);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

#root {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh; height: 100dvh;
  overflow: hidden;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── Leaflet customizations — warm orange-toned tiles ───────────────── */
/* Push the CartoDB tiles through a heavier sepia + warmer hue rotation
   so the basemap reads as part of the orange Find/Nav family rather than
   a neutral grey-cream OSM map. */
.leaflet-container {
  background: var(--peach);
  font-family: var(--font-display);
}
.leaflet-tile-pane {
  filter: sepia(0.95) saturate(1.85) hue-rotate(-32deg) brightness(1.08) contrast(0.92);
}
/* Subtle orange overlay over the tile pane unifies the palette */
.leaflet-tile-pane::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(254, 80, 0, 0.06), rgba(254, 80, 0, 0.14));
  pointer-events: none;
}
.leaflet-control-attribution {
  background: rgba(255, 249, 238, 0.82) !important;
  color: var(--ink-soft) !important;
  font-family: var(--font-display);
  font-size: 10px !important;
  padding: 2px 6px !important;
}
.leaflet-control-attribution a { color: var(--coral) !important; }
.leaflet-control-zoom { display: none; }
.leaflet-marker-icon { background: none !important; border: none !important; }

/* ── Marker-cluster pills — Aperol orange ───────────────────────────── */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background: rgba(251, 77, 26, 0.22) !important;
}
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  background: var(--spritz) !important;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 14px rgba(245, 81, 30, 0.4);
}
.marker-cluster { animation: pop-in .35s ease-out; }

/* ── Keyframes ──────────────────────────────────────────────────────── */
@keyframes bubble-rise {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  15%  { opacity: 0.9; }
  100% { transform: translateY(-58px) scale(0.5); opacity: 0; }
}
@keyframes float-soft {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-7px); }
}
@keyframes pin-pop {
  0%   { transform: translate(-50%,-100%) scale(0.2); opacity: 0; }
  60%  { transform: translate(-50%,-100%) scale(1.12); opacity: 1; }
  100% { transform: translate(-50%,-100%) scale(1); opacity: 1; }
}
@keyframes pin-drop {
  0%   { transform: translate(-50%,-260%) scale(0.9); opacity: 0; }
  70%  { transform: translate(-50%,-92%)  scale(1.03); opacity: 1; }
  100% { transform: translate(-50%,-100%) scale(1); opacity: 1; }
}
@keyframes dot-pulse {
  0%,100% { transform: translate(-50%,-50%) scale(1); opacity: 0.85; }
  50%     { transform: translate(-50%,-50%) scale(1.35); opacity: 1; }
}
@keyframes ring-pulse {
  0%   { transform: translate(-50%,-50%) scale(0.5); opacity: 0.6; }
  100% { transform: translate(-50%,-50%) scale(2.6); opacity: 0; }
}
@keyframes rise-in {
  from { transform: translateY(22px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in {
  0% { transform: scale(0.6); opacity: 0; }
  60%{ transform: scale(1.08); opacity: 1; }
  100%{ transform: scale(1); opacity: 1; }
}
@keyframes shimmer-sweep {
  0% { transform: translateX(-120%) skewX(-18deg); }
  100% { transform: translateX(220%) skewX(-18deg); }
}
@keyframes glass-clink-l {
  0%   { transform: rotate(-8deg) translateX(0); }
  45%  { transform: rotate(2deg) translateX(14px); }
  55%  { transform: rotate(-1deg) translateX(11px); }
  100% { transform: rotate(-6deg) translateX(2px); }
}
@keyframes glass-clink-r {
  0%   { transform: rotate(8deg) translateX(0) scaleX(-1); }
  45%  { transform: rotate(-2deg) translateX(-14px) scaleX(-1); }
  55%  { transform: rotate(1deg) translateX(-11px) scaleX(-1); }
  100% { transform: rotate(6deg) translateX(-2px) scaleX(-1); }
}
@keyframes arrow-bob {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}
@keyframes spin-slow { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}