/* ============================================================
   Hermes Logios — FX engine supporting styles (fx.css)
   ------------------------------------------------------------
   Effect-only styles for net-bg.js / scramble.js / polish.js.
   site.css owns the palette; here we only reference its tokens
   (cyan #51DCFB / #51dcfb) and define effect scaffolding.

   LOAD ORDER: load AFTER site.css.
   ============================================================ */

/* ---------- network background layer ---------- */
#hl-net-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Readability scrim — sits ABOVE #hl-net-bg (-1) but BELOW content
   (default z 0). Keeps the cyan net subtly visible while text stays
   crisp: lighter at the top hero, denser toward the body. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1; /* same stacking context as #hl-net-bg; later in DOM = on top */
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(16, 16, 16, 0.35),
      rgba(16, 16, 16, 0.82) 70%
    );
}

/* ---------- reveal (data-reveal) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---------- scramble decode ---------- */
[data-scramble] {
  /* avoid layout jitter while characters resolve */
  word-break: break-word;
}
.hl-scramble-live {
  color: #51dcfb;
  transition: color 0.45s ease 0.1s;
}
.hl-scramble-done {
  /* hand control back to the element's own color */
  color: inherit;
}

/* ---------- copy button states ---------- */
[data-copy] {
  position: relative;
  cursor: pointer;
}
[data-copy] .hl-copy-label-copied {
  display: none;
}
[data-copy].is-copied {
  color: #51dcfb;
  border-color: #51dcfb;
}
[data-copy].is-copied .hl-copy-label-default {
  display: none;
}
[data-copy].is-copied .hl-copy-label-copied {
  display: inline;
}
/* generic "Copied" pip for buttons without explicit label spans */
[data-copy]::after {
  content: "Copied";
  position: absolute;
  top: -1.6em;
  right: 0;
  padding: 2px 7px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #101010;
  background: #51dcfb;
  border-radius: 4px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
  white-space: nowrap;
}
[data-copy].is-copied::after {
  opacity: 1;
  transform: translateY(0);
}
/* suppress the generic pip when the button supplies its own labels */
[data-copy]:has(.hl-copy-label-copied)::after {
  content: none;
}

/* ---------- scroll-hint chevron ---------- */
#hl-scroll-hint {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 40;
  color: #51dcfb;
  opacity: 0.7;
  pointer-events: none;
  animation: hl-scroll-bob 1.8s ease-in-out infinite;
  transition: opacity 0.5s ease;
  filter: drop-shadow(0 0 6px rgba(81, 220, 251, 0.45));
}
#hl-scroll-hint.is-hidden {
  opacity: 0;
}
@keyframes hl-scroll-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hl-scramble-live {
    color: inherit;
    transition: none;
  }
  #hl-scroll-hint {
    animation: none;
    display: none;
  }
  [data-copy]::after,
  [data-copy].is-copied::after {
    transition: none;
  }
}