/* ==========================================================
   V55 — Interaction standard correction
   1) Inner scrollbars use a custom overlay indicator so they
      reliably appear ONLY while scrolling or near the edge.
   2) Carousel arrows reveal only at the arrow hit-area itself,
      then fade after interaction — never because the whole card
      is hovered and never remain stuck after changing slides.
   ========================================================== */

:root {
  --v55-scrollbar-width: 7px;
  --v55-scrollbar-edge: 22px;
  --v55-scrollbar-thumb: rgba(214,255,75,.52);
  --v55-scrollbar-thumb-hover: rgba(214,255,75,.92);
  --v55-arrow-fade: 210ms;
}

/* ---------- INNER SCROLLBAR STANDARD ----------
   Hide the browser-native inner scrollbar; JS adds a visual,
   draggable overlay thumb that mirrors the true scroll position.
   The OUTER page scrollbar remains managed by v54. */
.case-study-modal-scroll,
.portfolio-scroll-standard,
[data-scroll-reveal] {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.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;
}

.v55-scrollbar-track {
  position: absolute;
  z-index: 999;
  top: 5px;
  right: 3px;
  bottom: 5px;
  width: var(--v55-scrollbar-edge);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.v55-scrollbar-track::before {
  content: "";
  position: absolute;
  right: 2px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(214,255,75,.04);
  opacity: 0;
  transition: opacity 160ms ease;
}
.v55-scrollbar-thumb {
  position: absolute;
  right: 0;
  top: 0;
  width: var(--v55-scrollbar-width);
  min-height: 34px;
  border-radius: 999px;
  background: var(--v55-scrollbar-thumb);
  box-shadow: 0 0 10px rgba(214,255,75,.14);
  cursor: grab;
  pointer-events: auto;
  transition: background 150ms ease, box-shadow 150ms ease, width 150ms ease;
}
.v55-scrollbar-track.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.v55-scrollbar-track.is-visible::before { opacity: 1; }
.v55-scrollbar-thumb:hover,
.v55-scrollbar-thumb.is-dragging {
  width: 8px;
  background: var(--v55-scrollbar-thumb-hover);
  box-shadow: 0 0 14px rgba(214,255,75,.30);
}
.v55-scrollbar-thumb.is-dragging { cursor: grabbing; }
.v55-scrollbar-track.is-not-scrollable { display:none !important; }

/* Modal is position:relative already; reusable scroll regions may not be. */
.portfolio-scroll-standard,
[data-scroll-reveal] { position: relative; }

/* On touch layouts we intentionally keep the visual indicator hidden.
   Native touch scrolling still works normally. */
@media (hover:none), (pointer:coarse) {
  .v55-scrollbar-track { display:none !important; }
}

/* ---------- ARROW FADE STANDARD — corrected ---------- */
/* Neutralize v46's host-hover reveal. The hitbox remains present even
   when the visual is transparent so moving onto the arrow can reveal it. */
.simple-slider-arrow,
.carousel-arrow,
.video-coverflow-nav,
.campaign-coverflow-nav,
.artist-carousel-arrow,
.subsidy-carousel-arrow {
  opacity: 0 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateZ(0) scale(.94) !important;
  transition:
    opacity var(--v55-arrow-fade) ease,
    transform var(--v55-arrow-fade) ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease !important;
}

/* Only the arrow itself (or keyboard focus / a short JS interaction state)
   reveals the visual. Hovering the poster/card no longer reveals arrows. */
.simple-slider-arrow:is(:hover, :focus-visible, .v55-arrow-visible),
.carousel-arrow:is(:hover, :focus-visible, .v55-arrow-visible),
.video-coverflow-nav:is(:hover, :focus-visible, .v55-arrow-visible),
.campaign-coverflow-nav:is(:hover, :focus-visible, .v55-arrow-visible),
.artist-carousel-arrow:is(:hover, :focus-visible, .v55-arrow-visible),
.subsidy-carousel-arrow:is(:hover, :focus-visible, .v55-arrow-visible) {
  opacity: .96 !important;
  transform: translateZ(0) scale(1) !important;
}

/* A clicked arrow must be allowed to fade even if the cursor hasn't moved.
   JS adds this class briefly after click to suppress persistent :hover. */
.simple-slider-arrow.v55-arrow-forced-hidden,
.carousel-arrow.v55-arrow-forced-hidden,
.video-coverflow-nav.v55-arrow-forced-hidden,
.campaign-coverflow-nav.v55-arrow-forced-hidden,
.artist-carousel-arrow.v55-arrow-forced-hidden,
.subsidy-carousel-arrow.v55-arrow-forced-hidden {
  opacity: 0 !important;
  transform: translateZ(0) scale(.94) !important;
}

/* Keep the already-established mobile rule: outer coverflow arrows stay gone. */
@media (hover:none), (max-width:760px) {
  .video-coverflow-nav,
  .campaign-coverflow-nav,
  .artist-series-controls,
  .mobile-artist-switcher,
  .subsidy-series-nav { display:none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .v55-scrollbar-track,
  .v55-scrollbar-thumb,
  .simple-slider-arrow,
  .carousel-arrow,
  .video-coverflow-nav,
  .campaign-coverflow-nav,
  .artist-carousel-arrow,
  .subsidy-carousel-arrow { transition:none !important; }
}