/* TNG Museum Floor Plan — isometric overhead walkthrough */

:root {
  --mfp-bg: #050609;
  --mfp-floor: #0c0e14;
  --mfp-wall: #161a24;
  --mfp-corridor: #0a0c12;
  --mfp-amber: #c47a00;
  --mfp-text: #f5f0e8;
  --mfp-muted: rgba(245, 240, 232, 0.55);
  --mfp-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.mfp-page {
  --pair-bg: var(--mfp-bg);
  --pair-text: var(--mfp-text);
  --pair-muted: var(--mfp-muted);
  --pair-amber: var(--mfp-amber);
  background: var(--mfp-bg);
  min-height: 100vh;
  color: var(--mfp-text);
  font-family: Inter, system-ui, sans-serif;
}

.mfp-chrome {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem clamp(1.25rem, 4vw, 2.5rem);
  border-bottom: 1px solid rgba(245, 240, 232, 0.08);
  background: color-mix(in srgb, var(--mfp-bg) 88%, transparent);
  backdrop-filter: blur(10px);
}

.mfp-chrome__mark {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mfp-text);
  text-decoration: none;
}

.mfp-chrome__nav {
  display: flex;
  gap: 1.25rem;
}

.mfp-chrome__link {
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mfp-muted);
  text-decoration: none;
}

.mfp-chrome__link:hover { color: var(--mfp-amber); }

.mfp-hero {
  max-width: 80rem;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem) 1rem;
}

.mfp-hero__kicker {
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--mfp-amber);
  margin: 0 0 0.75rem;
}

.mfp-hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 1.02;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}

.mfp-hero__lead {
  max-width: 42rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--mfp-muted);
  margin: 0;
}

.mfp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  margin-top: 1.25rem;
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mfp-muted);
}

.mfp-legend__item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.mfp-legend__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mfp-amber);
  box-shadow: 0 0 12px color-mix(in srgb, var(--mfp-amber) 60%, transparent);
}

.mfp-legend__dot--locked {
  background: transparent;
  border: 1px solid rgba(245, 240, 232, 0.25);
  box-shadow: none;
}

/* ── 3D isometric stage ── */
.mfp-stage-wrap {
  max-width: 80rem;
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 4vw, 2.5rem) clamp(3rem, 6vw, 5rem);
  perspective: 1400px;
  perspective-origin: 50% 40%;
}

.mfp-stage {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-38deg) scale(0.92);
  transform-origin: center center;
  min-height: clamp(420px, 55vw, 620px);
  transition: transform 1.2s var(--mfp-ease);
}

.mfp-stage.is-tilted {
  transform: rotateX(54deg) rotateZ(-38deg) scale(0.95);
}

.mfp-floor-base {
  position: absolute;
  inset: 8% 6% 12% 6%;
  background:
    linear-gradient(135deg, var(--mfp-floor) 0%, #080a10 100%);
  border: 1px solid rgba(245, 240, 232, 0.06);
  box-shadow:
    0 2rem 4rem -1rem rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  transform: translateZ(0);
}

.mfp-floor-base::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 39px,
      rgba(245, 240, 232, 0.02) 39px,
      rgba(245, 240, 232, 0.02) 40px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 39px,
      rgba(245, 240, 232, 0.02) 39px,
      rgba(245, 240, 232, 0.02) 40px
    );
  pointer-events: none;
}

/* Corridors */
.mfp-corridor {
  position: absolute;
  background: var(--mfp-corridor);
  border: 1px solid rgba(245, 240, 232, 0.05);
  transform: translateZ(2px);
  pointer-events: none;
}

.mfp-corridor--h {
  height: 10%;
  left: 18%;
  right: 18%;
  top: 45%;
}

.mfp-corridor--v {
  width: 10%;
  top: 18%;
  bottom: 18%;
  left: 45%;
}

.mfp-corridor--ring {
  position: absolute;
  inset: 22% 22% 22% 22%;
  border: 2px solid rgba(245, 240, 232, 0.04);
  border-radius: 2px;
  background: transparent;
  transform: translateZ(1px);
  pointer-events: none;
}

/* Atrium */
.mfp-atrium {
  position: absolute;
  left: 38%;
  top: 38%;
  width: 24%;
  height: 24%;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--mfp-amber) 8%, var(--mfp-floor)) 0%,
    var(--mfp-floor) 70%
  );
  border: 1px solid color-mix(in srgb, var(--mfp-amber) 20%, transparent);
  transform: translateZ(4px);
  display: grid;
  place-items: center;
  pointer-events: none;
}

.mfp-atrium__label {
  font-size: 0.42rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--mfp-amber) 70%, var(--mfp-text));
  transform: rotateZ(38deg) rotateX(-58deg);
  white-space: nowrap;
}

/* Rooms */
.mfp-room {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0.65rem 0.75rem;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(245, 240, 232, 0.08);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--room-accent, var(--mfp-amber)) 12%, var(--mfp-wall)) 0%,
    var(--mfp-wall) 55%,
    color-mix(in srgb, #000 40%, var(--mfp-wall)) 100%
  );
  transform: translateZ(8px);
  transition:
    transform 0.45s var(--mfp-ease),
    border-color 0.35s ease,
    box-shadow 0.45s ease;
  box-shadow:
    0 0.5rem 1.5rem -0.5rem rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  min-height: 0;
  overflow: hidden;
}

.mfp-room::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 40%,
    color-mix(in srgb, var(--room-accent, var(--mfp-amber)) 15%, transparent) 100%
  );
  opacity: 0.6;
  pointer-events: none;
}

.mfp-room:hover:not(.mfp-room--locked) {
  transform: translateZ(18px);
  border-color: color-mix(in srgb, var(--room-accent, var(--mfp-amber)) 45%, transparent);
  box-shadow:
    0 1.25rem 2.5rem -0.5rem rgba(0, 0, 0, 0.65),
    0 0 2rem color-mix(in srgb, var(--room-accent, var(--mfp-amber)) 20%, transparent);
}

.mfp-room--locked {
  opacity: 0.72;
  cursor: not-allowed;
}

.mfp-room--locked:hover {
  transform: translateZ(10px);
}

.mfp-room--here {
  border-color: color-mix(in srgb, var(--mfp-amber) 55%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--mfp-amber) 30%, transparent),
    0 1rem 2rem -0.5rem rgba(0, 0, 0, 0.6),
    0 0 2.5rem color-mix(in srgb, var(--mfp-amber) 25%, transparent);
}

.mfp-room__index {
  font-size: 0.42rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--room-accent, var(--mfp-amber));
  position: relative;
  z-index: 1;
}

.mfp-room__name {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0.2rem 0 0.1rem;
  position: relative;
  z-index: 1;
  line-height: 1.15;
}

.mfp-room__artists {
  font-size: 0.48rem;
  letter-spacing: 0.06em;
  color: var(--mfp-muted);
  position: relative;
  z-index: 1;
  line-height: 1.35;
}

.mfp-room__status {
  position: absolute;
  top: 0.45rem;
  right: 0.5rem;
  font-size: 0.38rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.2rem 0.35rem;
  border: 1px solid rgba(245, 240, 232, 0.12);
  color: var(--mfp-muted);
  z-index: 2;
}

.mfp-room--here .mfp-room__status {
  border-color: color-mix(in srgb, var(--mfp-amber) 40%, transparent);
  color: var(--mfp-amber);
}

/* Room positions — octagonal ring around atrium */
.mfp-room[data-wing="audacity"]    { left: 38%; top: 68%; width: 24%; height: 18%; --room-accent: #c47a00; }
.mfp-room[data-wing="sagacity"]    { left: 68%; top: 38%; width: 18%; height: 24%; --room-accent: #c9a227; }
.mfp-room[data-wing="perspicacity"]{ left: 68%; top: 14%; width: 18%; height: 22%; --room-accent: #8fa4b8; }
.mfp-room[data-wing="tenacity"]    { left: 38%; top: 8%;  width: 24%; height: 18%; --room-accent: #d4a017; }
.mfp-room[data-wing="ferocity"]    { left: 14%; top: 14%; width: 18%; height: 22%; --room-accent: #a03030; }
.mfp-room[data-wing="authenticity"]{ left: 8%;  top: 38%; width: 18%; height: 24%; --room-accent: #6a8fa8; }
.mfp-room[data-wing="eccentricity"]{ left: 14%; top: 68%; width: 18%; height: 18%; --room-accent: #7090a8; }
.mfp-room[data-wing="veracity"]    { left: 68%; top: 68%; width: 18%; height: 18%; --room-accent: #b89060; }

/* You are here dot */
.mfp-you-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--mfp-amber);
  transform: translateZ(24px) translate(-50%, -50%);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--mfp-amber) 25%, transparent),
    0 0 20px color-mix(in srgb, var(--mfp-amber) 55%, transparent);
  pointer-events: none;
  z-index: 20;
  transition: left 0.8s var(--mfp-ease), top 0.8s var(--mfp-ease);
}

.mfp-you-dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--mfp-amber) 50%, transparent);
  animation: mfp-pulse 2.2s ease-out infinite;
}

@keyframes mfp-pulse {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

.mfp-you-dot__label {
  position: absolute;
  left: 50%;
  top: -1.75rem;
  transform: translateX(-50%) rotateZ(38deg) rotateX(-58deg);
  font-size: 0.4rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mfp-amber);
  white-space: nowrap;
}

/* Mini strip widget */
.mfp-strip {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem clamp(1rem, 3vw, 2rem);
  background: color-mix(in srgb, var(--mfp-bg) 92%, transparent);
  border-top: 1px solid rgba(245, 240, 232, 0.08);
  backdrop-filter: blur(12px);
  font-size: 0.48rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mfp-strip__here {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--mfp-amber);
  font-weight: 600;
}

.mfp-strip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mfp-amber);
  box-shadow: 0 0 8px color-mix(in srgb, var(--mfp-amber) 60%, transparent);
}

.mfp-strip__map {
  flex: 1;
  display: flex;
  gap: 3px;
  align-items: center;
  justify-content: center;
  max-width: 28rem;
  margin: 0 auto;
}

.mfp-strip__wing {
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: rgba(245, 240, 232, 0.12);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.mfp-strip__wing.is-here {
  background: var(--mfp-amber);
  transform: scale(1.35);
  box-shadow: 0 0 8px color-mix(in srgb, var(--mfp-amber) 50%, transparent);
}

.mfp-strip__wing.is-live:hover {
  background: color-mix(in srgb, var(--mfp-amber) 60%, transparent);
}

.mfp-strip__link {
  color: var(--mfp-muted);
  text-decoration: none;
  white-space: nowrap;
}

.mfp-strip__link:hover { color: var(--mfp-amber); }

.audacity-museum-page {
  padding-bottom: 3.25rem;
}

.mfp-toast {
  position: fixed;
  bottom: 4rem;
  left: 50%;
  transform: translateX(-50%) translateY(1rem);
  padding: 0.65rem 1rem;
  font-size: 0.52rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mfp-text);
  background: color-mix(in srgb, var(--mfp-bg) 90%, transparent);
  border: 1px solid rgba(245, 240, 232, 0.12);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
  z-index: 200;
}

.mfp-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.mfp-footer {
  max-width: 80rem;
  margin: 0 auto;
  padding: 2rem clamp(1.25rem, 4vw, 2.5rem) 4rem;
  border-top: 1px solid rgba(245, 240, 232, 0.08);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mfp-muted);
}

.mfp-footer a { color: var(--mfp-amber); text-decoration: none; }

@media (max-width: 700px) {
  .mfp-stage {
    transform: rotateX(62deg) rotateZ(-38deg) scale(0.78);
    min-height: 360px;
  }
  .mfp-room__artists { display: none; }
  .mfp-room__name { font-size: 0.58rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mfp-stage,
  .mfp-you-dot,
  .mfp-room {
    transition: none;
  }
  .mfp-you-dot::after {
    animation: none;
  }
}