/* ==========================================================================
 * NEON NULL v1.24.0 — Console FX: premium dashboard visuals.
 *
 * Isolated visual layer for the console dashboard. This file only ADDS to
 * the dashboard (dashboard.css / dashboard.js / boot.* are never touched):
 *   - #nn-skybox canvas layer (animated backgrounds, behind content)
 *   - holographic sheen + 3D tilt on .nn-dash-icon (transform-only)
 *   - .nn-fx-clock — real-time clock in the dashboard header
 *   - .nn-fx-picker — animated background selector
 *
 * Rules honored: no overlap (all new elements are in-flow or pinned to safe
 * corners), no disappearing text, press feedback (scale 0.93) preserved.
 * ========================================================================== */

/* ------------------------------------------------------------------ skybox */
/* v1.24.1: body-level layer behind ALL console chrome (powerscreen, boot
 * screen, dashboard at z-index 9000; power/reset buttons at 9500). */
#nn-skybox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 8999;
  pointer-events: none;    /* never intercepts taps/clicks */
  display: block;
}

/* Exempt the skybox from boot.css's body.nn-console-off blanket hide.
 * (1,1,2) beats boot.css's (1,1,1); excluded for minimal-bg so the
 * purists' pure-black mode stays pure. */
body.nn-console-off:not(.nn-bg-minimal) > canvas#nn-skybox {
  display: block !important;
}

/* v1.24.1: the nebula IS the console backdrop — power, boot, and dashboard
 * surfaces go transparent so it shows through. Later stylesheet wins the
 * (1,0,0) tie with boot.css / dashboard.css. */
#nn-powerscreen { background: transparent; }
#nn-boot { background: transparent; }
#nn-dashboard { background: transparent; }

/* Minimal background: no canvas (JS hides it too); vignette for purists. */
body.nn-bg-minimal #nn-dashboard::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(115% 115% at 50% 50%,
    rgba(0, 0, 0, 0) 52%,
    rgba(0, 0, 0, 0.62) 100%);
}

/* Cinematic vignette over the animated skyboxes — depth without cost
   (static gradient, paints once). */
body.nn-bg-nebula #nn-dashboard::after,
body.nn-bg-grid #nn-dashboard::after,
body.nn-bg-waves #nn-dashboard::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(120% 120% at 50% 45%,
    rgba(0, 0, 0, 0) 55%,
    rgba(1, 2, 10, 0.55) 100%);
}

/* ------------------------------------------------------------------ holographic icons */
.nn-dash-icon {
  overflow: hidden; /* clip the holographic sheen to the rounded card */
}

/* Diagonal holographic sweep — opacity only, fades in on hover/focus. */
.nn-dash-icon::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg,
    rgba(0, 0, 0, 0) 28%,
    rgba(34, 211, 238, 0.18) 42%,
    rgba(217, 70, 239, 0.26) 50%,
    rgba(103, 232, 249, 0.18) 58%,
    rgba(0, 0, 0, 0) 72%);
  background-size: 260% 260%;
  background-position: 115% 0;
  opacity: 0;
  transition: opacity 260ms ease-out, background-position 650ms ease-out;
}

.nn-dash-icon:hover::after,
.nn-dash-icon:focus-visible::after {
  opacity: 1;
  background-position: -15% 0;
}

/* Ambient holographic drift — a slow light sweep that keeps the console
   alive on touch devices (no hover). Subtle by design; transform/opacity
   keyframes only, and fully disabled under prefers-reduced-motion. */
.nn-dash-icon::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg,
    rgba(0, 0, 0, 0) 30%,
    rgba(103, 232, 249, 0.16) 46%,
    rgba(217, 70, 239, 0.22) 54%,
    rgba(0, 0, 0, 0) 70%);
  background-size: 280% 280%;
  background-position: 120% 0;
  opacity: 0;
  animation: nnHoloDrift 9s ease-in-out infinite;
}

/* Stagger the sweep so cards shimmer in sequence, not in lockstep. */
.nn-dash-icon:nth-child(2n)::before { animation-delay: -3s; }
.nn-dash-icon:nth-child(3n)::before { animation-delay: -6s; }

@keyframes nnHoloDrift {
  0%, 100% { background-position: 120% 0; opacity: 0; }
  14% { opacity: 0.55; }
  46% { background-position: -20% 0; opacity: 0.55; }
  62%, 100% { opacity: 0; }
}

/* Extra depth on hover: layered glow + inner light. */
.nn-dash-icon:hover {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6),
              0 0 26px rgba(34, 211, 238, 0.30),
              0 0 52px rgba(217, 70, 239, 0.14),
              inset 0 1px 0 rgba(255, 255, 255, 0.10),
              inset 0 0 24px rgba(34, 211, 238, 0.10);
}

/* Subtle 3D tilt — desktop pointers only, transform-only (no layout shift).
   Kept tiny (<=5deg) so the card never reads as broken on trackpads. */
@media (hover: hover) and (pointer: fine) {
  .nn-dash-icon:hover {
    transform: perspective(700px) rotateX(4deg) rotateY(-4deg) translateY(-3px);
  }
}

/* Press feedback is sacred: scale 0.93 always wins over hover tilt. */
.nn-dash-icon:active,
.nn-dash-icon.nn-pressed {
  transform: scale(0.93);
  opacity: 0.88;
}

/* ------------------------------------------------------------------ clock */
.nn-fx-clock {
  margin: 12px 0 0;
  text-align: center;
  font-family: 'Montserrat', system-ui, sans-serif;
  color: #67e8f9;
  user-select: none;
  -webkit-user-select: none;
}

.nn-fx-time {
  font-family: 'Orbitron', 'Montserrat', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-indent: 0.34em; /* recenter the tracked text */
  text-shadow: 0 0 12px rgba(34, 211, 238, 0.75),
               0 0 40px rgba(34, 211, 238, 0.30);
  white-space: nowrap;
}

.nn-fx-date {
  margin: 5px 0 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.30em;
  text-indent: 0.30em;
  color: rgba(205, 238, 255, 0.62);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ background picker */
.nn-fx-picker {
  margin: 14px 0 0;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.nn-fx-picker-label {
  flex: 1 1 100%;
  margin: 0 0 2px;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: rgba(205, 238, 255, 0.42);
}

.nn-fx-picker button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 7px 14px 7px 8px;
  border-radius: 999px;
  border: 1px solid rgba(34, 211, 238, 0.28);
  background: rgba(8, 14, 26, 0.88);
  color: rgba(205, 238, 255, 0.68);
  cursor: pointer;
  transition: transform 120ms ease-out, background 160ms ease-out,
              border-color 160ms ease-out, color 160ms ease-out,
              box-shadow 160ms ease-out;
  -webkit-tap-highlight-color: transparent;
}

.nn-fx-thumb {
  display: inline-flex;
  width: 30px;
  height: 20px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(34, 211, 238, 0.18);
}

.nn-fx-thumb svg {
  display: block;
  width: 100%;
  height: 100%;
}

.nn-fx-blabel { text-indent: 0; }

.nn-fx-picker button:hover {
  border-color: rgba(34, 211, 238, 0.6);
  color: #eafcff;
}

.nn-fx-picker button[aria-pressed="true"] {
  border-color: rgba(34, 211, 238, 0.85);
  background: rgba(34, 211, 238, 0.14);
  color: #eafcff;
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.30),
              inset 0 0 10px rgba(34, 211, 238, 0.12);
  text-shadow: 0 0 8px rgba(34, 211, 238, 0.6);
}

.nn-fx-picker button:active { transform: scale(0.93); }

.nn-fx-picker button:focus-visible {
  outline: 2px solid #22d3ee;
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  /* No loops, no sweeps — the skybox keeps its single pre-rendered frame. */
  .nn-dash-icon::after { display: none; }
  .nn-dash-icon::before { display: none; }
  .nn-dash-icon:hover { transform: none; }
}