/* ============================================
   hmi-events.css — алерты и скринсейвер

   ВАЖНО: алерт-бар абсолютно позиционирован
   поверх безеля — НЕ двигает контент
   ============================================ */

/* ── СТРОКА АЛЕРТОВ ─────────────────────────── */
/* Живёт в безеле между логотипом и HMI */
.hmi-alert-bar {
    position: absolute;  /* Поверх безеля — не двигает ничего */
    top: 1.2vh;          /* Выровнено по высоте с логотипом */
    left: 50%;
    transform: translateX(-50%); /* По центру */
    width: 55%;          /* Занимает среднюю часть безеля */
    z-index: 50;         /* Поверх всего в безеле */

    display: flex;
    align-items: center;
    gap: 1vh;
    padding: 0.4vh 1.2vh;
    border: 0.1vh solid #ff8800;
    border-radius: 0.3vh;
    font-family: monospace;
    font-size: 1.1vh;
    letter-spacing: 0.05vh;

    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Не перехватывает клики */
}

/* Код события */
.alert-code {
    font-weight: bold;
    font-size: 1.1vh;
    flex-shrink: 0;
}

/* Время события */
.alert-time {
    font-size: 1vh;
    flex-shrink: 0;
}

/* Текст события */
.alert-msg {
    flex: 1;
    font-size: 1.1vh;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── СКРИНСЕЙВЕР ────────────────────────────── */
#hmi-screensaver {
    position: absolute;  /* внутри родителя */ /*fixed;на весь экран браузера */
    inset: 0;
    background: #000;
    z-index: 9999;
    display: none;
    cursor: pointer;
    background-image:
        linear-gradient(rgba(0,255,0,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,0,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
}

#hmi-screensaver.active {
    display: block;
    animation: ssFadeIn 0.5s ease;
}

@keyframes ssFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ss-label {
    position: absolute;
    font-family: 'Courier New', monospace;
    font-size: 4vh;
    font-weight: bold;
    color: #00ff00;
    text-shadow: 0 0 2vh #00ff00;
    letter-spacing: 0.2vh;
    white-space: nowrap;
    pointer-events: none;
    transition: color 0.3s, text-shadow 0.3s;
    user-select: none;
}

.ss-sub {
    position: absolute;
    bottom: 5vh;
    left: 50%;
    transform: translateX(-50%);
    color: #00ff0033;
    font-family: monospace;
    font-size: 1.2vh;
    letter-spacing: 0.2vh;
    white-space: nowrap;
    pointer-events: none;
}

#hmi-screensaver::after {
    content: "// Нажмите для продолжения работы";
    position: absolute;
    bottom: 3vh;
    left: 50%;
    transform: translateX(-50%);
    color: #ffffff22;
    font-family: monospace;
    font-size: 1vh;
    letter-spacing: 0.15vh;
    white-space: nowrap;
    pointer-events: none;
    animation: ssHintBlink 3s infinite;
}

@keyframes ssHintBlink {
    0%, 100% { opacity: 0.3; }
    50%       { opacity: 0.8; }
}

/* ── SPLASH SCREEN — панель вырастает из точки на фоне ── */

/* Начальное состояние — маленькая точка в правом нижнем углу фона
   transform-origin указывает откуда растём:
   85% по горизонтали, 78% по вертикали — там стоит панель на фото */
.hmi-container {
    opacity: 0;
    transform: scale(0.035);
    transform-origin: 89.5% 85.5%;
    transition:
        opacity  0.1s ease-in 0.01s,
        transform 2s cubic-bezier(0.6, 0.01, 1, 1);
    /* cubic-bezier(0.16,1,0.3,1) — резкий старт, мягкое торможение
       как будто панель выдвигается из стойки */
}

/* Финальное состояние — полный размер, появилась */
.hmi-container.hmi-loaded {
    opacity: 1;
    transform: scale(1);
}