html[data-view='general'] {
  --accent-hue: 225;
  --accent-chroma: 0.055;
  --accent-soft-chroma: 0.03;
  --header-overlay-opacity: 0.58;
}

html[data-view='qa'] {
  --accent-hue: 236;
  --accent-chroma: 0.24;
  --accent-soft-chroma: 0.11;
  --header-overlay-opacity: 0.74;
}

html[data-view='fullstack'] {
  --accent-hue: 178;
  --accent-chroma: 0.23;
  --accent-soft-chroma: 0.11;
  --header-overlay-opacity: 0.7;
}

html[data-view='frontend'] {
  --accent-hue: 286;
  --accent-chroma: 0.24;
  --accent-soft-chroma: 0.11;
  --header-overlay-opacity: 0.72;
}

html[data-view='leadership'] {
  --accent-hue: 48;
  --accent-chroma: 0.2;
  --accent-soft-chroma: 0.1;
  --header-overlay-opacity: 0.68;
}

html[data-view='builder'] {
  --accent-hue: 326;
  --accent-chroma: 0.25;
  --accent-soft-chroma: 0.12;
  --header-overlay-opacity: 0.74;
}

@media (prefers-reduced-motion: reduce) {
  .perspective-link,
  .action-link,
  .action-button,
  .resume-section,
  .experience-item,
  .project-item,
  .education-item,
  .skill-group,
  .section-icon {
    transition: none;
  }

  .resume-title,
  .perspective-viz,
  .section-icon,
  .section-icon svg,
  .viz-general,
  .viz-general-orbit,
  .viz-general .viz-hex-inner,
  .viz-check,
  .viz-shield,
  .viz-layer-top,
  .viz-layer-mid,
  .viz-layer-btm,
  .viz-layer-mid-sep,
  .viz-dot-1,
  .viz-dot-2,
  .viz-dot-3,
  .viz-line-1,
  .viz-line-2,
  .viz-cursor,
  .viz-compass-ring,
  .viz-compass-scan,
  .viz-compass-points,
  .viz-compass-center,
  .viz-node-outer-1,
  .viz-node-outer-2,
  .viz-node-outer-3,
  .viz-node-core-1,
  .viz-node-core-2,
  .viz-node-core-3,
  .viz-edge {
    animation: none;
  }

  /* Center the gradient viewport so the full analogous spectrum is visible
   * when the titleShimmer animation is frozen. Without this, position 0% 50%
   * shows only the first ~38% of the 260%-wide gradient.
   * See: docs/GRADIENT_REDUCED_MOTION_GUIDE.md */
  .resume-title {
    background-position: 50% 50% !important;
  }

  .resume-shell.is-view-shift .resume-section,
  .resume-shell.is-view-shift .experience-item,
  .resume-shell.is-view-shift .project-item,
  .resume-shell.is-view-shift .education-item,
  .resume-shell.is-view-shift .skill-group,
  .resume-shell.is-view-shift .section-icon {
    animation: none;
  }
}