@charset "UTF-8";

/* --- ОБЩИЕ СТИЛИ --- */
#karusel_izobrazheniya * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font: 12px/15px sans-serif;
}

div#karusel_izobrazheniya {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    position: relative;
    background: #e0e0e0;
    perspective: 3000px;
    --slider-height: 600px;
    --tz: 300px;
    border-radius: 20px;
    box-sizing: border-box;
    overflow: hidden;
    
    /* --- ЛОГИКА ВИДИМОСТИ --- */
    /* Анимация по умолчанию стоит на паузе */
    --state: paused;
}

/* Когда контейнер в зоне видимости, переключаем переменную на running */
/* Это работает в современных браузерах через Scroll Timeline */
@supports (view-timeline: --appearance) {
    div#karusel_izobrazheniya {
        view-timeline: --appearance;
        animation: set_running linear;
        animation-timeline: --appearance;
        animation-range: entry 0% exit 100%;
    }
}

@keyframes set_running {
    from, to { --state: running; }
}

/* --- ПРИМЕНЕНИЕ СОСТОЯНИЯ --- */
div#karusel_izobrazheniya ol,
div#karusel_izobrazheniya li::after,
div#karusel_izobrazheniya span.progress-bar {
    animation-play-state: var(--state, running);
}

/* --- ОСТАНОВКА ПРИ НАВЕДЕНИИ (Приоритет над видимостью) --- */
div#karusel_izobrazheniya:hover ol,
div#karusel_izobrazheniya:hover li::after,
div#karusel_izobrazheniya:hover span.progress-bar {
    animation-play-state: paused !important;
}

/* --- КОНТЕЙНЕР КУБА --- */
div#karusel_izobrazheniya ol {
    list-style: none;
    width: 100%;
    height: var(--slider-height);
    position: relative;
    margin: 0;
    padding: 0;
    transform-style: preserve-3d;
    transform: translateZ(calc(-1 * var(--tz))); 
    animation: cube_rotation 16s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}

/* --- ГРАНИ (li) --- */
div#karusel_izobrazheniya li {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #ffffff;
    backface-visibility: hidden;
    border-radius: 20px;
}

/* СЛОЙ ТЕНИ */
div#karusel_izobrazheniya li::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 2;
    pointer-events: none;
    opacity: 0; 
    animation: shadow_only_hidden 16s linear infinite;
}

/* --- СИНХРОНИЗАЦИЯ --- */
div#karusel_izobrazheniya li:nth-child(1) { transform: rotateX(0deg) translateZ(var(--tz)); }
div#karusel_izobrazheniya li:nth-child(1)::after { animation-delay: 0s; }

div#karusel_izobrazheniya li:nth-child(2) { transform: rotateX(-90deg) translateZ(var(--tz)); }
div#karusel_izobrazheniya li:nth-child(2)::after { animation-delay: -12s; }

div#karusel_izobrazheniya li:nth-child(3) { transform: rotateX(-180deg) translateZ(var(--tz)); }
div#karusel_izobrazheniya li:nth-child(3)::after { animation-delay: -8s; }

div#karusel_izobrazheniya li:nth-child(4) { transform: rotateX(-270deg) translateZ(var(--tz)); }
div#karusel_izobrazheniya li:nth-child(4)::after { animation-delay: -4s; }

div#karusel_izobrazheniya li:nth-child(n+5) { display: none; }

/* --- ИЗОБРАЖЕНИЯ --- */
div#karusel_izobrazheniya img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

/* --- ЗАГОЛОВКИ h2 --- */
div#karusel_izobrazheniya h2 {
    display: block;
    width: auto;
    line-height: 40px;
    padding: 0 20px;
    position: absolute;
    bottom: 40px;
    left: -100%;
    opacity: 0;
    color: white;
    font-size: 18px;
    background-color: #009cde;
    background-image: radial-gradient(circle farthest-side at center bottom,#009cde,#003087 125%);
    z-index: 5;
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#karusel_izobrazheniya h2 span{
    font-size:1.1rem;
}

div#karusel_izobrazheniya li:hover h2 { 
    left: 0;
    opacity: 1; 
}

/* --- ЦЕННИК h3 --- */
#karusel_izobrazheniya h3 {
    display: flex;
    width: auto;
    min-height: 40px;
    line-height: 40px;
    padding: 0 20px;
    position: absolute;
    top: 5px;
    right: 0%;
    color: white;
    font-size: 1rem;
    background-color: #009cde;
    background-image: radial-gradient(circle farthest-side at center bottom,#009cde,#003087 125%);
    z-index: 5;
    justify-content: center;
    align-items: center;
}

/* --- ПРОГРЕСС БАР --- */
div#karusel_izobrazheniya span.progress-bar {
    display: block;
    width: 0%;
    height: 4px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    background: #2eb1a8;
    animation: bar_expand 16s linear infinite;
}

/* --- АНИМАЦИИ --- */
@keyframes cube_rotation {
    0%, 20%    { transform: translateZ(calc(-1 * var(--tz))) rotateX(0deg); }
    25%, 45%   { transform: translateZ(calc(-1 * var(--tz))) rotateX(90deg); }
    50%, 70%   { transform: translateZ(calc(-1 * var(--tz))) rotateX(180deg); }
    75%, 95%   { transform: translateZ(calc(-1 * var(--tz))) rotateX(270deg); }
    100%       { transform: translateZ(calc(-1 * var(--tz))) rotateX(360deg); }
}

@keyframes shadow_only_hidden {
    0%, 20%      { opacity: 0; }   
    22%, 98%     { opacity: 0.5; } 
    100%         { opacity: 0; }
}

@keyframes bar_expand {
    0%, 25%, 50%, 75% { width: 0%; opacity: 1; }
    20%, 45%, 70%, 95% { width: 100%; opacity: 1; }
    21%, 46%, 71%, 96% { width: 100%; opacity: 0; }
    100% { width: 0%; }
}

/* АДАПТИВНОСТЬ */
@media screen and (max-width: 1140px) {
    div#karusel_izobrazheniya {
        --slider-height: calc(100vw * (600 / 1140));
        --tz: calc(var(--slider-height) / 2);
    }
}