/* ==========================================================
   V54 — STRICT SCROLL-REVEAL STANDARD
   Default state is ALWAYS invisible.
   A scrollbar becomes visible only while its region is scrolling
   or while the pointer is actually near the scrollbar edge.
   Applies to page + all reusable inner scroll regions.
   ========================================================== */

:root {
  --portfolio-scrollbar-size: 8px;
  --portfolio-scrollbar-thumb: rgba(214,255,75,.48);
  --portfolio-scrollbar-thumb-hover: rgba(214,255,75,.90);
}

/* ---------- OUTER PAGE ---------- */
html {
  scrollbar-width: thin !important;
  scrollbar-color: transparent transparent !important;
}
html.portfolio-scrollbar-active,
html.portfolio-scrollbar-near {
  scrollbar-color: var(--portfolio-scrollbar-thumb) transparent !important;
}
html::-webkit-scrollbar {
  width: var(--portfolio-scrollbar-size);
  height: var(--portfolio-scrollbar-size);
}
html::-webkit-scrollbar-track,
html::-webkit-scrollbar-corner { background: transparent; }
html::-webkit-scrollbar-thumb {
  background: transparent !important;
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
  box-shadow: none !important;
}
html.portfolio-scrollbar-active::-webkit-scrollbar-thumb,
html.portfolio-scrollbar-near::-webkit-scrollbar-thumb {
  background: var(--portfolio-scrollbar-thumb) !important;
}
html.portfolio-scrollbar-near::-webkit-scrollbar-thumb:hover,
html.portfolio-scrollbar-active::-webkit-scrollbar-thumb:hover {
  background: var(--portfolio-scrollbar-thumb-hover) !important;
  box-shadow: 0 0 12px rgba(214,255,75,.30) !important;
}

/* ---------- INNER / REUSABLE ---------- */
.case-study-modal-scroll,
.portfolio-scroll-standard,
[data-scroll-reveal] {
  scrollbar-width: thin !important;
  scrollbar-color: transparent transparent !important;
}

/* Explicitly kill every legacy hover/focus reveal rule. */
.case-study-modal-panel:hover .case-study-modal-scroll,
.case-study-modal-scroll:hover,
.case-study-modal-scroll:focus,
.case-study-modal-scroll:focus-within,
.portfolio-scroll-standard:hover,
.portfolio-scroll-standard:focus,
.portfolio-scroll-standard:focus-within,
[data-scroll-reveal]:hover,
[data-scroll-reveal]:focus,
[data-scroll-reveal]:focus-within {
  scrollbar-color: transparent transparent !important;
}

.case-study-modal-scroll.is-scrollbar-active,
.case-study-modal-scroll.is-scrollbar-near,
.portfolio-scroll-standard.is-scrollbar-active,
.portfolio-scroll-standard.is-scrollbar-near,
[data-scroll-reveal].is-scrollbar-active,
[data-scroll-reveal].is-scrollbar-near {
  scrollbar-color: var(--portfolio-scrollbar-thumb) transparent !important;
}

.case-study-modal-scroll::-webkit-scrollbar,
.portfolio-scroll-standard::-webkit-scrollbar,
[data-scroll-reveal]::-webkit-scrollbar {
  width: var(--portfolio-scrollbar-size);
  height: var(--portfolio-scrollbar-size);
}
.case-study-modal-scroll::-webkit-scrollbar-track,
.portfolio-scroll-standard::-webkit-scrollbar-track,
[data-scroll-reveal]::-webkit-scrollbar-track,
.case-study-modal-scroll::-webkit-scrollbar-corner,
.portfolio-scroll-standard::-webkit-scrollbar-corner,
[data-scroll-reveal]::-webkit-scrollbar-corner {
  background: transparent;
}
.case-study-modal-scroll::-webkit-scrollbar-thumb,
.portfolio-scroll-standard::-webkit-scrollbar-thumb,
[data-scroll-reveal]::-webkit-scrollbar-thumb,
.case-study-modal-panel:hover .case-study-modal-scroll::-webkit-scrollbar-thumb,
.case-study-modal-scroll:hover::-webkit-scrollbar-thumb,
.case-study-modal-scroll:focus-within::-webkit-scrollbar-thumb,
.portfolio-scroll-standard:hover::-webkit-scrollbar-thumb,
.portfolio-scroll-standard:focus-within::-webkit-scrollbar-thumb,
[data-scroll-reveal]:hover::-webkit-scrollbar-thumb,
[data-scroll-reveal]:focus-within::-webkit-scrollbar-thumb {
  background: transparent !important;
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
  box-shadow: none !important;
}
.case-study-modal-scroll.is-scrollbar-active::-webkit-scrollbar-thumb,
.case-study-modal-scroll.is-scrollbar-near::-webkit-scrollbar-thumb,
.portfolio-scroll-standard.is-scrollbar-active::-webkit-scrollbar-thumb,
.portfolio-scroll-standard.is-scrollbar-near::-webkit-scrollbar-thumb,
[data-scroll-reveal].is-scrollbar-active::-webkit-scrollbar-thumb,
[data-scroll-reveal].is-scrollbar-near::-webkit-scrollbar-thumb {
  background: var(--portfolio-scrollbar-thumb) !important;
}
.case-study-modal-scroll.is-scrollbar-near::-webkit-scrollbar-thumb:hover,
.portfolio-scroll-standard.is-scrollbar-near::-webkit-scrollbar-thumb:hover,
[data-scroll-reveal].is-scrollbar-near::-webkit-scrollbar-thumb:hover {
  background: var(--portfolio-scrollbar-thumb-hover) !important;
  box-shadow: 0 0 12px rgba(214,255,75,.30) !important;
}

/* Touch devices: no visual scrollbar at all. */
@media (hover: none), (pointer: coarse), (max-width: 900px) {
  html,
  .case-study-modal-scroll,
  .portfolio-scroll-standard,
  [data-scroll-reveal] {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  html::-webkit-scrollbar,
  .case-study-modal-scroll::-webkit-scrollbar,
  .portfolio-scroll-standard::-webkit-scrollbar,
  [data-scroll-reveal]::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }
}