/* ============================================================
   THE CAVE — wayfinder.css
   The Wayfinder is a site-wide device, not a Threshold-only
   widget: this file (plus wayfinder.js) is included on every
   page, so the pocket, the panel, and the destination list are
   identical everywhere and only need to be changed in one place.

   Depends on tokens already defined by cave.css or stack-shared.css
   (--ink, --ember, --gold, --parchment) — include one of those first.
   ============================================================ */


/* ---------- The Wayfinder medallion: permanently visible ---------- */
.wayfinder-medallion {
  position: fixed;
  right: 4%;
  bottom: 6%;
  z-index: 39;
  width: 140px;
  height: auto;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.25,1.4,.5,1);
}
.wayfinder-medallion.is-settled {
  opacity: 1;
  transform: scale(1);
}
.wayfinder-medallion-image {
  width: 108px;
  height: 108px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(255,205,120,0.55));
  animation: medallion-idle-glow 5s ease-in-out infinite;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.wayfinder-medallion-image.img-failed {
  background: radial-gradient(circle, #f3d68a 0%, #c99a48 45%, #8a5a22 75%, transparent 100%);
  border-radius: 50%;
  border: 2px solid rgba(255,230,170,0.7);
}
@keyframes medallion-idle-glow {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(255,205,120,0.45)); }
  50%      { filter: drop-shadow(0 0 22px rgba(255,215,140,0.8)); }
}
.wayfinder-medallion:hover .wayfinder-medallion-image {
  filter: drop-shadow(0 0 26px rgba(255,220,150,0.9));
  transform: scale(1.04);
}
.wayfinder-medallion.is-pulsing .wayfinder-medallion-image {
  animation: medallion-idle-glow 5s ease-in-out infinite, medallion-click-pulse 0.5s ease;
}
@keyframes medallion-click-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}
.wayfinder-label {
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  line-height: 1.5;
  color: #fff3cf;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0,0,0,0.85), 0 0 12px rgba(255,205,120,0.4);
}

@media (prefers-reduced-motion: reduce) {
  .wayfinder-medallion-image { animation: none !important; }
  .wayfinder-medallion { transition: opacity 0.4s ease; transform: none !important; }
}

/* ---------- The panel: readable at a glance, no strain ---------- */
.journey-panel {
  position: fixed;
  right: 4%; bottom: calc(6% + 172px);
  width: min(420px, 44vw);
  padding: 22px 24px;
  border-radius: 12px;
  background: rgba(10, 8, 6, 0.9);
  border: 1px solid rgba(214,154,77,0.4);
  backdrop-filter: blur(6px);
  opacity: 0;
  z-index: 42;
  clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%);
  pointer-events: none;
  transition: clip-path 0.65s cubic-bezier(.4,0,.2,1), opacity 0.35s ease;
}
.journey-panel.is-open {
  opacity: 1;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  pointer-events: auto;
}

.destination-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.destination-instruction {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ember);
  flex: 1 1 auto;
}
.journey-panel.is-locked-view .destination-header-row .destination-instruction {
  color: rgba(241,230,201,0.7);
}

.destination-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.dest-tab {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(214,154,77,0.35);
  color: rgba(241,230,201,0.6);
  cursor: pointer;
  transition: all 0.2s ease;
}
.dest-tab.is-open {
  color: var(--gold);
  border-color: rgba(232,199,122,0.6);
}
.dest-tab.is-open:hover { background: rgba(232,199,122,0.15); }
.dest-tab.is-locked {
  color: rgba(241,230,201,0.42);
  border-style: dashed;
}
.dest-tab.is-active {
  background: linear-gradient(160deg, #f3d68a, #c99a48);
  color: var(--ink);
  border-color: transparent;
  font-weight: 700;
}

.destination-image-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid rgba(214,154,77,0.4);
  box-shadow: inset 0 0 16px rgba(0,0,0,0.5);
  background: #000;
}
.destination-image {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.03);
}
.destination-content-fade { transition: opacity 0.25s ease; }
.destination-content-fade.is-swapping { opacity: 0; }

.destination-title {
  margin: 0 0 12px;
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gold);
  line-height: 1.25;
}
.destination-body {
  margin: 0 0 18px;
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--parchment);
}
.destination-locked-note {
  display: none;
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(214,154,77,0.7);
  margin: -6px 0 18px;
}
.journey-panel.is-locked-view .destination-locked-note { display: block; }
.journey-panel.is-locked-view .destination-next { display: none; }

.destination-next {
  flex: 0 0 auto;
  padding: 10px 24px;
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(160deg, #f3d68a, #c99a48);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  transition: filter 0.2s ease;
}
.destination-next:hover { filter: brightness(1.1); }

@media (max-width: 640px) {
  .wayfinder-medallion { width: 100px; right: 5%; bottom: 5%; }
  .wayfinder-medallion-image { width: 78px; height: 78px; }
  .wayfinder-label { font-size: 0.58rem; }
  .journey-panel { width: min(340px, 90vw); right: 3%; bottom: calc(5% + 128px); padding: 18px 20px; }
  .destination-title { font-size: 1.3rem; }
  .destination-body { font-size: 1.08rem; }
  .destination-header-row { flex-wrap: wrap; }
  .destination-instruction { font-size: 0.75rem; }
}