/* styles/animations.css - Overlay animation effects */

/* Animation Variables - All disabled for performance */
:root {
    --animation-duration: 0ms;
    --media-button-duration: 0ms;
    --animation-easing: none;
    --fast-easing: none;
}

/* Initial Animation Positions - Disabled for performance */
.overlay-container:not(.visible) .brightness-container {
    transform: translate(0, -50%);
    opacity: 0;
}

.overlay-container:not(.visible) .volume-container {
    transform: translate(0, -50%);
    opacity: 0;
}

.overlay-container:not(.visible) .exit-button {
    opacity: 0;
}

.overlay-container:not(.visible) .bottom-section {
    opacity: 0;
}

.overlay-container:not(.visible) .media-button {
    opacity: 0;
}

/* Visible State - Instant appearance */
.overlay-container.visible .brightness-container {
    transform: translate(0, -50%);
    opacity: 1;
    transition: none;
}

.overlay-container.visible .volume-container {
    transform: translate(0, -50%);
    opacity: 1;
    transition: none;
}

.overlay-container.visible .exit-button {
    opacity: 1;
    transition: none;
}

.overlay-container.visible .bottom-section {
    opacity: 1;
    transition: none;
}

.overlay-container.visible .media-button {
    opacity: 1;
    transition: none;
}

/* Staggered Media Button Animations - Disabled */
.overlay-container.visible .media-button:nth-child(1),
.overlay-container.visible .media-button:nth-child(2),
.overlay-container.visible .media-button:nth-child(3) {
    transition-delay: 0ms;
}

/* Smooth transitions for overlay elements - only for show/hide animations */
.brightness-container,
.volume-container {
    transition: none;
}

.overlay-container:not(.visible) .brightness-container,
.overlay-container:not(.visible) .volume-container {
    transition: transform var(--animation-duration) var(--animation-easing);
}

/* Only apply transition when toggling visibility, not during interaction */
.overlay-container.visible .brightness-container,
.overlay-container.visible .volume-container {
    transition: transform var(--animation-duration) var(--animation-easing);
}

/* Remove transition after animation completes to prevent glitch during interaction */
.overlay-container.visible .brightness-container:hover,
.overlay-container.visible .volume-container:hover,
.overlay-container.visible .brightness-container:active,
.overlay-container.visible .volume-container:active {
    transition: none;
}

.exit-button,
.bottom-section {
    transition: transform var(--animation-duration) var(--animation-easing);
}

.media-button {
    transition: transform var(--media-button-duration) var(--fast-easing);
}

/* Overlay background - instant visibility change */
.overlay-container {
    transition: none;
}

/* Hover animations - disabled */
.media-button {
    transition: none;
}

.media-button:hover {
    /* No animation */
}

/* Slide animations for sliders - disabled */
.vertical-range {
    transition: none;
}

.vertical-range:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

/* Prevent any transform transitions on slider parent when interacting with slider */
.control-container:has(.vertical-range:active),
.control-container:has(.vertical-range:focus),
.control-container.dragging {
    transition: none !important;
    transform: translate(0, -50%) !important;
}

.brightness-container:has(.vertical-range:active),
.volume-container:has(.vertical-range:active),
.brightness-container:has(.vertical-range:focus),
.volume-container:has(.vertical-range:focus),
.brightness-container.dragging,
.volume-container.dragging {
    transition: none !important;
    transform: translate(0, -50%) !important;
}

/* Loading animation - disabled */
.loading-container {
    /* No animation */
}

/* Channel selection - no animation */
.channel-icon {
    transition: none;
}

.channel-icon.selected {
    /* No animation */
}

/* Brightness/Volume change visual feedback - disabled */
.control-container.active {
    /* No animation */
}

/* Button press animation - disabled */
.media-button:active {
    /* No animation */
}

/* Icon transitions - disabled */
.control-icon svg {
    transition: none;
}

.control-container:hover .control-icon svg {
    /* No scale animation */
}

/* Current channel name - no animation */
.current-channel-name {
    transition: none;
}

/* Exit button - no animation */
.exit-button {
    position: relative;
    overflow: hidden;
}

.exit-button::before {
    /* Disabled ripple effect */
    display: none;
}

/* Responsive - all animations disabled */
@media (max-width: 768px) {
    :root {
        --animation-duration: 0ms;
        --media-button-duration: 0ms;
    }
}

/* All animations disabled globally for performance */
* {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
}