/**
 * InfiniteScroll Component Styles
 *
 * All classes prefixed with `is-` to avoid conflicts.
 * Uses CSS custom properties for theming.
 */

/* MARK: Container */

.is-container {
    overflow: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;  /* Tell iOS this is a vertical scroll container */
    padding: var(--is-container-padding, 0);

    /* Hide native scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;

    /* Mobile touch prevention */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.is-container::-webkit-scrollbar {
    display: none;
}

.is-content {
    position: relative;
    width: 100%;
    z-index: 1;  /* Below scrubber (z-index: 100) */
    touch-action: pan-y;  /* Touches on empty gaps should also scroll */
    padding-bottom: var(--sa-bottom);  /* Allow last items to scroll past home indicator */
}

/* MARK: Items (shared) */

.is-item {
    position: absolute;
    left: 0;
    right: 0;
}

/* MARK: Hero */

.is-hero {
    display: flex;
    align-items: center;
    justify-content: center;
}

.is-hero-content {
    color: var(--is-text-color, #fff);
}

/* MARK: Title */

.is-title {
    display: flex;
    align-items: center;
    padding: 0 var(--is-title-padding, 16px);
    font-size: var(--is-title-font-size, 14px);
    font-weight: var(--is-title-font-weight, 600);
    color: var(--is-title-color, rgba(255, 255, 255, 0.6));
    letter-spacing: 0.02em;
}

/* MARK: Sticky Label */

.is-sticky-label {
    position: fixed;
    width: fit-content;
    padding: 6px 14px;
    font-size: var(--is-title-font-size, 14px);
    font-weight: var(--is-title-font-weight, 600);
    color: var(--is-title-color, rgba(255, 255, 255, 0.6));
    letter-spacing: 0.02em;
    background: var(--is-sticky-label-bg, rgba(0, 0, 0, 0.7));
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-radius: 16px;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    /* Position set by JS based on container bounds */
}

.is-sticky-label.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* MARK: Row */

.is-row {
    display: flex;
    gap: var(--is-gap, 1px);
}

/* MARK: Cell */

.is-cell {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--is-cell-bg, rgba(255, 255, 255, 0.05));
    border-radius: var(--is-cell-radius, 0);

    /* Prevent image drag on mobile */
    -webkit-user-drag: none;

    /* Touch: disable double-tap zoom for faster response */
    touch-action: manipulation;

    /* Interaction */
    cursor: pointer;
}

/* Cell loading state - shows shimmer animation */
.is-cell-loading::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.08),
        transparent
    );
    animation: is-shimmer 1.5s infinite;
}

@keyframes is-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Preserved cells - already loaded, prevent shimmer on DOM re-parenting */
.is-cell-preserved::before {
    display: none;
    animation: none;
}

.is-cell-preserved img {
    opacity: 1;
    transition: none;
}

/* Cell image - starts hidden, fades in when loaded */
.is-cell img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.2s ease;

    /* Prevent image drag */
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

/* Cell loaded state - fade in image */
.is-cell-loaded img {
    opacity: 1;
}

/* Remove shimmer when loaded */
.is-cell-loaded::before {
    display: none;
}

/* Instant state - cached images appear immediately without fade */
.is-cell-instant img {
    opacity: 1;
    transition: none;
}

/* Error state - hide shimmer, show error background */
.is-cell-error::before {
    display: none;
}

.is-cell-error {
    background: var(--is-cell-error-bg, rgba(255, 0, 0, 0.1));
}

/* MARK: Scrubber */

.is-scrubber {
    position: fixed;
    width: var(--is-scrubber-width, 60px);
    pointer-events: none;
    z-index: 200;  /* Higher than sidebar overlay (101) */
    /* Top, right, height set by JS based on container bounds */
}

.is-scrubber-track {
    position: absolute;
    top: 12px;
    right: 28px;  /* Centers 4px track on 44px thumb at right: 8px */
    bottom: calc(24px + var(--sa-bottom));  /* Match JS paddingBottom */
    width: 4px;
    background: var(--is-scrubber-track-bg, rgba(255, 255, 255, 0.1));
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;  /* Default to none - don't intercept scroll gestures */
}

.is-scrubber-track.is-visible {
    opacity: 1;
    pointer-events: auto;  /* Only intercept when visible */
}

.is-scrubber-thumb {
    position: absolute;
    right: var(--space-2, 8px);
    width: 44px;
    height: 44px;

    /* glass class provides background, blur, border */
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

    cursor: grab;
    touch-action: none;
    opacity: 0;
    pointer-events: auto;  /* Always receive taps, even when hidden */
    transition: opacity 0.2s ease, background 0.15s ease, transform 0.15s ease;

    /* Arrow indicator */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Arrow indicator pointing left */
.is-scrubber-thumb::before {
    content: '';
    width: 0;
    height: 0;
    border-right: 8px solid rgba(255, 255, 255, 0.6);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    margin-right: 2px;
}

.is-scrubber-thumb.is-visible {
    opacity: 1;
}

/* glass-interactive class provides hover/press scale feedback */

.is-scrubber-thumb.is-dragging {
    cursor: grabbing;
}

/* MARK: Cell Content (common patterns) */

/* Video indicator */
.is-cell-video-indicator {
    position: absolute;
    bottom: 4px;
    right: 4px;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    font-size: 11px;
    color: #fff;
}

/* Selection overlay */
.is-cell-selected::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid var(--is-selection-color, #007AFF);
    border-radius: inherit;
    pointer-events: none;
}

/* MARK: - */
/* MARK: Cell Interaction Effects */

/* Interaction border overlay (shared for hover and active) */
.is-cell::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 3px solid rgba(255, 255, 255, 0.5);
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease-out;
}

/* Desktop only - hover effect */
@media (hover: hover) and (pointer: fine) {
    .is-cell:hover::after {
        opacity: 1;
    }
}

/* Touch devices - tap feedback */
@media (hover: none) and (pointer: coarse) {
    .is-cell:active::after {
        opacity: 1;
        transition: opacity 0.05s ease-out;
    }
}