/* ==========================================================================
   DOCUMENT VOLUME (.volume) — hero of /soluciones/inteligencia-documental
   "Del volumen a lo esencial": documents → gates (Analiza · Clasifica ·
   Compara · Valida) + IA Nexoss → results. Many particles go in, few
   results come out.

   Markup: figure.page-hero__media--volume > .volume[data-doc-volume] >
   svg.volume__svg + .volume__head × 3 + ul.volume__list--in + p.volume__core
   + ol.volume__verbs + ul.volume__list--out.
   js/modules/doc-volume.js positions every node, head, verb and the core
   (--x / --y, in px), sets the height, draws the connectors and animates.
   Wide ≥ 520 px (and ≥ 52 rem): horizontal; otherwise vertical (.is-narrow).

   Results: Hallazgos ◆, Brechas ◧ and Alertas ▲ are the protagonists
   (display type, yellow marker with glow, yellow connectors); Dosieres and
   Matrices are the generated documents (square marker, white).
   Reduced motion: the script shows the complete static diagram at once.
   ========================================================================== */

.page-hero__media--volume {
  margin-right: 0;
}

/* Needs the script to lay itself out */
.no-js .page-hero__media--volume {
  display: none;
}

.volume {
  --core: 72px;
  position: relative;
  height: 38rem;
}

.volume__svg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* ---- Group heads ------------------------------------------------------------ */
.volume__head {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  color: var(--ink-400);
  white-space: nowrap;
  opacity: 0;
  transform: translate(var(--x, 0), var(--y, 0)) translateY(-50%);
  transition: opacity .8s var(--ease-out-quad) .2s;
}

.volume__head--det {
  color: var(--yellow-500);
}

/* ---- Nodes -------------------------------------------------------------------- */
.volume__node {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transform: translate(var(--x, 0), var(--y, 0));
  transition: opacity .7s var(--ease-out-quad);
}

.volume__list--out .volume__node {
  transition-delay: .6s;
}

.volume__dot {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 12px;
  height: 12px;
  border: 1px solid var(--ink-400);
  border-radius: 50%;
  background: var(--ink-950);
  transition: background-color .35s, border-color .35s, box-shadow .35s;
}

/* Pulse ring */
.volume__dot::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid var(--yellow-500);
  border-radius: 50%;
  opacity: 0;
}

.volume__label {
  position: absolute;
  top: 0;
  padding: 2px 5px;
  border-radius: var(--radius-xs);
  background: rgba(11, 13, 16, .78); /* keeps the lines behind it readable */
  color: var(--ink-300);
  font-size: max(1.4rem, 12.5px);
  font-weight: var(--fw-book);
  line-height: 1.2;
  white-space: nowrap;
  transform: translateY(-50%);
  transition: color .35s;
}

.volume__node[data-side="left"] .volume__label {
  right: 9px;
  text-align: right;
}

.volume__node[data-side="right"] .volume__label {
  left: 9px;
}

/* Criteria (normas, requisitos): yellow ring */
.volume__node--crit .volume__dot {
  border-color: var(--yellow-500);
  background: radial-gradient(circle, var(--yellow-500) 0 2px, var(--ink-950) 2.5px);
}

/* Generated documents: square marker */
.volume__node--gen .volume__dot {
  border-color: var(--ink-300);
  border-radius: 2px;
}

.volume__node--gen .volume__label {
  color: var(--white);
}

/* Detections: the protagonists */
.volume__node--det .volume__label {
  color: var(--white);
  font-family: var(--font-display);
  font-size: max(2.4rem, 19px);
  font-stretch: 88%;
  font-weight: 620;
  letter-spacing: -.02em;
  line-height: 1.05;
  transform: translateY(-30%);
}

.volume.is-narrow .volume__node--det .volume__label {
  font-size: 20px;
}

.volume__sub {
  display: block;
  margin-top: 4px;
  color: var(--ink-400);
  font-family: var(--font-mono);
  font-size: max(1rem, 9.5px);
  font-stretch: 100%;
  font-weight: var(--fw-regular);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.volume__node--det .volume__dot {
  top: -7px;
  left: -7px;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--yellow-500);
  border-radius: 0;
  background: transparent;
  box-shadow: 0 0 14px rgba(245, 196, 0, .3);
}

.volume__node--det .volume__dot::after {
  inset: -9px;
}

/* ◆ what was found */
.volume__node--hallazgos .volume__dot {
  transform: rotate(45deg) scale(.86);
}

/* ◧ what is missing */
.volume__node--brechas .volume__dot {
  background: linear-gradient(90deg, rgba(245, 196, 0, .9) 0 45%, transparent 45%);
}

/* ▲ what needs action */
.volume__node--alertas .volume__dot {
  border: 0;
  background: rgba(245, 196, 0, .45);
  clip-path: polygon(50% 4%, 100% 96%, 0 96%);
}

.volume__node--alertas .volume__dot::after {
  display: none;
}

/* States (doc-volume.js) */
.volume__node.is-tick .volume__dot {
  border-color: var(--ink-200);
}

.volume__node.is-lens .volume__dot {
  border-color: var(--white);
}

.volume__node.is-lens .volume__label {
  color: var(--white);
}

.volume__node.is-hit .volume__dot {
  border-color: var(--yellow-500);
  background: var(--yellow-500);
  box-shadow: 0 0 18px rgba(245, 196, 0, .7);
}

.volume__node--gen.is-hit .volume__dot {
  border-color: var(--white);
  background: var(--white);
  box-shadow: 0 0 12px rgba(255, 255, 255, .5);
}

.volume__node.is-hit .volume__dot::after {
  animation: volume-ping 1s var(--ease-out-quad);
}

.volume__node--det.is-hit .volume__label {
  color: var(--yellow-500);
}

/* ---- Core: glows more as it absorbs (--charge 0 → 1) ---------------------------- */
.volume__core {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  width: var(--core);
  height: var(--core);
  margin: 0;
  border-radius: 22%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow:
    0 0 0 calc(6px + var(--charge, 0) * 10px) rgba(245, 196, 0, .09),
    0 0 calc(40px + var(--charge, 0) * 30px) rgba(245, 196, 0, .3);
  opacity: 0;
  /* `translate` (not `transform`) so the pulse `scale` grows it in place */
  translate: calc(var(--x, 0) - var(--core) / 2) calc(var(--y, 0) - var(--core) / 2);
  transition: opacity 1s var(--ease-out-quad), box-shadow .35s, scale .45s var(--ease-out-quart);
}

.volume__core.is-sip {
  scale: 1.02;
}

.volume__core.is-hit {
  scale: 1.07;
  box-shadow: 0 0 0 14px rgba(245, 196, 0, .13), 0 0 70px rgba(245, 196, 0, .5);
}

.volume__ai {
  font-family: var(--font-display);
  font-size: calc(var(--core) * .44);
  font-stretch: 90%;
  font-weight: 760;
  letter-spacing: -.03em;
  line-height: .9;
}

.volume__brand {
  margin-top: calc(var(--core) * .07);
  font-family: var(--font-mono);
  font-size: max(calc(var(--core) * .125), 8px);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---- Gate labels: analiza · clasifica · compara · valida ------------------------ */
.volume__verbs li {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  color: var(--ink-400);
  font-size: max(1rem, 9.5px);
  letter-spacing: .08em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(var(--x, 0), var(--y, 0)) translate(var(--tx, -50%), -50%);
  transition: opacity .8s var(--ease-out-quad) .4s, color .2s;
}

.volume__verbs li[data-side="start"] {
  --tx: 0%;
}

.volume__verbs li[data-side="end"] {
  --tx: -100%;
}

/* Wide layout: written upwards, above each gate */
.volume__verbs li[data-side="vert"] {
  writing-mode: vertical-rl;
  transform: translate(var(--x, 0), var(--y, 0)) translate(-50%, -100%) rotate(180deg);
}

.volume__verbs li.is-on {
  color: var(--yellow-500);
}

/* ---- Entrance (.is-in, added by the script) --------------------------------------- */
.volume.is-in .volume__node,
.volume.is-in .volume__head,
.volume.is-in .volume__core,
.volume.is-in .volume__verbs li {
  opacity: 1;
}

/* ---- SVG ----------------------------------------------------------------------------- */
.volume__line {
  fill: none;
  stroke: var(--ink-700);
  stroke-width: 1;
}

.volume__line--crit {
  stroke: rgba(245, 196, 0, .3);
}

.volume__line--det {
  stroke: rgba(245, 196, 0, .24);
}

.volume__line--ghost {
  stroke: var(--ink-800);
}

.volume__mesh {
  fill: none;
  stroke: var(--ink-800);
  stroke-dasharray: 2 5;
}

.volume__gate {
  fill: none;
  stroke: var(--ink-500);
  stroke-width: 1.5;
  transition: stroke .15s;
}

.volume__gate.is-on {
  stroke: var(--yellow-500);
}

.volume__ghost {
  fill: var(--ink-700);
}

.volume__lens {
  fill: rgba(245, 196, 0, .03);
  stroke: rgba(245, 196, 0, .35);
  stroke-dasharray: 3 5;
  opacity: 0;
  transition: opacity .3s;
}

.volume__lens.is-on {
  opacity: 1;
}

.volume__lit {
  fill: none;
  stroke: var(--yellow-500);
  stroke-width: 1.25;
  stroke-linecap: round;
  opacity: 0;
}

.volume__lit--soft {
  stroke: rgba(255, 255, 255, .6);
}

.volume__spark-core {
  fill: var(--white);
}

.volume__spark-halo {
  fill: rgba(255, 255, 255, .12);
}

.volume__spark--micro .volume__spark-core {
  fill: var(--ink-300);
}

.volume__spark--det .volume__spark-core {
  fill: var(--yellow-500);
}

.volume__spark--det .volume__spark-halo {
  fill: rgba(245, 196, 0, .25);
}

/* ---- Tablet / mobile ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .page-hero__media--volume {
    grid-column: 1 / -1;
  }
}

@keyframes volume-ping {
  from { opacity: .9; transform: scale(.6); }
  to { opacity: 0; transform: scale(2); }
}