/* ============================================
   screen-layout.css — карусель и футер главной

   ЛОГИКА АНИМАЦИИ:
   - Карусель на всю ширину когда сайдбар скрыт
   - При открытии панели: карусель уезжает вправо
   - Футер уезжает вниз при открытии панели
   ============================================ */

/* ── ГЛАВНАЯ ПАНЕЛЬ ─────────────────────────────── */
#panel-home {
    display: flex;
    flex-direction: column;
}

/* ── ЗОНА КАРУСЕЛИ ──────────────────────────────── */
.hmi-content {
    flex: 1;
    min-height: 0;
    position: relative;   /* Якорь для стрелок */
    overflow: hidden;
    background: radial-gradient(circle, #ffffff 0%, #f0f0f0 100%);

    /* Анимация ухода вправо */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s ease;
}

/* Карусель уезжает вправо при открытии боковой панели */
.hmi-content.slide-out {
    transform: translateX(6vh);
    opacity: 0;
    pointer-events: none;
}

/* ── КАРУСЕЛЬ: ОБЁРТКА И ТРЕК ───────────────────── */
.carousel-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.carousel-track {
    display: flex;
    height: 100%;
    will-change: transform;   /* GPU готовится — нет рывка при анимации */
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── ОДИН СЛАЙД ─────────────────────────────────── */
.slide {
    min-width: 100%;   /* Каждый слайд = 100% ширины обёртки */
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 8vh;    /* Отступ чтобы текст не залезал под стрелки */
    text-align: center;
    box-sizing: border-box;
}

/* Номер слайда: 01 / 04 */
.slide-num {
    color: #999;
    font-size: 1.5vh;
    letter-spacing: 0.3vh;
    margin-bottom: 1.5vh;
    font-family: monospace;
}

/* Заголовок слайда */
.slide-title {
    font-size: 4vh;
    line-height: 1.2;
    margin-bottom: 1.5vh;
    color: #1a1a1a;
}

/* Описание слайда */
.slide-desc {
    font-size: 1.8vh;
    color: #555;
}

/* ── СТРЕЛКИ КАРУСЕЛИ ───────────────────────────── */
/* Абсолютно поверх карусели — не влияют на ширину */
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 5vh;
    height: 8vh;
    background: linear-gradient(180deg, #444 0%, #222 100%);
    color: #00ff00;
    border: 0.2vh solid #555;
    border-radius: 0.5vh;
    cursor: pointer;
    font-size: 2.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0.85;

    /* Только визуальные переходы — не transform/opacity (они используются для hide) */
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s,
                opacity 0.3s ease, transform 0.3s ease;
}

.nav-arrow.left  { left: 1vh; }
.nav-arrow.right { right: 1vh; }

.nav-arrow:hover {
    border-color: #00ff00;
    box-shadow: 0 0 1.5vh rgba(0,255,0,0.4);
    opacity: 1;
}

.nav-arrow:active {
    background: #111;
    box-shadow: inset 0 0.2vh 1vh #000;
    transform: translateY(-50%) scale(0.95);
}

/* Скрытые стрелки — уезжают к краям */
.nav-arrow.hidden {
    opacity: 0;
    pointer-events: none;
}
.nav-arrow.left.hidden  { transform: translateY(-50%) translateX(-3vh); }
.nav-arrow.right.hidden { transform: translateY(-50%) translateX(3vh); }

/* ── ФУТЕР С КНОПКАМИ ───────────────────────────── */
.hmi-footer {
    display: flex;
    height: 8vh;
    flex-shrink: 0;
    background: #222;
    border-top: 0.2vh solid #444;
    padding: 1vh;
    gap: 1vh;
    box-sizing: border-box;

    /* Анимация ухода вниз */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s ease;
}

/* Футер уезжает вниз */
.hmi-footer.slide-out {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}

/* ── КНОПКИ ФУТЕРА ──────────────────────────────── */
.footer-btn {
    flex: 1;
    background: linear-gradient(180deg, #444, #222);
    border: 0.1vh solid #555;
    color: #eee;
    font-weight: bold;
    font-size: 1.4vh;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0.3vh;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.footer-btn:hover { background: #555; color: #fff; }

/* Кнопка "Вызов инженера" — жёлтая */
.footer-btn.highlight {
    background: linear-gradient(180deg, #f5a623, #d48806);
    color: #000;
    border-color: #f5a623;
}

.footer-btn.highlight:hover {
    background: linear-gradient(180deg, #ffb733, #e59800);
}

.footer-btn:active { background: #111; }

/* ── СЛАЙД С ФОНОВОЙ КАРТИНКОЙ ──────────────────── */

/* Текст слайда — белый поверх тёмного фильтра */
.slide-title {
    color: #ffffff !important; /* Перекрываем тёмный цвет — на картинке нужен белый */
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

.slide-desc {
    color: rgba(255,255,255,0.85) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

.slide-num {
    color: rgba(255,255,255,0.5) !important;
}

/* Подсказка "нажмите для просмотра" */
.slide-hint {
    margin-top: 2.5vh;
    color: rgba(255,255,255,0.4);
    font-size: 1.2vh;
    letter-spacing: 0.2vh;
    font-family: monospace;
    border: 0.1vh solid rgba(255,255,255,0.2);
    padding: 0.5vh 1.5vh;
    border-radius: 0.3vh;
    transition: color 0.2s, border-color 0.2s;
}

/* При наведении на слайд — подсказка ярче */
.slide:hover .slide-hint {
    color: rgba(255,255,255,0.8);
    border-color: rgba(255,255,255,0.5);
}

/* Лёгкое осветление слайда при наведении */
.slide:hover {
    filter: brightness(1.08);
    transition: filter 0.2s;
}