/* ==========================================================================
   atlas-ui.css
   Warp Drive Yoga — Atlas UI layer
   Sidebar section cards, anatomy layer chips, skeleton loaders,
   focus mode, and breadcrumb navigation.

   Depends on custom properties defined in style.css (:root), namely:
   --bg-color, --surface-color, --glass-bg, --glass-border, --text-color,
   --text-muted, --lhc-cyan, --particle-violet, --plasma-magenta,
   --telemetry-gold, --border-color, --font-heading, --font-mono, --font-body

   Load AFTER style.css / sequence.css / pose-anatomy.css / atlas-list-viewer.css
   so these rules can refine, not fight, the existing cascade.
   Not yet linked from rocket-sequence.html — see note at bottom of file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Local tokens
   Layer colors mirror anatomy-layers.js exactly, so chip state colors always
   match the 3D rig / layer engine rather than drifting into a second palette.
   -------------------------------------------------------------------------- */
:root {
  --layer-skeleton: #e2e8f0;
  --layer-muscles: #9d4edd;
  --layer-nervous: #ffd166;
  --layer-fascia: #f72585;
  --layer-lymph: #00f0ff;
  --layer-endocrine: #7cff8f;
  --layer-coordinates: #3a86ff;
  --layer-analytics: #ff9f1c;

  --atlas-radius-sm: 4px;
  --atlas-radius-md: 8px;
  --atlas-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   1. Sidebar section cards (.section-btn redesign)
   Taller 78px touch target, left accent strip that grows in on active/hover
   instead of a full-border treatment, so the list reads as a stacked deck
   of cards rather than a flat button list.
   ========================================================================== */

.section-btn {
  position: relative;
  height: 78px;
  padding: 0.85rem 1.1rem 0.85rem 1.4rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--atlas-radius-md);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: background 0.25s var(--atlas-ease),
              border-color 0.25s var(--atlas-ease),
              transform 0.25s var(--atlas-ease),
              box-shadow 0.25s var(--atlas-ease);
}

/* Left accent strip — collapsed by default, grows on hover/active */
.section-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--lhc-cyan), var(--particle-violet));
  transform: scaleY(0.25);
  opacity: 0;
  transform-origin: center;
  transition: transform 0.3s var(--atlas-ease), opacity 0.3s var(--atlas-ease);
}

/* Faint scanning sheen on hover, reinforces the "console" feel without noise */
.section-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120px 60px at var(--mx, 20%) 50%, rgba(0, 240, 255, 0.08), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}

.section-btn:hover {
  background: rgba(0, 240, 255, 0.06);
  border-color: rgba(0, 240, 255, 0.25);
  transform: translateX(2px);
}

.section-btn:hover::before {
  transform: scaleY(0.6);
  opacity: 0.7;
}

.section-btn:hover::after {
  opacity: 1;
}

.section-btn.active {
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.12), rgba(0, 240, 255, 0.04));
  border-color: rgba(0, 240, 255, 0.4);
  box-shadow: 0 8px 24px -12px rgba(0, 240, 255, 0.35), inset 0 0 0 1px rgba(0, 240, 255, 0.08);
  color: var(--lhc-cyan);
}

.section-btn.active::before {
  transform: scaleY(1);
  opacity: 1;
  box-shadow: 0 0 12px var(--lhc-cyan), 0 0 4px var(--lhc-cyan);
}

.section-btn.active .section-btn-title {
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
}

/* Optional structured content inside a card: title row + preview row.
   Falls back gracefully if only text content is present. */
.section-btn-title {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.section-btn-count {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.section-btn.active .section-btn-count {
  color: var(--lhc-cyan);
}

.section-btn-preview {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.section-btn:disabled,
.section-btn.is-locked {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

.section-btn:disabled:hover,
.section-btn.is-locked:hover {
  transform: none;
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}

.section-btn:disabled:hover::before,
.section-btn.is-locked:hover::before {
  opacity: 0;
}

/* ==========================================================================
   2. Anatomy chip states
   Extends the existing .chip / .chip-static pattern (atlas-list-viewer.css)
   with per-layer coloring and interaction states, keyed to the same layer
   ids used by anatomy-layers.js (skeleton, muscles, nervous, fascia, lymph,
   endocrine, coordinates, analytics).
   ========================================================================== */

.anatomy-chip {
  --chip-color: var(--lhc-cyan);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: color-mix(in srgb, var(--chip-color) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--chip-color) 40%, transparent);
  color: var(--text-color);
  border-radius: 999px;
  padding: 0.3rem 0.75rem 0.3rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.anatomy-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--chip-color);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}

/* Per-layer color assignment via data attribute, e.g. data-layer="muscles" */
.anatomy-chip[data-layer="skeleton"]     { --chip-color: var(--layer-skeleton); }
.anatomy-chip[data-layer="muscles"]      { --chip-color: var(--layer-muscles); }
.anatomy-chip[data-layer="nervous"]      { --chip-color: var(--layer-nervous); }
.anatomy-chip[data-layer="fascia"]       { --chip-color: var(--layer-fascia); }
.anatomy-chip[data-layer="lymph"]        { --chip-color: var(--layer-lymph); }
.anatomy-chip[data-layer="endocrine"]    { --chip-color: var(--layer-endocrine); }
.anatomy-chip[data-layer="coordinates"]  { --chip-color: var(--layer-coordinates); }
.anatomy-chip[data-layer="analytics"]    { --chip-color: var(--layer-analytics); }

.anatomy-chip:hover {
  background: color-mix(in srgb, var(--chip-color) 20%, transparent);
  transform: translateY(-1px);
}

/* Active = layer currently visible/toggled on */
.anatomy-chip.is-active {
  background: color-mix(in srgb, var(--chip-color) 26%, transparent);
  border-color: var(--chip-color);
  box-shadow: 0 0 14px -4px var(--chip-color);
}

.anatomy-chip.is-active::before {
  box-shadow: 0 0 6px 1px var(--chip-color);
  transform: scale(1.15);
}

/* Static / non-interactive variant, mirrors .chip-static */
.anatomy-chip.is-static {
  cursor: default;
  opacity: 0.65;
}

.anatomy-chip.is-static:hover {
  transform: none;
  background: color-mix(in srgb, var(--chip-color) 12%, transparent);
}

/* Disabled = layer unavailable for this pose */
.anatomy-chip.is-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  filter: grayscale(0.6);
}

.anatomy-chip.is-disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Loading = value pending calculation (e.g. biomechanics not yet computed) */
.anatomy-chip.is-loading::before {
  animation: chip-pulse 1.1s ease-in-out infinite;
}

@keyframes chip-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.75); }
}

.anatomy-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* ==========================================================================
   3. Skeleton shimmer loader
   Generic content-placeholder loader for cards, chips, pose figures, and
   text lines while async data (pose lookups, biomechanics) resolves.
   Named .skeleton for the loading-placeholder convention; unrelated to the
   anatomical "skeleton" layer above (that's .anatomy-chip[data-layer="skeleton"]).
   ========================================================================== */

.skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--atlas-radius-sm);
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}

.skeleton * {
  visibility: hidden;
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 240, 255, 0.12) 35%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(0, 240, 255, 0.12) 65%,
    transparent
  );
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  100% { transform: translateX(100%); }
}

/* Shape presets */
.skeleton-text {
  height: 0.85em;
  width: 100%;
  margin: 0.3em 0;
  border-radius: 3px;
}

.skeleton-text.short { width: 40%; }
.skeleton-text.medium { width: 65%; }

.skeleton-title {
  height: 1.4em;
  width: 55%;
  margin-bottom: 0.6em;
  border-radius: 3px;
}

.skeleton-chip {
  height: 1.6em;
  width: 4.5em;
  border-radius: 999px;
  display: inline-block;
}

.skeleton-card {
  height: 78px; /* matches .section-btn */
  width: 100%;
  border-radius: var(--atlas-radius-md);
}

.skeleton-figure {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: var(--atlas-radius-md);
}

/* Respect reduced-motion preference: swap shimmer for a static pulse */
@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
  }
  .skeleton {
    animation: skeleton-fade 1.6s ease-in-out infinite;
  }
  @keyframes skeleton-fade {
    0%, 100% { background: rgba(255, 255, 255, 0.06); }
    50% { background: rgba(255, 255, 255, 0.1); }
  }
}

/* ==========================================================================
   4. Focus mode
   Applied to a top-level container (e.g. .atlas-container.focus-mode) to
   collapse chrome and let the viewport/pose take over — for teaching or
   presenting a single pose full-screen without navigating away.
   ========================================================================== */

.focus-mode .atlas-sidebar,
.focus-mode .atlas-right-panel,
.focus-mode .sidebar-header,
.focus-mode .breadcrumb {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-12px);
  transition: opacity 0.3s var(--atlas-ease), transform 0.3s var(--atlas-ease);
}

.focus-mode.atlas-container {
  grid-template-columns: 0px 1fr 0px;
  transition: grid-template-columns 0.4s var(--atlas-ease);
}

.focus-mode .atlas-viewport {
  justify-content: center;
}

/* Small persistent affordance to exit focus mode, since the sidebar (and
   its usual controls) are hidden while active. */
.focus-mode-exit {
  position: fixed;
  top: 128px; /* clears the ~116px sticky header (see style.css) + a small gap */
  left: 20px;
  z-index: 20;
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: rgba(6, 10, 20, 0.85);
  border: 1px solid var(--lhc-cyan);
  color: var(--lhc-cyan);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  backdrop-filter: blur(10px);
  cursor: pointer;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.25);
  transition: background 0.2s ease, transform 0.2s ease;
}

.focus-mode .focus-mode-exit {
  display: inline-flex;
}

.focus-mode-exit:hover {
  background: rgba(0, 240, 255, 0.15);
  transform: translateY(-1px);
}

/* ==========================================================================
   5. Breadcrumb animation styles
   Standalone component: Series → Section → Pose. Not currently present in
   rocket-sequence.html markup — add a
   <nav class="breadcrumb"><span class="breadcrumb-item">…</span>
   <span class="breadcrumb-sep">›</span> … </nav>
   wherever a location trail is wanted (see note at bottom of file).
   ========================================================================== */

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.breadcrumb-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s ease;
  animation: breadcrumb-in 0.35s var(--atlas-ease) both;
}

/* Stagger entrance when a new trail is rendered */
.breadcrumb-item:nth-child(1) { animation-delay: 0s; }
.breadcrumb-item:nth-child(3) { animation-delay: 0.06s; }
.breadcrumb-item:nth-child(5) { animation-delay: 0.12s; }
.breadcrumb-item:nth-child(7) { animation-delay: 0.18s; }

@keyframes breadcrumb-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

.breadcrumb-item:hover {
  color: var(--lhc-cyan);
}

.breadcrumb-item.is-current {
  color: var(--lhc-cyan);
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.45);
  cursor: default;
}

/* Underline sweep on hover for clickable crumbs */
.breadcrumb-item:not(.is-current)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -3px;
  height: 1px;
  background: var(--lhc-cyan);
  transition: right 0.25s var(--atlas-ease);
}

.breadcrumb-item:not(.is-current):hover::after {
  right: 0;
}

.breadcrumb-sep {
  color: rgba(255, 255, 255, 0.25);
  font-size: 0.8rem;
}

/* Replacing the trail (e.g. navigating to a new pose) — wrap the new set of
   items in .breadcrumb-swap to replay the entrance stagger */
.breadcrumb-swap .breadcrumb-item {
  animation-name: breadcrumb-in;
}

/* ==========================================================================
   NOTE FOR INTEGRATION
   This file is not yet linked from rocket-sequence.html (per scope — that
   file was intentionally left untouched). To activate it, add after the
   existing stylesheet links:
     <link rel="stylesheet" href="css/atlas-ui.css">
   ========================================================================== */