/* ==========================================================
   Strobe Effect – стили overlay
   ========================================================== */

/* -------------------- основной слой -------------------- */
.strobe-overlay {
    position: fixed;
    inset: 0;                     /* 0 px от всех краёв */
    pointer-events: none;
    z-index: 9999;
    background: var(--strobe-bg, rgba(255,255,255,0.2));
    mix-blend-mode: screen;       /* ярче, чем overlay */
    opacity: 0;                  /* управляется JS */
    transition: opacity .1s linear;
}

/* Тема‑зависимые цвета */
[data-theme="dark"]   .strobe-overlay { --strobe-bg: rgba(255,255,255,0.25); }
[data-theme="lounge"] .strobe-overlay { --strobe-bg: rgba(255,180,0,0.30); }

/* -------------------- «лучи» (конусный градиент) ------ */
.strobe-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: conic-gradient(
        from 0deg,
        rgba(255,255,255,0) 0deg,
        rgba(255,255,255,0.45) 45deg,
        rgba(255,255,255,0) 90deg
    );
    opacity: 0.6;                 /* умножается на основной opacity */
    mix-blend-mode: screen;
    pointer-events: none;
    animation: rotate-beam 12s linear infinite;
}
[data-theme="dark"] .strobe-overlay::before {
    background: conic-gradient(
        from 0deg,
        rgba(255,255,255,0) 0deg,
        rgba(255,255,255,0.35) 45deg,
        rgba(255,255,255,0) 90deg
    );
}
[data-theme="lounge"] .strobe-overlay::before {
    background: conic-gradient(
        from 0deg,
        rgba(255,180,0,0) 0deg,
        rgba(255,180,0,0.35) 45deg,
        rgba(255,180,0,0) 90deg
    );
}

/* вращение «лучей» */
@keyframes rotate-beam {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* -------------------- анимация мерцания ------------- */
.strobe-overlay.mode-constant,
.strobe-overlay.mode-beat,
.strobe-overlay.mode-beat-sync {   /* псевдоним для совместимости */
    animation: strobe-pulse 500ms infinite ease-in-out;
}
.strobe-overlay.mode-beat,
.strobe-overlay.mode-beat-sync {
    animation-duration: 250ms;   /* 4 Гц = 250 ms */
}

/* ключевые кадры */
@keyframes strobe-pulse {
    0%,100% { opacity: var(--strobe-opacity, 0.15); }
    50%     { opacity: 0; }
}

/* -------------------- кнопка стробоскопа ------------- */
#strobe-toggle.enabled {
    background: #ff6b6b !important;
    transform: scale(1.1);
}

/* -------------------- модальное окно ----------------- */
.modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 10000;
    max-width: 500px;
    width: 90%;
    text-align: center;
}
.modal h3 {
    margin-top: 0;
    color: #ff4757;
    font-size: 1.5rem;
}
.modal p {
    margin-bottom: 20px;
    line-height: 1.6;
    color: #333;
}
.modal button {
    margin: 0 10px;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1rem;
    transition: all .2s ease;
}
#strobe-accept { background: #2ed573; color: #fff; }
#strobe-accept:hover { background: #26d467; transform: translateY(-2px); }
#strobe-decline { background: #ff6b6b; color: #fff; }
#strobe-decline:hover { background: #ff5252; transform: translateY(-2px); }

/* -------------------- respects‑reduced‑motion --------- */
@media (prefers-reduced-motion: reduce) {
    .strobe-overlay,
    .strobe-overlay.active,
    .strobe-overlay.mode-constant,
    .strobe-overlay.mode-beat,
    .strobe-overlay.mode-beat-sync {
        animation: none !important;
        opacity: 0 !important;
    }
    .modal { animation: none !important; }
}