/* ShaniStream Custom Styles */

@keyframes textShimmer {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: -200% 50%;
  }
}

.animate-shine {
  color: #ffffff;
  transition: transform 0.3s ease, filter 0.3s ease;
  padding-right: 0.15em;
  display: inline-block;
}

@media (hover: hover) {
  .group:hover .animate-shine,
  .animate-shine:hover {
    background: linear-gradient(
      90deg,
      #ffffff 0%,
      #e9d5ff 25%,
      #c084fc 50%,
      #e9d5ff 75%,
      #ffffff 100%
    );
    background-size: 200% 100%;
    background-position: 0% 50%;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: textShimmer 2.5s linear infinite;
    filter: drop-shadow(0 0 6px rgba(192, 132, 252, 0.25));
  }
}

/* Custom styled Range Slider */
input[type="range"].custom-slider {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
  height: 6px;
  border-radius: 9999px;
  cursor: pointer;
  margin: 0;
  padding: 0;
  transition: opacity 0.2s ease;
}

input[type="range"].custom-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 9999px;
  background: transparent;
  border: none;
}

input[type="range"].custom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  margin-top: -4px;
  transition: transform 0.15s ease-out, background-color 0.15s ease;
}

@media (hover: hover) {
  input[type="range"].custom-slider:hover::-webkit-slider-thumb {
    transform: scale(1.2);
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  }
}
input[type="range"].custom-slider:active::-webkit-slider-thumb {
  transform: scale(1.2);
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

input[type="range"].custom-slider::-moz-range-track {
  height: 6px;
  border-radius: 9999px;
  background: transparent;
  border: none;
}

input[type="range"].custom-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s ease-out, background-color 0.15s ease;
}

input[type="range"].custom-slider:hover::-moz-range-thumb {
  transform: scale(1.2);
  background: #ffffff;
}

@keyframes slideUpSheet {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDownSheet {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes slideUpPopover {
  from {
    transform: translateY(12px) scale(0.96);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes slideDownPopover {
  from {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateY(12px) scale(0.96);
    opacity: 0;
  }
}

@keyframes fadeInBackdrop {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOutBackdrop {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.animate-backdrop-in {
  animation: fadeInBackdrop 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-backdrop-out {
  animation: fadeOutBackdrop 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-sheet-slide {
  animation: slideUpSheet 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-sheet-slide-out {
  animation: slideDownSheet 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-popover-slide {
  animation: slideUpPopover 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-popover-slide-out {
  animation: slideDownPopover 0.16s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Hide cursor utility when controls are hidden during playback */
/* Prevent native text selection and browser touch callouts on touch/tablet/mobile devices */
@media (pointer: coarse), (hover: none) {
  *, *::before, *::after {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  input, textarea {
    -webkit-user-select: text !important;
    user-select: text !important;
  }
}

/* Hide cursor utility when controls are hidden during playback */
.hide-cursor,
.hide-cursor *,
.hide-cursor video,
.hide-cursor div,
.hide-cursor button,
.hide-cursor input {
  cursor: none !important;
}

/* Strip native browser cue defaults */
video::cue {
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
  font-weight: normal !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

video::-webkit-media-text-track-display,
video::-webkit-media-text-track-container,
video::-webkit-media-text-track-background {
  background: transparent !important;
  background-color: transparent !important;
}

/* Remove default focus ring outlines on buttons */
button, button:focus, button:focus-visible, button:active {
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* Hide scrollbar while preserving scrollability */
.no-scrollbar::-webkit-scrollbar,
.custom-scroll-hidden::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.no-scrollbar,
.custom-scroll-hidden {
  -ms-overflow-style: none !important;  /* IE and Edge */
  scrollbar-width: none !important;  /* Firefox */
}

/* Custom overlay base class */
.vlc-subtitle-overlay {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: normal;
  display: inline-block;
}

/* Skip Animation Utilities (YouTube-style smooth slide for chevron & number bounce) */
@keyframes skipLeftAnim {
  0% {
    opacity: 0;
    transform: translate3d(24px, 0, 0) scale(0.82);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(-8px, 0, 0) scale(1);
  }
}

@keyframes skipRightAnim {
  0% {
    opacity: 0;
    transform: translate3d(-24px, 0, 0) scale(0.82);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(8px, 0, 0) scale(1);
  }
}

@keyframes skipLeftAnimOverlap {
  0% {
    opacity: 0;
    transform: translate3d(24px, 0, 0) scale(0.82);
  }
  25% {
    opacity: 1;
  }
  65% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translate3d(-8px, 0, 0) scale(1);
  }
}

@keyframes skipRightAnimOverlap {
  0% {
    opacity: 0;
    transform: translate3d(-24px, 0, 0) scale(0.82);
  }
  25% {
    opacity: 1;
  }
  65% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translate3d(8px, 0, 0) scale(1);
  }
}

.animate-skip-left {
  will-change: transform, opacity;
  animation: skipLeftAnim 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.animate-skip-right {
  will-change: transform, opacity;
  animation: skipRightAnim 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.animate-skip-left-overlap {
  will-change: transform, opacity;
  animation: skipLeftAnimOverlap 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.animate-skip-right-overlap {
  will-change: transform, opacity;
  animation: skipRightAnimOverlap 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.animate-skip-left-fast {
  will-change: transform, opacity;
  animation: skipLeftAnim 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.animate-skip-right-fast {
  will-change: transform, opacity;
  animation: skipRightAnim 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.animate-skip-left-overlap-fast {
  will-change: transform, opacity;
  animation: skipLeftAnimOverlap 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.animate-skip-right-overlap-fast {
  will-change: transform, opacity;
  animation: skipRightAnimOverlap 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.skip-chev-end-left {
  transform: translate3d(-8px, 0, 0);
}

.skip-chev-end-right {
  transform: translate3d(8px, 0, 0);
}

@keyframes skipNumberBounce {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(0.92);
  }
  100% {
    transform: scale(1);
  }
}

.animate-skip-number {
  will-change: transform;
  animation: skipNumberBounce 0.24s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}