/* DeltaVerse — the periphery frame, in x · y · z.
 *
 * The head program of the frame (engine/ngn/periphery-menus.js installs this link and the
 * <meta name="dv-periphery">; the body program mounts the docks, the centre and the footer).
 *
 * DVPeriphery publishes every one of the nine stations on :root as
 *     --dv-x-<station>  --dv-y-<station>   css px, already perspective-divided
 *     --dv-z-<station>  the station's depth in frame units (0 = the origin, 1 = the outer rule)
 *     --dv-d-<station>  the depth FACTOR k(z)/k(1) — what the projection did to it
 * and each dock copies its own four onto itself as --sx --sy --sz --sd, so the DOM furniture stands
 * exactly where the motion pixels stand. A dock nearer the viewer (a corner, z = 1) is larger and
 * brighter than one further back (an edge mid, z = 0.7071) because the same k(z) scaled both.
 *
 * Zones are the classic document division: [data-zone="head" | "body" | "footer"].
 */

:root {
  --dv-frame-pad: 26px;
  --dv-periphery-ink: var(--dv-ink, #e6edf3);
  --dv-periphery-rule: var(--dv-violet, #8b5cf6);
  --dv-periphery-glow: var(--dv-cyan, #56ccf2);
}

/* ── the docks ─────────────────────────────────────────────────────────── */
.dv-em.dv-em-periphery {
  left: 0 !important; top: 0 !important; right: auto !important; bottom: auto !important;
  transform-style: preserve-3d;
  /* translate3d puts the dock at its projected station; the z axis is real, not decorative.
     The station is a POINT, and a dock is a box — so the box is aligned INTO the frame from that
     point rather than centred on it: a left dock hangs right of it, a right dock hangs left of it,
     a middle dock is centred. Centring everything put half of each corner dock off-screen. */
  transform:
    translate3d(var(--sx, 50%), var(--sy, 50%), calc(var(--sz, 0) * 40px))
    translate(var(--ax, -50%), var(--ay, -50%))
    scale(calc(0.86 + 0.14 * var(--sd, 1))) !important;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
  z-index: 9;
}
.dv-em-periphery[data-anchor$="left"]  { --ax: 0; }
.dv-em-periphery[data-anchor$="right"] { --ax: -100%; }
.dv-em-periphery[data-anchor^="top"]    { --ay: 0; }
.dv-em-periphery[data-anchor^="bottom"] { --ay: -100%; }
.dv-em-periphery[data-anchor="left"],
.dv-em-periphery[data-anchor="right"]  { --ay: -50%; }
.dv-em-periphery[data-anchor="top"]    { --ax: -50%; --ay: 0; }
.dv-em-periphery[data-anchor="bottom"] { --ax: -50%; --ay: -100%; }
@media (prefers-reduced-motion: reduce) { .dv-em.dv-em-periphery { transition: none; } }

/* corners pull their list inboard so it never runs off the frame */
.dv-em-periphery[data-anchor="top-left"],
.dv-em-periphery[data-anchor="left"],
.dv-em-periphery[data-anchor="bottom-left"] { text-align: left; }
.dv-em-periphery[data-anchor="top-right"],
.dv-em-periphery[data-anchor="right"],
.dv-em-periphery[data-anchor="bottom-right"] { text-align: right; }
.dv-em-periphery[data-anchor="top"],
.dv-em-periphery[data-anchor="bottom"] { text-align: center; }

/* The letter LEADS the handle: the aspect is its letter of DELTAVERSE, and the label is only what that
   letter opens. It brightens as the dock opens, which is the same signal the frame is drawing. */
.dv-em-periphery .dv-em-h[data-letter]::before {
  content: attr(data-letter) " \00b7 ";
  opacity: calc(.4 + .6 * var(--open, 0));
  color: var(--dv-gold, #ffd166);
  font-weight: 600;
}
.dv-em-periphery[data-zone="head"]   .dv-em-h { --cy: 86, 204, 242; }
.dv-em-periphery[data-zone="body"]   .dv-em-h { --cy: 210, 168, 255; }
.dv-em-periphery[data-zone="footer"] .dv-em-h { --cy: 255, 209, 102; }

/* an open dock lights its own place in the frame */
.dv-em-periphery::before {
  content: ''; position: absolute; inset: -10px -14px; pointer-events: none; border-radius: 12px;
  opacity: var(--open, 0);
  background: radial-gradient(closest-side, rgba(86, 204, 242, .13), transparent 78%);
  transition: opacity .42s ease;
}

/* ── the centre: station 8, letter S, the reference ────────────────────── */
/* The origin is a MARK until something returns to it. At rest only the glyph stands, quietly — the
   centre sits over whatever the page is showing, and a permanent readout there is furniture printed on
   top of the content. The name, the meta and the x·y·z appear when the frame is actually converging,
   which is the moment they mean something. */
.dv-periphery-centre {
  position: fixed; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0);
  z-index: 7; pointer-events: none; text-align: center;
  font-family: var(--dv-mono, ui-monospace, monospace);
  color: var(--dv-periphery-ink);
  opacity: .3; transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
}
.dv-periphery-centre .dv-pc-name,
.dv-periphery-centre .dv-pc-meta,
.dv-periphery-centre .dv-pc-xyz {
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity .4s ease, max-height .45s cubic-bezier(.2, .7, .2, 1);
}
.dv-periphery-centre.open .dv-pc-name,
.dv-periphery-centre.open .dv-pc-meta,
.dv-periphery-centre.open .dv-pc-xyz,
.dv-periphery-centre.full .dv-pc-name,
.dv-periphery-centre.full .dv-pc-meta,
.dv-periphery-centre.full .dv-pc-xyz { opacity: 1; max-height: 3.4em; }
.dv-periphery-centre.open { opacity: .92; }
.dv-periphery-centre.full { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.06); }
.dv-periphery-centre .dv-pc-glyph { font-size: 26px; color: var(--dv-gold, #ffd166); filter: drop-shadow(0 0 14px currentColor); }
.dv-periphery-centre .dv-pc-name  { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; margin-top: 6px; }
.dv-periphery-centre .dv-pc-meta  { font-size: 9.5px; color: var(--dv-ink-dim, #9aa4b2); margin-top: 3px; }
.dv-periphery-centre .dv-pc-xyz   { font-size: 9px; color: var(--dv-ink-faint, #6e7681); margin-top: 7px; letter-spacing: .08em; }

/* ── the footer: the tenth letter, the classic close ───────────────────── */
.dv-periphery-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; align-items: center; gap: 12px;
  padding: 5px calc(var(--dv-frame-pad) + 4px);
  font-family: var(--dv-mono, ui-monospace, monospace); font-size: 9.5px; letter-spacing: .12em;
  color: var(--dv-ink-faint, #6e7681);
  border-top: 1px solid color-mix(in srgb, var(--dv-periphery-rule) 22%, transparent);
  background: linear-gradient(to top, rgba(5, 8, 16, .72), transparent);
  pointer-events: none;
}
.dv-periphery-footer .dv-pf-letter {
  color: var(--dv-gold, #ffd166); font-size: 12px; font-weight: 600;
  text-shadow: 0 0 12px color-mix(in srgb, var(--dv-gold, #ffd166) 55%, transparent);
}
.dv-periphery-footer .dv-pf-text  { text-transform: uppercase; }
.dv-periphery-footer .dv-pf-count { margin-left: auto; color: var(--dv-periphery-glow); opacity: .7; }
.dv-periphery-footer[data-phase="converging"] .dv-pf-letter { color: var(--dv-periphery-glow); }
.dv-periphery-footer[data-phase="held"]       .dv-pf-letter { transform: scale(1.18); }

/* ── the frame canvas ──────────────────────────────────────────────────── */
#periphery, .dv-periphery-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 6; pointer-events: none;
}