/* ═══════════════════════════════════════════════════════════════════
   FLYNN // POLISH — modern interaction layer for all skins
   Load after each skin's own CSS. Everything degrades silently:
   selectors and properties that lack support are simply ignored.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Selection: volt on ink, not the browser default blue ── */
::selection { background: #B69DFF; color: #0A0A0C; -webkit-text-fill-color: #0A0A0C; }
::-moz-selection { background: #B69DFF; color: #0A0A0C; }

/* ── Scrollbar: thin dark track, volt thumb, invisible until hover ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(182,157,255,0.18); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(182,157,255,0.4); }
html { scrollbar-width: thin; scrollbar-color: rgba(182,157,255,0.18) transparent; }

/* ── Focus: volt ring on interactive elements ── */
:focus-visible { outline: 2px solid #B69DFF; outline-offset: 3px; border-radius: 2px; }

/* ── Scroll progress bar: thin volt line at the top of the viewport ── */
.jf-scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 2147483640;
  top: env(safe-area-inset-top, 0px);
  height: 2px; width: 100%; pointer-events: none;
  background: linear-gradient(90deg, #FF5A6E, #FFB35C, #FFF06A, #5CF2C2, #04CFFD, #B69DFF);
  background-size: 100% 100%;
  transform-origin: 0 0;
  transform: scaleX(0);
  opacity: 0;
  transition: opacity .4s ease .6s;
}
html[jf-scroll-ready] .jf-scroll-progress { opacity: 1; }

/* ── Scroll-driven reveals: native CSS animation-timeline (progressive) ── */
@supports (animation-timeline: view()) {
  [data-reveal] {
    animation: jfRevealUp both;
    animation-timeline: view();
    animation-range: entry 5% entry 45%;
  }
  [data-reveal] > * {
    animation: jfRevealStagger both;
    animation-timeline: view();
    animation-range: entry 10% entry 50%;
  }
  [data-reveal] > *:nth-child(2) { animation-range: entry 12% entry 52%; }
  [data-reveal] > *:nth-child(3) { animation-range: entry 14% entry 54%; }
  [data-reveal] > *:nth-child(4) { animation-range: entry 16% entry 56%; }
  @keyframes jfRevealUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes jfRevealStagger {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ── Content visibility: skip rendering below-fold sections until needed ── */
.jf-cv-auto {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* ── Tap highlight: brand volt instead of system blue ── */
* { -webkit-tap-highlight-color: transparent; }

/* ── Magnetic CTA: ease the cursor-follow shift; :where() keeps
   specificity at zero so skin transition rules always win. ── */
:where([data-magnetic]) { transition: transform .3s cubic-bezier(.2, .8, .3, 1); }

/* ── Reduced motion: disable all polish animations ── */
@media (prefers-reduced-motion: reduce) {
  .jf-scroll-progress { opacity: 0 !important; }
  [data-reveal], [data-reveal] > * { animation: none !important; opacity: 1 !important; transform: none !important; }
  :where([data-magnetic]) { transition: none !important; }
}