/* Chromatic aberration effect (no animation)
   - Opt-in by adding class "chromatic-aberration" to text elements
   - JS should set:
       - data-after="<element text content>" so pseudo-elements can render a copy
       - --ca-offset (length, e.g. "0px".."6px") to control intensity based on scroll speed
       - optionally --ca-offset-y and --ca-opacity
*/

:root {
  /* Global defaults (JS can override per element or on :root) */
  --ca-offset: 0px; /* horizontal shift magnitude */
  --ca-offset-y: 0px; /* vertical shift magnitude (optional) */
  --ca-opacity: 0.7; /* alpha for color channels 0..1 */
  --ca-blend-mode: multiply;
}

/* Convenience color variables so projects can theme easily */
.chromatic-aberration {
  --ca-red-color: hsla(20, 100%, 50%, var(--ca-opacity, 0.7));
  --ca-blue-color: hsla(200, 100%, 50%, var(--ca-opacity, 0.7));
  position: relative; /* anchor pseudo-elements */
}

/* Render channel copies above the original text */
.chromatic-aberration::before,
.chromatic-aberration::after {
  content: attr(data-after); /* JS sets this to element's textContent */
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  display: block;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: var(--ca-blend-mode, multiply);
  will-change: transform;
}

/* Left-shifted warm/red channel */
.chromatic-aberration::before {
  color: var(--ca-red-color, hsla(20, 100%, 50%, 0.7));
  transform: translate(
    calc(var(--ca-offset, 0px) * -1),
    var(--ca-offset-y, 0px)
  );
}

/* Right-shifted cool/blue channel */
.chromatic-aberration::after {
  color: var(--ca-blue-color, hsla(200, 100%, 50%, 0.7));
  transform: translate(
    var(--ca-offset, 0px),
    calc(var(--ca-offset-y, 0px) * -1)
  );
}

/* Utility: opt-in by attribute instead of class, if preferred */
[data-chromatic-aberration="true"] {
  position: relative;
}
[data-chromatic-aberration="true"]::before,
[data-chromatic-aberration="true"]::after {
  content: attr(data-after);
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: var(--ca-blend-mode, multiply);
  will-change: transform;
}
[data-chromatic-aberration="true"]::before {
  color: var(--ca-red-color, hsla(20, 100%, 50%, 0.7));
  transform: translate(
    calc(var(--ca-offset, 0px) * -1),
    var(--ca-offset-y, 0px)
  );
}
[data-chromatic-aberration="true"]::after {
  color: var(--ca-blue-color, hsla(200, 100%, 50%, 0.7));
  transform: translate(
    var(--ca-offset, 0px),
    calc(var(--ca-offset-y, 0px) * -1)
  );
}

/* Accessibility: prefer reduced motion users get a subtle static effect */
@media (prefers-reduced-motion: reduce) {
  .chromatic-aberration,
  [data-chromatic-aberration="true"] {
    --ca-offset: 1px;
    --ca-offset-y: 0px;
  }
}