/*
 * Dhangaa Torbanii — NETWORK NAVIGATION (Wave 8)
 * The mobile application shell's edge: one floating node that blooms a
 * spatial arc of destinations — networked, motion-aware, minimal.
 * Media-aware: it rises above the listening dock and carries a
 * now-playing / return-to-media node; opening it NEVER touches the
 * media engine (pure overlay DOM, playback continues). Desktop keeps
 * the header nav; no-JS visitors keep the header dropdown.
 */

.dhangaa-nav {
  --dn-accent: #8ac8a0;
  --dn-warm: #e08585;
  --dn-glass: rgba(6, 17, 12, 0.92);
  --dn-ease: cubic-bezier(0.22, 1.15, 0.32, 1);
  position: fixed;
  inset: 0;
  z-index: 96;
  pointer-events: none;
  font: 600 13px/1.3 ui-sans-serif, system-ui, sans-serif;
}
html:not(.dnav) .dhangaa-nav { display: none; }
/* WAVE 13 — THE NETWORK NAV IS THE DEVICE-SPANNING SHELL: the bloom lives
 * on desktop too (owner direction — the PC deserved its own innovative
 * nav, not the generic header). Fine pointers get the larger composition;
 * the header stays for brand + top links; the burger still retires only
 * on coarse pointers where the bloom replaces it. */
html.dnav .dhangaa-nav { display: block; }
@media (min-width: 768px) {
  html.dnav-desktop .dn-node { width: 58px; height: 58px; }
  html.dnav-desktop .dn-node svg { width: 26px; height: 26px; }
}
/* the burger dropdown retires once the network node is alive (mobile only) */
@media (max-width: 767px) {
  html.dnav [data-nav-toggle] { display: none !important; }
  html.dnav #mobile-nav { display: none !important; }
}

/* ---------- the node (FAB) ---------- */
.dn-node {
  position: fixed;
  right: calc(14px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #dff2e6;
  background: linear-gradient(160deg, rgba(10, 26, 19, 0.94), rgba(6, 14, 10, 0.96));
  border: 1px solid rgba(138, 200, 160, 0.5);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 18px rgba(138, 200, 160, 0.08);
  cursor: pointer;
  pointer-events: auto;
  z-index: 99;
  transition: bottom 0.3s var(--dn-ease), transform 0.18s ease, border-color 0.2s ease;
}
.dn-node:active { transform: scale(0.93); }
.dn-node svg { width: 24px; height: 24px; }
.dn-node .dn-icon-close { display: none; }
.dhangaa-nav.is-open .dn-node .dn-icon-net { display: none; }
.dhangaa-nav.is-open .dn-node .dn-icon-close { display: block; }
.dhangaa-nav.is-open .dn-node { border-color: rgba(224, 133, 133, 0.55); }
/* quiet breathing ring — the network is alive, the way the archive is */
.dn-node::before {
  content: '';
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(138, 200, 160, 0.4);
  opacity: 0;
  animation: dn-breathe 3.2s ease-out infinite;
  animation-delay: 1.2s;
  pointer-events: none;
}
.dhangaa-nav.is-open .dn-node::before { animation: none; opacity: 0; }
@keyframes dn-breathe {
  0% { transform: scale(0.86); opacity: 0; }
  55% { opacity: 0.55; }
  100% { transform: scale(1.28); opacity: 0; }
}
/* media-aware: the node rises above the listening dock */
body.has-dock .dn-node {
  bottom: calc(var(--dock-plate-h, 65px) + 41px + env(safe-area-inset-bottom, 0px));
}

/* ---------- scrim ---------- */
.dn-scrim {
  position: fixed; inset: 0;
  background:
    radial-gradient(120% 90% at 100% 100%, rgba(3, 10, 7, 0.88) 0%, rgba(3, 10, 7, 0.55) 45%, rgba(3, 8, 6, 0.28) 100%);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
  z-index: 96;
}
.dhangaa-nav.is-open .dn-scrim { opacity: 1; pointer-events: auto; }

/* ---------- connection lines ---------- */
.dn-lines {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 97;
}
.dn-lines line {
  stroke: rgba(138, 200, 160, 0.4);
  stroke-width: 1;
  transition: stroke-dashoffset 0.4s var(--dn-ease);
}

/* ---------- the bloom ---------- */
.dn-bloom { position: fixed; inset: 0; pointer-events: none; z-index: 98; }
/* THE CAPSULE (Wave 10, owner direction): the label sits to the LEFT of
 * the icon INSIDE the capsule's own border — row-reverse turns the
 * DOM's glyph-first order into [label · icon]. Nothing external can
 * collide; the whole composition scales with --dn-scale (set by the
 * layout pass from the viewport — narrow phones shrink, wide grow). */
.dn-item {
  --dn-caph: calc(44px * var(--dn-scale, 1));
  --dn-capfs: calc(11.5px * var(--dn-scale, 1));
  position: absolute;
  left: 0; top: 0;
  height: var(--dn-caph);
  max-width: calc(200px * var(--dn-scale, 1));
  padding: 0 calc(13px * var(--dn-scale, 1)) 0 calc(14px * var(--dn-scale, 1));
  border-radius: 999px;
  display: inline-flex;
  flex-direction: row-reverse;       /* visual order: [label][icon] */
  align-items: center;
  justify-content: flex-end;
  gap: calc(9px * var(--dn-scale, 1));
  color: #dff2e6;
  background: var(--dn-glass);
  border: 1px solid rgba(138, 200, 160, 0.42);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  transform: translate(0, 0) scale(0.4);
  transform-origin: 100% 50%;
  transition:
    transform 0.34s var(--dn-ease),
    opacity 0.24s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.22s ease;
  transition-delay: calc(var(--dn-i, 0) * 26ms);
  -webkit-tap-highlight-color: transparent;
}
.dn-item:focus-visible { outline: 2px solid var(--dn-accent); outline-offset: 3px; }
.dhangaa-nav.is-open .dn-item {
  opacity: 1;
  transform: translate(var(--dn-tx, 0), var(--dn-ty, 0)) scale(1);
  pointer-events: auto;
}
.dn-item:active { transform: translate(var(--dn-tx, 0), var(--dn-ty, 0)) scale(0.93); }
.dn-item .dn-glyph {
  display: grid; place-items: center;
  flex: none;
  width: calc(20px * var(--dn-scale, 1)); height: calc(20px * var(--dn-scale, 1));
}
.dn-item .dn-glyph svg { width: 100%; height: 100%; display: block; }
/* the label — VISIBLE, left of the icon, inside the border */
.dn-item .dn-label {
  order: 2;                          /* row-reverse → renders first (left) */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--dn-capfs);
  font-weight: 650;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: rgba(226, 242, 232, 0.96);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  transition: color 0.18s ease;
}
.dn-item:hover, .dn-item:focus-visible {
  background: rgba(138, 200, 160, 0.14);
  border-color: rgba(138, 200, 160, 0.65);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(138, 200, 160, 0.12), inset 0 0 20px rgba(138, 200, 160, 0.06);
}
.dn-item:hover .dn-label, .dn-item:focus-visible .dn-label { color: #fff; }
/* WAVE 11 MOTION — the living network (fine pointers):
 * a pointer-tracked sheen sweeps each capsule; the icon leans into the
 * hover; every gesture answers with motion. Reduced-motion keeps the
 * states, loses the travel. */
@media (hover: hover) {
  .dn-item::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background: radial-gradient(60px 60px at var(--sx, 30%) 50%, rgba(190, 235, 208, 0.14), transparent 70%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .dn-item:hover::before, .dn-item:focus-visible::before { opacity: 1; }
  .dn-item .dn-glyph { transition: transform 0.22s cubic-bezier(0.22, 1.15, 0.32, 1); }
  .dn-item:hover .dn-glyph { transform: scale(1.14) rotate(-4deg); }
  .dn-item:active .dn-glyph { transform: scale(0.94); }
}
/* connection lines flow while the network is open — data in motion */
.dn-lines.is-flow line {
  stroke-dasharray: 3 9;
  animation: dn-flow 3s linear infinite;
}
@keyframes dn-flow { to { stroke-dashoffset: -120; } }
@media (prefers-reduced-motion: reduce) {
  .dn-lines.is-flow line { animation: none; }
}
/* the node leans toward proximity (fine pointers) */
@media (hover: hover) {
  .dn-node { transition: bottom 0.3s var(--dn-ease), transform 0.24s cubic-bezier(0.22, 1.15, 0.32, 1), border-color 0.2s ease, box-shadow 0.24s ease; }
  .dn-node.is-near {
    transform: scale(1.08);
    border-color: rgba(138, 200, 160, 0.8);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 24px rgba(138, 200, 160, 0.18), inset 0 0 18px rgba(138, 200, 160, 0.08);
  }
  @media (prefers-reduced-motion: reduce) { .dn-node.is-near { transform: none; } }
}
.dn-item.is-small { --dn-caph: calc(40px * var(--dn-scale, 1)); --dn-capfs: calc(10.5px * var(--dn-scale, 1)); }
.dn-item.is-small .dn-glyph { width: calc(17px * var(--dn-scale, 1)); height: calc(17px * var(--dn-scale, 1)); }
/* the language node renders its label INSIDE (it is the label) */
.dn-item.is-lang {
  flex-direction: row;
  justify-content: center;
  width: auto; min-width: calc(56px * var(--dn-scale, 1));
  height: var(--dn-caph);
  padding: 0 calc(12px * var(--dn-scale, 1));
}
.dn-item.is-lang button {
  background: none; border: 0; color: inherit;
  font-size: var(--dn-capfs); font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; padding: 6px 2px;
}
.dn-item.is-lang .dn-label { display: none; }

/* the now-playing node: equalizer bars + live title */
.dn-item.is-media {
  border-color: rgba(224, 133, 133, 0.55);
  background: linear-gradient(160deg, rgba(24, 12, 12, 0.94), rgba(10, 6, 6, 0.96));
}
.dn-eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; }
.dn-eq i {
  width: 3px; border-radius: 2px;
  background: var(--dn-warm);
  animation: dn-eq 0.9s ease-in-out infinite;
}
.dn-eq i:nth-child(1) { height: 60%; animation-delay: -0.3s; }
.dn-eq i:nth-child(2) { height: 100%; animation-delay: -0.15s; }
.dn-eq i:nth-child(3) { height: 45%; }
@keyframes dn-eq { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1); } }
.dn-item.is-media .dn-label {
  font-size: 9px; max-width: 120px; overflow: hidden; text-overflow: ellipsis;
  color: rgba(255, 224, 200, 0.9);
}

/* ---------- reduced motion: presence, not travel ---------- */
@media (prefers-reduced-motion: reduce) {
  .dn-node { transition: none; }
  .dn-node::before { animation: none; }
  .dn-item { transition: opacity 0.18s ease; }
  .dn-item:active { transform: translate(var(--dn-tx, 0), var(--dn-ty, 0)) scale(1); }
  .dn-eq i { animation: none; }
  .dn-lines line { transition: none; }
}

/* ---------- THE NOW PLAYING COMPOSITION (Wave 9.4) ----------
 * FULL-WIDTH MEDIA: the video surface spans the card; title, honest
 * state and transport live in ONE media bar beneath it. The network
 * composes below. One sectioned command center. */
.dn-media {
  position: fixed;
  z-index: 98;
  top: calc(env(safe-area-inset-top, 0px) + 66px);
  left: 10px;
  right: 10px;
  width: auto;
  display: flex; flex-direction: column; gap: 0;
  border-radius: 16px;
  background: rgba(8, 16, 12, 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(224, 133, 133, 0.38);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.65), inset 0 0 34px rgba(138, 200, 160, 0.05);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-14px) scale(0.98);
  transition: opacity 0.26s ease, transform 0.3s var(--dn-ease);
}
.dn-media[hidden] { display: none; }
.dhangaa-nav.is-open .dn-media { opacity: 1; pointer-events: auto; transform: none; }
/* the live plate docks into this FULL-WIDTH surface */
.dn-media-slot {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  flex: none;
  background: #000; cursor: pointer;
  position: relative;
}
.dn-media-slot::after {
  /* the archive's corner-anchor signal language (one grammar with the
     extraction projection and the dock plate) */
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 10px 10px, rgba(138,200,160,.9) 0 2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 10px) 10px, rgba(138,200,160,.9) 0 2px, transparent 2.5px),
    radial-gradient(circle at 10px calc(100% - 10px), rgba(138,200,160,.9) 0 2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), rgba(138,200,160,.9) 0 2px, transparent 2.5px);
  opacity: .5;
}
.dhangaa-nav.is-open .dn-media:not(.is-paused) .dn-media-slot::after { animation: dn-corner-breathe 1.8s ease-in-out infinite; }
@keyframes dn-corner-breathe { 0%,100% { opacity: .35; } 50% { opacity: .85; } }
/* THE MEDIA BAR: title + state + time left, transport right */
.dn-media-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  min-width: 0;
}
.dn-media-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dn-media-info b { font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-align: start; min-width: 0; }
.dn-media-info b.is-kinetic { overflow: hidden; }
.dn-media-info b.is-kinetic .k-a, .dn-media-info b.is-kinetic .k-b { display: inline-block; padding-right: 22px; }
.dn-media-info b.is-kinetic .k-a { animation: dn-k-glide var(--k-dur, 10s) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; }
@keyframes dn-k-glide {
  0% { transform: translateX(0); }
  14% { transform: translateX(0); }
  86% { transform: translateX(-100%); }
  100% { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) { .dn-media-info b.is-kinetic .k-a { animation: none; } }
.dn-media-info i { font-style: normal; font-size: 10px; opacity: 0.75; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 5px; }
.dn-media-info i::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--dn-warm, #e08585);
  box-shadow: 0 0 8px rgba(224, 133, 133, 0.8);
  animation: dn-np-pulse 1.6s ease-in-out infinite;
}
.dn-media.is-paused .dn-media-info i::before { animation: none; opacity: .45; box-shadow: none; }
@keyframes dn-np-pulse { 0%, 100% { transform: scale(0.8); opacity: 0.6; } 50% { transform: scale(1.15); opacity: 1; } }
.dn-media-rail { position: relative; height: 4px; border-radius: 4px; background: rgba(138, 200, 160, 0.2); overflow: visible; }
.dn-media-rail i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 4px; background: linear-gradient(90deg, #8ac8a0, #e08585); box-shadow: 0 0 8px rgba(224, 133, 133, 0.4); }
.dn-media-ctrl { display: flex; align-items: center; gap: 7px; flex: none; }
.dn-media-ctrl button {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(138, 200, 160, 0.45);
  background: rgba(138, 200, 160, 0.12); color: #dff2e6;
  cursor: pointer;
}
.dn-media-ctrl button[data-dn-toggle] { background: rgba(224, 133, 133, 0.2); border-color: rgba(224, 133, 133, 0.5); }
.dn-media-ctrl button[data-dn-mute].is-muted { border-color: rgba(255, 214, 140, 0.65); color: #ffe0a8; background: rgba(255, 214, 140, 0.1); }
.dn-media-ctrl button:active { transform: scale(0.93); }
.dn-media-ctrl button svg { width: 15px; height: 15px; }

/* bigger, surer thumbs on small phones (Wave 9 touch-target pass) —
 * Wave 10: the capsule system scales via --dn-scale; only touch-target
 * insurance remains here */
@media (max-width: 400px) {
  .dn-media-ctrl button { width: 42px; height: 42px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  /* the fan needs vertical airspace in landscape: cap the media surface */
  .dn-media-slot { aspect-ratio: auto; height: 34vh; }
}
@media (prefers-reduced-motion: reduce) {
  .dn-media { transition: opacity 0.18s ease; }
}

/* DESKTOP COMPOSITION (Wave 13): the command center composes beside the
 * node — a premium 560px instrument, not a full-bleed slab; the archive
 * map aligns under it. */
@media (min-width: 768px) {
  .dn-media { left: auto; right: 12px; width: min(calc(100vw - 24px), 560px); }
  .dn-map { left: auto; right: 12px; width: min(calc(100vw - 24px), 560px); }
}

/* lines dissolve with the menu — never residue over the arriving page */
.dn-lines { transition: opacity 0.32s ease; }

/* ---------- THE ARCHIVE MAP (Wave 9.4) ----------
 * While a session lives, the command center carries the archive WINDOW:
 * the 12 visible records as a signal strip — where you are in the archive,
 * the playing record pulsing. Tap a tick to play that dialogue. */
.dn-map {
  position: fixed;
  z-index: 98;
  left: 14px; right: 14px;
  display: flex; align-items: center; gap: 5px;
  padding: 7px 10px;
  border-radius: 12px;
  background: rgba(8, 16, 12, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(138, 200, 160, 0.2);
  opacity: 0; pointer-events: none;
  transition: opacity 0.26s ease;
}
.dn-map[hidden] { display: none; }
.dhangaa-nav.is-open .dn-map:not([hidden]) { opacity: 1; pointer-events: auto; }
.dn-map-label {
  font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(163, 212, 178, 0.75); flex: none; margin-right: 4px;
}
.dn-map-ticks { flex: 1; display: flex; align-items: center; gap: 4px; min-width: 0; }
.dn-map button {
  flex: 1; min-width: 0; height: 18px; padding: 0;
  border: 0; border-radius: 3px;
  background: rgba(138, 200, 160, 0.18);
  cursor: pointer; position: relative;
  transition: background 0.18s ease, transform 0.18s ease;
}
.dn-map button:hover { background: rgba(138, 200, 160, 0.34); }
.dn-map button:active { transform: scaleY(1.5); }
.dn-map button.is-live {
  background: linear-gradient(180deg, #e08585, #b85f5f);
  box-shadow: 0 0 10px rgba(224, 133, 133, 0.6);
  animation: dn-map-live 1.7s ease-in-out infinite;
}
@keyframes dn-map-live { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.45); } }
@media (prefers-reduced-motion: reduce) {
  .dn-map button.is-live { animation: none; }
  .dn-corner-breathe, .dn-media-slot::after { animation: none !important; }
}