/* --- CORE CONFIGURATION --- */
:root {
    --tonic-red: #8a0000;
    --tonic-gold: #d4af37;
    --tonic-black: #050505;
    --tonic-gray: #1a1a1a;
}

body {
    background-color: var(--tonic-black);
    color: #e5e5e5;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body.loaded {
    overflow-y: auto;
}

h1, h2, h3, h4, .font-tonic {
    font-family: 'Cinzel', serif;
}

/* --- ANIMATIONS & PARTICLES --- */
.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(212, 175, 55, 0.4); 
    border-radius: 50%;
    animation: float 15s infinite linear;
    top: 100%;
}

.particle.p1 { left: 10%; animation-delay: 0s; width: 6px; height: 6px; }
.particle.p2 { left: 30%; animation-delay: 2s; width: 3px; height: 3px; background: rgba(138, 0, 0, 0.4); }
.particle.p3 { left: 70%; animation-delay: 5s; width: 5px; height: 5px; }
.particle.p4 { left: 90%; animation-delay: 1s; width: 4px; height: 4px; background: rgba(138, 0, 0, 0.4); }

@keyframes float {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    20% { opacity: 0.8; }
    100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
}

.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.glow-text {
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

@keyframes attention-blink {
    0%, 100% { opacity: 1; text-shadow: 0 0 12px var(--tonic-red); color: var(--tonic-red); }
    50% { opacity: 0.7; text-shadow: 0 0 2px var(--tonic-gold); color: var(--tonic-gold); }
}

.animate-attention {
    animation: attention-blink 3s infinite ease-in-out;
}

/* --- COMPONENTS --- */
.quick-access-menu {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.3s ease-out;
    pointer-events: none;
}
.quick-access-menu.open {
    max-height: 500px;
    opacity: 1;
    pointer-events: auto;
    display: block !important;
}

.hero-pattern {
    background-image: radial-gradient(circle at center, transparent 0%, var(--tonic-black) 100%), 
                      linear-gradient(45deg, #111 25%, transparent 25%, transparent 75%, #111 75%, #111), 
                      linear-gradient(45deg, #111 25%, transparent 25%, transparent 75%, #111 75%, #111);
    background-position: 0 0, 0 0, 10px 10px;
    background-size: 20px 20px;
    opacity: 0.3;
}

/* --- SCROLLBAR --- */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--tonic-black);
}
::-webkit-scrollbar-thumb {
    background: var(--tonic-red);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--tonic-gold);
}

.pointer-events-auto {
    pointer-events: auto !important;
}

/* --- RAMALAN & STATS CSS --- */
#ramalan {
    position: relative;
    background-image: radial-gradient(circle at 50% 50%, #1a0505 0%, #000 100%);
}

#prophecy-text {
    opacity: 0;
    transition: opacity 1s ease-in-out;
    animation: textFadeIn 1s forwards;
}

@keyframes textFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.stat-number {
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 20px rgba(138, 0, 0, 0.4);
}

/* --- EASTER EGG SHAKE --- */
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.shake {
    animation: shake 0.5s;
    animation-iteration-count: infinite;
}

/* --- CUSTOM MODAL UTILS --- */
#custom-modal.show {
    opacity: 1;
    pointer-events: auto;
}
#custom-modal.show #modal-content {
    transform: scale(100%);
}

/* --- LOCATION GATE STYLES --- */
#location-gate {
    display: flex;
}
#location-gate.hidden-gate {
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}