/* VN Effects — Screen overlays for tint, vignette, shake, flash */

/* === TINT OVERLAY === */
.vn-effect-tint {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease, background-color 0.5s ease;
    z-index: 1;
}

/* === VIGNETTE === */
.vn-effect-vignette {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse at center,
        transparent 40%,
        rgba(0, 0, 0, 0.3) 70%,
        rgba(0, 0, 0, 0.7) 100%
    );
    transition: opacity 0.8s ease;
    z-index: 2;
}

/* === FLASH === */
.vn-effect-flash {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
}

/* === SCREEN SHAKE === */
@keyframes vn-shake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(var(--shake-x, 5px), var(--shake-y, 3px)); }
    20% { transform: translate(calc(-1 * var(--shake-x, 5px)), calc(-1 * var(--shake-y, 3px))); }
    30% { transform: translate(var(--shake-x, 5px), 0); }
    40% { transform: translate(calc(-1 * var(--shake-x, 5px)), var(--shake-y, 3px)); }
    50% { transform: translate(var(--shake-x, 5px), calc(-1 * var(--shake-y, 3px))); }
    60% { transform: translate(calc(-1 * var(--shake-x, 5px)), 0); }
    70% { transform: translate(0, var(--shake-y, 3px)); }
    80% { transform: translate(var(--shake-x, 5px), calc(-1 * var(--shake-y, 3px))); }
    90% { transform: translate(calc(-1 * var(--shake-x, 5px)), var(--shake-y, 3px)); }
}

/* === FADE TRANSITIONS (for scene changes) === */
.vn-fade-enter {
    animation: vn-fade-in 0.8s ease forwards;
}

.vn-fade-exit {
    animation: vn-fade-out 0.8s ease forwards;
}

@keyframes vn-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes vn-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* === DISSOLVE (crossfade between two elements) === */
.vn-dissolve-in {
    animation: vn-fade-in 1s ease forwards;
}

.vn-dissolve-out {
    animation: vn-fade-out 1s ease forwards;
}

/* === SLIDE TRANSITIONS === */
.vn-slide-left-enter {
    animation: vn-slide-in-left 0.6s ease forwards;
}

.vn-slide-right-enter {
    animation: vn-slide-in-right 0.6s ease forwards;
}

@keyframes vn-slide-in-left {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes vn-slide-in-right {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* === WIPE TRANSITION === */
.vn-wipe-enter {
    animation: vn-wipe 0.8s ease forwards;
}

@keyframes vn-wipe {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

/* === MODAL PANELS === */
.vn-modal-panel {
    background: rgba(10, 10, 25, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 1.5rem;
    min-width: 320px;
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.vn-save-slot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    padding: 10px 14px;
    color: #ccc;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s;
}

.vn-save-slot:hover {
    background: rgba(255, 255, 255, 0.08);
}

.vn-save-slot.empty {
    opacity: 0.4;
    font-style: italic;
}

.vn-save-slot-actions {
    display: flex;
    gap: 6px;
}