/* Shared research-chemistry vocabulary. Pack CSS supplies --chem-angle / --chem-pitch
   and country motifs stay on .pack-motif. No product facts, GHS marks, or claims. */

body.tone-aggressive {
  --chem-angle: 18deg;
  --chem-pitch: 32px;
  --chem-ink: color-mix(in srgb, var(--pack-accent-mix, var(--accent)) 58%, var(--text));
  --spectral-a: var(--accent);
  --spectral-b: var(--accent-2, var(--text));
}

.pack-layer .chem-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.9;
  background-repeat: repeat;
}

/* Molecular bond geometry: nodes + edges, tinted by the pack accent. */
body.chem-bond .chem-layer {
  background-image:
    radial-gradient(circle at 18% 28%, var(--chem-ink) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 22%, var(--chem-ink) 0 2px, transparent 3px),
    radial-gradient(circle at 46% 68%, var(--chem-ink) 0 3px, transparent 4px),
    radial-gradient(circle at 84% 74%, var(--chem-ink) 0 2px, transparent 3px),
    linear-gradient(
      var(--chem-angle),
      transparent 0 48%,
      color-mix(in srgb, var(--chem-ink) 70%, transparent) 48% 49%,
      transparent 50%
    ),
    linear-gradient(
      calc(var(--chem-angle) + 62deg),
      transparent 0 62%,
      color-mix(in srgb, var(--chem-ink) 55%, transparent) 62% 63%,
      transparent 64%
    );
  background-size:
    var(--chem-pitch) calc(var(--chem-pitch) * 0.9),
    calc(var(--chem-pitch) * 1.4) var(--chem-pitch),
    calc(var(--chem-pitch) * 1.1) calc(var(--chem-pitch) * 1.2),
    calc(var(--chem-pitch) * 1.6) calc(var(--chem-pitch) * 1.1),
    100% 100%,
    100% 100%;
}

/* Crystal / index lattice. */
body.chem-lattice .chem-layer {
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0 calc(var(--chem-pitch) - 1px),
      color-mix(in srgb, var(--chem-ink) 55%, transparent) calc(var(--chem-pitch) - 1px) var(--chem-pitch)
    ),
    repeating-linear-gradient(
      60deg,
      transparent 0 calc(var(--chem-pitch) - 1px),
      color-mix(in srgb, var(--chem-ink) 40%, transparent) calc(var(--chem-pitch) - 1px) var(--chem-pitch)
    ),
    repeating-linear-gradient(
      120deg,
      transparent 0 calc(var(--chem-pitch) - 1px),
      color-mix(in srgb, var(--chem-ink) 40%, transparent) calc(var(--chem-pitch) - 1px) var(--chem-pitch)
    );
}

/* Chromatogram traces: vertical elution bands, not a rainbow alert. */
body.chem-chromatogram .chem-layer {
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0 calc(var(--chem-pitch) - 2px),
      color-mix(in srgb, var(--chem-ink) 70%, transparent) calc(var(--chem-pitch) - 2px) calc(var(--chem-pitch) - 1px),
      transparent calc(var(--chem-pitch) - 1px) var(--chem-pitch)
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 11px,
      color-mix(in srgb, var(--accent) 28%, transparent) 11px 12px
    ),
    linear-gradient(
      180deg,
      transparent 0 28%,
      color-mix(in srgb, var(--chem-ink) 35%, transparent) 42%,
      transparent 58% 100%
    );
  background-size: var(--chem-pitch) 100%, 24px 100%, 100% 100%;
}

/* Spectral sheet: emission grating + a second chromatic wash.
   Pack --chem-pitch / --chem-angle retune the grating; no product values. */
body.chem-spectral .chem-layer {
  background-image:
    repeating-linear-gradient(
      calc(180deg + var(--chem-angle)),
      transparent 0 calc(var(--chem-pitch) - 1px),
      color-mix(in srgb, var(--chem-ink) 58%, transparent) calc(var(--chem-pitch) - 1px) var(--chem-pitch)
    ),
    repeating-linear-gradient(
      calc(90deg + var(--chem-angle)),
      transparent 0 6px,
      color-mix(in srgb, var(--spectral-a, var(--accent)) 38%, transparent) 6px 7px,
      transparent 7px 15px
    ),
    linear-gradient(
      calc(90deg + var(--chem-angle)),
      color-mix(in srgb, var(--spectral-a, var(--accent)) 22%, transparent),
      color-mix(in srgb, var(--accent) 28%, transparent) 46%,
      color-mix(in srgb, var(--spectral-b, var(--accent-2, var(--text))) 18%, transparent)
    );
  background-size: 100% var(--chem-pitch), 100% 18px, 100% 4px;
  background-repeat: repeat, repeat, repeat-y;
  background-position: 0 0, 0 0, 0 18%;
}

body.tone-aggressive.journey-discover:not(.fx-reduced) .chem-layer {
  animation: chem-mech 22s steps(8, end) infinite alternate;
}
@keyframes chem-mech {
  from { transform: none; }
  to { transform: translate3d(1.2%, -0.8%, 0); }
}

body.journey-txn .chem-layer {
  opacity: 0.18;
  animation: none;
}
body.view-account .chem-layer,
body.view-checkout .chem-layer,
body.view-payment .chem-layer,
body.view-cart .chem-layer {
  opacity: 0.12;
  animation: none;
}

/* Catalog index ticks: positional chrome, not a fabricated lot or purity. */
body.tone-aggressive.journey-discover .product-grid,
body.tone-aggressive.journey-discover .catalog-band .product-grid {
  counter-reset: chem-idx;
}
body.tone-aggressive.journey-discover .product-card {
  counter-increment: chem-idx;
}
body.tone-aggressive.journey-discover .product-card .thumb {
  position: relative;
}
body.tone-aggressive.journey-discover .product-card .thumb::before {
  content: counter(chem-idx, decimal-leading-zero);
  position: absolute;
  /* Top-left belongs to the commercial badges (ready, popular, sale). */
  inset-inline-end: 0;
  top: 0;
  z-index: 2;
  pointer-events: none;
  font-family: ui-monospace, "Cascadia Mono", monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  padding: 0.28rem 0.38rem;
  background: var(--text);
  color: var(--bg);
  border-inline-start: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
}

/* Existing product fields, drawn as a spec plate. Never invent values. */
body.tone-aggressive.view-product .specs {
  font-family: ui-monospace, "Cascadia Mono", monospace;
  border: 2px solid var(--text);
  padding: 0.7rem 0.85rem;
  margin: 1rem 0;
  display: grid;
  gap: 0.35rem;
}
body.tone-aggressive.view-product .specs dt {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text);
}
body.tone-aggressive.view-product .specs dd {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Commerce stays on top of atmosphere / chemistry chrome. */
body.tone-aggressive .product-card .meta h3,
body.tone-aggressive .product-card .meta p,
body.tone-aggressive .buy h1,
body.tone-aggressive .buy .price,
body.tone-aggressive .buy .btn,
body.tone-aggressive .product-card .badge {
  position: relative;
  z-index: 3;
}

body.tone-aggressive.journey-discover .product-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

body.tone-aggressive a:focus-visible,
body.tone-aggressive button:focus-visible,
body.tone-aggressive input:focus-visible,
body.tone-aggressive select:focus-visible,
body.tone-aggressive textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (max-width: 800px) {
  body.tone-aggressive.journey-discover .chem-layer {
    opacity: 0.55;
    animation: none;
  }
  body.tone-aggressive.journey-discover .product-card .thumb::before {
    font-size: 0.58rem;
    padding: 0.22rem 0.3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.tone-aggressive .chem-layer {
    animation: none !important;
  }
}
body.rm-static .chem-layer { display: none; }
body.rm-opacity-only .chem-layer,
body.rm-instant .chem-layer {
  animation: none;
}
body.rm-opacity-only .chem-layer { opacity: 0.35; }
body.fx-reduced .chem-layer { animation: none; }