/*
 * reveal.css — styling for beat 3, the reveal climax (U6).
 *
 * Two halves: the Leaflet map (per-kind pin colors + the pulsing "you" dot, mirrored from
 * the proof Spain map at family/.../spain-jun-2026-map.html) and the phone buzz card (the
 * .phone/.screen/.ping furniture from web/demo.html, plus a device-vibration cue on .buzz).
 *
 * Self-contained so reveal.html only needs this stylesheet. The tokens match crew-feed.css
 * (the house style) so U5 can load both without clashes.
 */

/* Core tokens live in crew-feed.css (loaded first wherever the reel runs). These
 * re-declarations are a fallback so reveal.html works standalone; keep them in
 * sync with crew-feed.css. The per-kind pin colors are re-tuned to the warm
 * family in DESIGN.md (matching reveal.js POI_COLORS). */
:root {
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #f7f1e7;
  --surface: #fffbf4;
  --surface-sunken: #f1e9db;
  --ink: #2b2722;
  --ink-2: #5c554b;
  --muted: #8a8175;
  --line: #e6ddcd;
  --clay: #c5613a;
  --clay-deep: #a44e2d;
  --clay-tint: #f6e3d8;
  --pine: #1f6f54;
  --pine-tint: #e3efe9;
  --gold: #b07d18;
  --shadow-card: 0 1px 2px rgba(43, 39, 34, 0.04), 0 8px 24px rgba(43, 39, 34, 0.06);
  --paper: var(--bg);
  --card: var(--surface);
  --accent: var(--clay);
  --accent-d: var(--clay-deep);

  /* Per-kind pin colors — re-tuned to the warm crew family (Section 1, DESIGN.md). */
  --hotel: #b07d18;   /* Nest — warm ochre */
  --meal: #c5613a;    /* Sage — clay */
  --sight: #2f6e8f;   /* Skip — dusty teal-blue */
  --act: #7a4e86;     /* Ledger — muted plum */
  --travel: #8a8175;  /* warm grey */
  --story: #a44e2d;   /* Watch — deep clay-rust */
}

/* ---- The map canvas ----------------------------------------------------- */

.reveal-map {
  height: 440px;
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface-sunken);
  box-shadow: var(--shadow-card);
}
/* Frame the Voyager tiles in the design: rounded corners + a hair of warmth. */
.reveal-map .leaflet-container {
  border-radius: 16px;
  background: var(--surface-sunken);
}
.reveal-map .leaflet-tile-pane {
  filter: saturate(0.95) sepia(0.04) brightness(1.01);
}

/* The geofenced "you're here" pin — clay, gentle pulse (Section 6, DESIGN.md). */
.you-dot {
  background: var(--clay);
  border: 3px solid var(--surface);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(197, 97, 58, 0.5);
  animation: youpulse 2s infinite;
}
/* Themed walking-route badges (reveal.routes): a numbered 1..N circle on each waypoint. */
.route-badge {
  background: #a44e2d;
  color: #fff;
  border: 2px solid #fffbf4;
  border-radius: 50%;
  width: 24px !important;
  height: 24px !important;
  line-height: 21px;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
@keyframes youpulse {
  0% {
    box-shadow: 0 0 0 0 rgba(197, 97, 58, 0.5);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(197, 97, 58, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(197, 97, 58, 0);
  }
}

/* Popups: tie line + story blurb, matching the proof map. */
.leaflet-popup-content {
  max-width: 250px;
  font-size: 13px;
  line-height: 1.45;
}
.leaflet-popup-content .tie {
  color: var(--story);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
/* The "when" suffix in the guided-tour popup as each POI lights up (issue #9). */
.leaflet-popup-content .when {
  color: var(--muted);
  font-weight: 600;
  font-size: 11.5px;
}
.leaflet-popup-content .story {
  display: block;
  margin: 5px 0 6px;
  color: #333;
}

/* ---- The phone + the buzz (the kicker) ---------------------------------- */

.phone {
  justify-self: center;
  width: 248px;
  height: 430px;
  border-radius: 34px;
  background: #231d16;
  padding: 12px;
  box-shadow: 0 18px 40px rgba(43, 39, 34, 0.22);
  transition: transform 0.08s;
}
.screen {
  background: #1c1813;
  border-radius: 24px;
  height: 100%;
  padding: 16px 12px;
  color: #f2e9da;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.screen .time {
  font-size: 12px;
  color: #c8a87f;
  text-align: center;
}

.ping {
  background: #2a221a;
  border-radius: 14px;
  padding: 11px 12px;
  opacity: 0;
  transform: scale(0.96);
  transition: 0.4s;
}
.ping.show {
  opacity: 1;
  transform: none;
}
.ping .h {
  font-size: 13px;
  font-weight: 700;
  color: #e3946d;
}
.ping .b {
  font-size: 12.5px;
  color: #e4d8c5;
  margin-top: 3px;
  line-height: 1.35;
}

/* The geofence buzz: a brighter clay accent + an "ARRIVED" kicker via ::before. */
.ping.buzz {
  border: 1px solid #5a3a28;
}
.ping.buzz .h {
  color: #efa985;
}
.ping.buzz::before {
  content: 'TRIPCREW · ARRIVED';
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #c8895f;
  margin-bottom: 5px;
}

/* Device-vibration visual cue: the whole phone shudders briefly when the buzz fires. */
.phone.buzzing {
  animation: phonebuzz 0.6s ease-in-out 0s 1;
}
@keyframes phonebuzz {
  0%,
  100% {
    transform: translateX(0) rotate(0);
  }
  15% {
    transform: translateX(-3px) rotate(-0.6deg);
  }
  30% {
    transform: translateX(3px) rotate(0.6deg);
  }
  45% {
    transform: translateX(-2px) rotate(-0.4deg);
  }
  60% {
    transform: translateX(2px) rotate(0.4deg);
  }
  75% {
    transform: translateX(-1px);
  }
}
/* ---- POI labels + the tapped/active pin (issues #14 + #16) -------------- */

/* Permanent pin labels, hidden until the labels phase fades them in (reveal.js toggles
 * `.labels-on` on the map element after the pins drop). Warm, low-chrome, Apple-Maps-feel. */
.leaflet-tooltip.poi-label {
  background: rgba(255, 251, 244, 0.94);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 8px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.55s ease;
  pointer-events: none;
}
.leaflet-tooltip.poi-label::before {
  display: none; /* drop Leaflet's default tooltip arrow for the clean chip look */
}
.reveal-map.labels-on .leaflet-tooltip.poi-label {
  opacity: 1;
}
/* The active (tapped) pin reads brighter so the map ↔ detail link is obvious. */
.leaflet-interactive.poi-active {
  filter: drop-shadow(0 0 6px rgba(197, 97, 58, 0.6));
}

/* ---- Check-in / stored-details card (the booking counterpart to the guide, #16) -------- */

/* The right detail panel shows this when a stay/booking pin is tapped: the stored details the
 * crew gathered (name, area, dates, nights, confirmation code). Same surface language as the
 * guide so the two detail types read as one product. */
.checkin-panel {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(43, 39, 34, 0.16);
  opacity: 0;
  transform: translateY(22px) scale(0.97);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.checkin-panel.show {
  opacity: 1;
  transform: none;
}
.checkin-head {
  background: linear-gradient(135deg, #2a221a, #5a3a28);
  color: #fffbf4;
  padding: 18px 20px 16px;
}
.checkin-kicker {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #efb38f;
  margin-bottom: 5px;
}
.checkin-name {
  margin: 0;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: 24px;
  line-height: 1.14;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.checkin-area {
  margin-top: 6px;
  font-size: 12.5px;
  color: #e4d8c5;
  line-height: 1.4;
}
.checkin-body {
  padding: 16px 20px 20px;
}
.checkin-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.checkin-row:first-of-type {
  border-top: 0;
}
.checkin-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--muted);
}
.checkin-value {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
}
.checkin-value.checkin-code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-weight: 700;
  color: var(--clay-deep);
  background: var(--clay-tint);
  border-radius: 7px;
  padding: 3px 9px;
  font-size: 13px;
  justify-self: start;
}
.checkin-note {
  margin-top: 12px;
  padding: 11px 13px;
  background: var(--surface-sunken);
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
}

@media (prefers-reduced-motion: reduce) {
  .you-dot {
    animation: none;
  }
  .phone.buzzing {
    animation: none;
  }
  .checkin-panel,
  .leaflet-tooltip.poi-label {
    transition: none;
  }
}