/**
 * Stories Component
 * Progress indicators (atoms): Done = full green, Current = animating green bar, Next = gray track.
 * Switches slide when the green bar reaches the end.
 * Design: Figma node 2635:36397, atoms 2635:36378
 */

.stories {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Только строка (без view): индикатор как единственный элемент */
.stories:not(:has(.stories__view)) .stories__indicator {
    margin: 0;
}

.stories__view {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-card);
    border: 1px solid var(--color-border-a8);
}

/* Индикатор поверх картинки: строка (кнопка + сегменты) 8px от нижнего левого угла */
.stories__view .stories__indicator-row {
    position: absolute;
    bottom: 8px;
    left: 8px;
    margin-top: 0;
    z-index: 2;
}

.stories__view .stories__indicator-row .stories__indicator {
    position: static;
    margin-top: 0;
}

/* Fallback: если индикатор без обёртки (прямой потомок view) */
.stories__view > .stories__indicator {
    position: absolute;
    bottom: 8px;
    left: 8px;
    margin-top: 0;
    z-index: 2;
}

.stories__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.stories__slide.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
}

/* Скрыт до получения размеров — предотвращает прыжок при открытии вертикальной картинки */
.stories__slide.is-active.is-preparing {
    opacity: 0;
    visibility: hidden;
}

/* Loading state: однопиксельная полоска загрузки по верхнему краю картинки */
.stories__slide.is-loading .stories__slide-loading {
    opacity: 1;
}

.stories__slide.is-loaded .stories__slide-loading {
    opacity: 0;
}

.stories__slide-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--color-content-a40);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 2;
    overflow: hidden;
}

.stories__slide-loading::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 30%;
    min-width: 80px;
    background-color: var(--color-subaccent);
    animation: stories-loading-bar 1.2s ease-in-out infinite;
}

@keyframes stories-loading-bar {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(433.333%);
    }
}

/* Размытая копия картинки под основной (60px blur) */
.stories__slide-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
}

.stories__slide-image {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Вертикальная картинка: показывать целиком по центру */
.stories--vertical .stories__slide-image {
    object-fit: contain;
    object-position: center;
}

.stories__slide-placeholder {
    width: 100%;
    aspect-ratio: 696 / 460;
    background-color: var(--color-card);
}

/* Обёртка: кнопка play/pause + сегменты (Figma 2635:36397) */
.stories__indicator-row {
    display: flex;
    align-items: center;
    gap: 7px;
}

.stories__play-pause {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-content);
}

.stories__play-pause svg {
    display: block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

/* Story indicator row — бегущая строка (зелёные полоски) */
.stories__indicator {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
    min-height: 4px;
}

/* Atom: single segment. Все 20px, активный 120px (Figma 2635:36378). Плавный переход при смене слайда */
.stories__segment {
    flex-shrink: 0;
    width: 20px;
    height: 4px;
    border-radius: 10px;
    background-color: var(--color-content-a40);
    overflow: hidden;
    transition: width 0.3s ease;
}

.stories__segment--done {
    background-color: var(--color-subaccent);
}

.stories__segment--current {
    width: 120px;
    background-color: var(--color-content-a40);
}

/* Бегущая строка: зелёная полоска заполняет сегмент */
.stories__segment--current:not(.is-loading) .stories__segment-fill {
    animation: stories-fill var(--stories-duration, 5s) linear forwards;
}

/* Пока слайд грузится — полоска не идёт */
.stories__segment--current.is-loading .stories__segment-fill {
    animation: none;
    width: 0;
}

.stories__segment--next {
    background-color: var(--color-content-a40);
}

.stories__segment-fill {
    display: block;
    height: 100%;
    width: 0;
    min-width: 0;
    border-radius: 10px;
    background-color: var(--color-subaccent);
    will-change: width;
}

.stories__segment--done .stories__segment-fill {
    width: 100%;
    animation: none;
}

@keyframes stories-fill {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* Paused state (e.g. on hover or when user navigates) */
.stories__segment--current.is-paused .stories__segment-fill {
    animation-play-state: paused;
}

.stories__caption {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-body-3-desktop);
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-content);
    padding-top: 10px;
    max-width: 100%;
    white-space: pre-wrap;
}

@media (max-width: 768px) {
    .stories__caption {
        font-size: var(--font-size-body-3-mobile);
        line-height: var(--line-height-body-3-mobile);
    }
}