/* Most styling is handled with Tailwind utilities in the markup.
   This file only keeps small fallbacks / hard-to-express selectors. */

/* Fallback for "active" state (in case Tailwind data-group variants aren't available). */
[data-typo-scroll-item="active"] .typo-scroll__h {
  z-index: 2;
  color: #6B6B6B;
  mix-blend-mode: difference;
}

[data-typo-scroll-item="active"] .typo-scroll__media {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  opacity: 1;
}

@media (hover: none) and (pointer: coarse) { 
  [data-typo-scroll-item="active"] .typo-scroll__media {
    pointer-events: all;
  }
}