/* Premium polish layer: global micro-interactions layered on top of the
   existing site. Purely additive — does not touch component markup. */

::selection {
  background: rgba(10, 61, 145, 0.28);
  color: #0f1a35;
}

html {
  scrollbar-color: #0a3d91 transparent;
  scrollbar-width: thin;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: #0a3d91;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #06266b;
  background-clip: content-box;
}

:focus-visible {
  outline: 2px solid #0a3d91;
  outline-offset: 2px;
  border-radius: 4px;
}

#polish-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
  background: linear-gradient(90deg, #0a3d91, #1e7fd6);
  z-index: 60;
  pointer-events: none;
}

/* Cursor-tracked spotlight on primary CTAs. Paints as a background-image
   layer, so it always sits behind existing button content automatically
   (no z-index/stacking risk with the button's own shine/arrow children). */
.polish-cta {
  transition: background-image 0.2s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.polish-cta:hover {
  background-image: radial-gradient(
    160px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.28),
    transparent 70%
  );
}

@media (prefers-reduced-motion: reduce) {
  #polish-progress {
    display: none;
  }
  .polish-cta,
  .polish-cta:hover {
    transition: none;
    background-image: none;
    transform: none !important;
  }
}

@media (pointer: coarse) {
  .polish-cta:hover {
    background-image: none;
  }
}