/**
 * buttons.css — стили кнопок выбора, настройки текста узла, анимация глитча.
 */

/* --- Анимация появления с мерцанием и глитчем (фон рамки текста и кнопок) --- */
@keyframes frameFlickerIn {
    0% { opacity: 0; }
    8% { opacity: 0.5; }
    10% { opacity: 0.02; }
    14% { opacity: 0.6; }
    16% { opacity: 0; }
    20% { opacity: 0.65; }
    24% { opacity: 0.1; }
    28% { opacity: 0.75; }
    32% { opacity: 0.2; }
    36% { opacity: 0.85; }
    40% { opacity: 0.15; }
    44% { opacity: 0.9; filter: brightness(1.15); }
    46% { opacity: 0.1; filter: brightness(1); }
    52% { opacity: 0.95; }
    56% { opacity: 0.5; }
    62% { opacity: 1; filter: brightness(1); }
    100% { opacity: .5; filter: brightness(1); }
}

/* === РАМКА С L-УГОЛКАМИ ДЛЯ КНОПОК ВЫБОРА === */
.choice-btn-frame {
    --choice-frame-bg: rgba(var(--frame-rgb), 0.06);
    --choice-corner-color: rgba(var(--frame-rgb), 0.5);
    --choice-line-opacity: 0.1;
    /* шрифт и текст кнопки */
    --choice-btn-font: 'Noto Sans', sans-serif;
    --choice-btn-font-size: 15px;
    --choice-btn-color: rgba(185, 207, 211, 0.95);
    --choice-btn-opacity: 1;
    position: relative;
    display: block;
    width: 100%;
}

.choice-btn-frame .frame-background {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--choice-frame-bg);
    z-index: 0;
    border-radius: 0;
    animation: frameFlickerIn 1.2s ease-out forwards;
    animation-delay: 0.9s;
    opacity: 0;
}

.choice-btn-frame .corner-group {
    position: absolute;
    z-index: 4;
    animation: frameFlickerIn 1.2s ease-out forwards;
    animation-delay: 0.9s;
    opacity: 0;
}

.choice-btn-frame .corner-group .sq {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--choice-corner-color);
}

.choice-btn-frame .tl { top: 0; left: 0; }
.choice-btn-frame .tl .sq:nth-child(1) { top: 0; left: 0; }
.choice-btn-frame .tl .sq:nth-child(2) { top: 0; left: 0px; }
.choice-btn-frame .tl .sq:nth-child(3) { top: 0px; left: 0px; }
.choice-btn-frame .tl .sq:nth-child(4) { top: 0px; left: 3px; }
.choice-btn-frame .tl .sq:nth-child(5) { top: 0; left: 0px; width: 100px; height: 2px; }
.choice-btn-frame .tl .sq:nth-child(6) { top: 0px; left: 0px; width: 0px; height: 0px; }
.choice-btn-frame .bl { bottom: 0; left: 0; display: none; }
.choice-btn-frame .bl .sq:nth-child(2) { bottom: 0; left: 3px; }
.choice-btn-frame .bl .sq:nth-child(3) { bottom: 3px; left: 0; }
.choice-btn-frame .bl .sq:nth-child(4) { bottom: 3px; left: 3px; }
.choice-btn-frame .br { bottom: 0; right: 0; }
.choice-btn-frame .br .sq:nth-child(1) { bottom: 0; right: 0; }
.choice-btn-frame .br .sq:nth-child(2) { bottom: 0; right: 3px; }
.choice-btn-frame .br .sq:nth-child(3) { bottom: 3px; right: 0; }

.choice-btn-frame .line {
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: var(--choice-corner-color);
    z-index: 4;
    animation: frameFlickerIn 1.2s ease-out forwards;
    animation-delay: 5.0s;
    opacity: 0;
}

.choice-btn-frame .line.h-top { top: 0; }
.choice-btn-frame .line.h-bottom { bottom: 0; }

.choice-btn-frame .choice-btn {
    position: relative;
    z-index: 2;
    width: 100%;
    box-sizing: border-box;
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    font-family: var(--choice-btn-font);
    font-size: var(--choice-btn-font-size);
    color: var(--choice-btn-color);
    opacity: var(--choice-btn-opacity);
}

.choice-btn-frame.checkpoint-frame .frame-background {
    background: rgba(255, 215, 0, 0.2);
}
.deadend .choice-btn-frame .frame-background {
    background: rgba(244, 67, 54, 0.2);
}
.choice-btn-frame:hover .frame-background {
    background: rgba(90, 121, 205, 0.35);
}
.choice-btn-frame.checkpoint-frame:hover .frame-background {
    background: rgba(255, 165, 0, 0.3);
}
.deadend .choice-btn-frame:hover .frame-background {
    background: rgba(211, 47, 47, 0.3);
}

/* === НАСТРОЙКИ ТЕКСТА УЗЛА (шрифт, размер, междустрочный отступ) === */
.scene-content-frame .text {
    margin-bottom: 0;
    font-family: 'Univia Pro Thin', 'Merriweather', Georgia, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

.scene-content-frame .text p {
    margin-bottom: 22px;
    text-indent: 24px;
}