/* Base Themes */
:root {
    --font-casual: 'Gowun Dodum', sans-serif;
    --font-occult: 'Noto Serif KR', serif;
}

body {
    font-family: var(--font-casual);
}

/* -------------------------------------
   Theme 1: Casual (마음 다이어리)
-------------------------------------- */
.theme-casual {
    background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
    color: #4a5568;
}

.theme-casual .glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.theme-casual .header-border {
    border-color: #e2e8f0;
}

.theme-casual .preview-border {
    border-color: #cbd5e1;
}

.theme-casual .input-field {
    background: rgba(255, 255, 255, 0.9);
    border-color: #e2e8f0;
    color: #4a5568;
}

.theme-casual .input-field:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.3);
}

.theme-casual .btn-style {
    background: linear-gradient(to right, #a1c4fd, #c2e9fb);
    color: #1e3a8a;
}

/* -------------------------------------
   Theme 2: Occult (진짜 방법 사이트)
-------------------------------------- */
.theme-occult {
    background: #050505 url('https://www.transparenttextures.com/patterns/black-paper.png');
    color: #dc2626; /* Blood red */
}

.theme-occult body {
    font-family: var(--font-occult);
}

.theme-occult .glass-panel {
    background: rgba(15, 5, 5, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid #7f1d1d;
    box-shadow: 0 0 40px rgba(185, 28, 28, 0.5);
}

.theme-occult .header-border {
    border-color: #7f1d1d;
    border-bottom-width: 2px;
}

.theme-occult .preview-border {
    border-color: #991b1b;
    border-style: solid;
    box-shadow: inset 0 0 25px rgba(185, 28, 28, 0.4);
    background-color: rgba(185, 28, 28, 0.05);
}

.theme-occult .input-field {
    background: rgba(0, 0, 0, 0.8);
    border-color: #7f1d1d;
    color: #fca5a5;
    font-family: var(--font-occult);
}

.theme-occult .input-field::placeholder {
    color: #7f1d1d;
}

.theme-occult .input-field:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.4);
}

.theme-occult .btn-style {
    background: linear-gradient(to bottom, #7f1d1d, #450a0a);
    color: #fca5a5;
    border: 1px solid #dc2626;
    letter-spacing: 0.15em;
    font-family: var(--font-occult);
}

.theme-occult .btn-style:hover {
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.7);
    background: linear-gradient(to bottom, #991b1b, #450a0a);
}

/* -------------------------------------
   Glitch & Occult Animations
-------------------------------------- */
@keyframes glitch-anim {
    0% { background-color: rgba(220, 38, 38, 0.1); transform: translate(0) }
    20% { background-color: rgba(220, 38, 38, 0.4); transform: translate(-8px, 6px) }
    40% { background-color: transparent; transform: translate(-8px, -6px) }
    60% { background-color: rgba(220, 38, 38, 0.3); transform: translate(8px, 6px) }
    80% { background-color: transparent; transform: translate(8px, -6px) }
    100% { background-color: rgba(220, 38, 38, 0.1); transform: translate(0) }
}

.is-glitching {
    animation: glitch-anim 0.2s cubic-bezier(.25, .46, .45, .94) both infinite;
}

.glitch-overlay-active {
    opacity: 1 !important;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15),
        rgba(0, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent 2px
    );
}

/* TV Static Noise for Occult Mode */
.theme-occult::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 999;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
    opacity: 0.7;
}

/* Intense Cursing Animation */
@keyframes pulse-blood {
    0% { box-shadow: inset 0 0 0 rgba(220,38,38,0); }
    50% { box-shadow: inset 0 0 100px rgba(220,38,38,0.8); }
    100% { box-shadow: inset 0 0 0 rgba(220,38,38,0); }
}

.cursing-active {
    animation: pulse-blood 1s infinite;
}