/* ==========================================================================
   REDESIGN SYSTEM: PURPLE LIGHTING, REVERTED OUTLINES & STATIC VIEW CONTROL
   ========================================================================== */

:root {
  --screen: #ff9ebb;
  --tv-edge: rgba(255, 158, 187, 0.25);
}

/* --------------------------------------------------------------------------
   1. LOADING / TRAINING SCREEN HINT
   -------------------------------------------------------------------------- */
.boot-hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: .03em;
  margin: -10px 0 0;
  padding-left: 1.4em;
}

.boot-hint strong {
  color: var(--text);
  font-weight: 400;
}

@media (width<=480px) {
  .boot-hint {
    font-size: 11px;
    padding-left: 1.2em;
  }
}

/* --------------------------------------------------------------------------
   2. STATIC VERSION BUTTON (bottom-right, flush with the main nav's baseline)
   Desktop: same bottom offset (16px) and same height as .index, on the right.
   Narrow screens, where the centred nav would collide with it: stays on the
   right, sitting just above the nav.
   -------------------------------------------------------------------------- */
.static-view-container {
  position: fixed;
  right: 16px;
  left: auto;
  bottom: 16px;              /* identical to .index { bottom: 16px } */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  z-index: 6;
  background: var(--scan), var(--tv-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid var(--tv-edge);
  border-radius: var(--tv-radius);
  box-shadow: var(--tv-glow);
  padding: 5px;
  transition: opacity .6s ease-out, transform .6s cubic-bezier(.2,.7,.2,1);
}

@media (701px <= width <= 859px) {
  .static-view-container { bottom: 73px; }
}

body.opening .static-view-container {
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px);
}

.static-view-btn {
  display: flex;
  align-items: baseline;
  gap: 6px;
  background: transparent;
  border: 0;
  border-radius: calc(var(--tv-radius) - 4px);
  padding: 9px 15px;
  color: #d9cdd0;
  font: 12px "Space Mono", ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .3s, background-color .3s;
}

.static-view-btn:hover {
  background: #ff9ebb14;
  color: #fff;
}

.static-view-btn:focus-visible {
  outline: 2px solid #ff9ebb;
  outline-offset: 2px;
}

@media (width<=700px) {
  .static-view-container {
    right: 12px;
    left: auto;
    bottom: 88px;
    border-radius: 16px;
  }

  .static-view-btn {
    border-radius: 11px;
    padding: 9px 12px;
    font-size: 9.5px;
  }

  /* Keep the original drag hint clear of the static control above the nav. */
  .drag-hint {
    bottom: 166px;
  }
}

/* --------------------------------------------------------------------------
   3. STATIC MODE HEADER (Return to 3D Room)
   -------------------------------------------------------------------------- */
.static-return-bar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(15, 18, 32, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 158, 187, 0.25);
  padding: 10px 24px;
}

.static-return-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.static-badge {
  font-family: "Space Mono", monospace;
  font-size: 12px;
  color: #b9b2c4;
  letter-spacing: 0.05em;
}

.static-return-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ff9ebb;
  color: #0f1220;
  border: none;
  border-radius: 18px;
  padding: 6px 16px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.static-return-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255, 158, 187, 0.5);
}

/* --------------------------------------------------------------------------
   4. TAGLINE: "I turn complex ideas into functional code."
   Longer than the old line, so let it wrap evenly instead of leaving one
   word on its own. Same font, size, colour and caret as before.
   -------------------------------------------------------------------------- */
.hero-line {
  max-width: 40ch;
  text-wrap: balance;
}

/* CV / resume buttons are placeholders until the new file is uploaded. */
a.cv[aria-disabled="true"] {
  cursor: default;
}

/* --------------------------------------------------------------------------
   5. VOLUME DROPDOWN (same surface, edge, glow, radius and type as nav.index)
   -------------------------------------------------------------------------- */
.sound-menu {
  position: fixed;
  top: 66px;
  right: 16px;
  z-index: 7;
  box-sizing: border-box;
  width: 232px;
  max-width: calc(100vw - 32px);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--scan), var(--tv-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid var(--tv-edge);
  border-radius: var(--tv-radius);
  box-shadow: var(--tv-glow);
  color: #d9cdd0;
  font: 12px "Space Mono", ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform-origin: top right;
  animation: sm-in .22s cubic-bezier(.2, .7, .2, 1);
}

.sound-menu[hidden] { display: none; }

@keyframes sm-in {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to { opacity: 1; transform: none; }
}

body.opening .sound-menu,
html.flat .sound-menu { display: none !important; }

.sound-menu .sm-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.sound-menu .sm-head output { color: var(--screen); }

.sound-menu .sm-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sound-menu button {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: #d9cdd0;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color .3s, background-color .3s;
}

.sound-menu .sm-mute {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: calc(var(--tv-radius) - 4px);
}

.sound-menu .sm-mute:hover,
.sound-menu .sm-presets button:hover { background: #ff9ebb14; color: #fff; }

.sound-menu .sm-mute .wx { display: none; }
.sound-menu[data-muted] .sm-mute .wx { display: block; }
.sound-menu[data-muted] .sm-mute .w1,
.sound-menu[data-muted] .sm-mute .w2 { display: none; }

.sound-menu .sm-range {
  --fill: 20%;
  flex: 1;
  min-width: 0;
  height: 18px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.sound-menu .sm-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--screen) var(--fill), #ffffff1f var(--fill));
}

.sound-menu .sm-range::-moz-range-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--screen) var(--fill), #ffffff1f var(--fill));
}

.sound-menu .sm-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  background: #ffb3cb;
  box-shadow: 0 0 10px #ff9ebb80;
}

.sound-menu .sm-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: #ffb3cb;
  box-shadow: 0 0 10px #ff9ebb80;
}

.sound-menu .sm-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: calc(var(--tv-radius) - 2px);
  background: #ffffff08;
}

.sound-menu .sm-presets button {
  padding: 8px 0;
  border-radius: calc(var(--tv-radius) - 5px);
}

.sound-menu .sm-presets button[aria-pressed="true"] {
  background: linear-gradient(180deg, #ffb3cb, var(--screen));
  color: var(--screen-ink);
  box-shadow: 0 0 14px #ff9ebb59;
}

.sound-menu button:focus-visible,
.sound-menu .sm-range:focus-visible {
  outline: 2px solid #ff9ebb;
  outline-offset: 2px;
}

.sound[aria-expanded="true"] { background: #ff9ebb14; }

@media (width<=700px) {
  .sound-menu { top: 64px; right: 12px; }
}