:root {
    --bg-color: #030303;
    --text-main: #e0e0e0;
    --neon-green: #90FF22;
    --glass-bg: rgba(10, 10, 10, 0.7);
    --glass-border: rgba(144, 255, 34, 0.2);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    line-height: 1.6;
}

h1, h2, .cyber-button { font-family: 'Tektur', sans-serif; text-transform: uppercase; }
.blink { animation: blinker 1.5s linear infinite; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #888; margin-top: 15px; }
@keyframes blinker { 50% { opacity: 0; } }

/* === 0. СТАРТОВЫЙ ЭКРАН === */
#start-screen {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    background: #000; z-index: 9999; transition: opacity 0.5s;
}

.cyber-button {
    background: transparent; color: var(--neon-green);
    border: 2px solid var(--neon-green); padding: 20px 30px;
    font-size: 16px; font-weight: 900; letter-spacing: 2px;
    cursor: pointer; transition: all 0.3s;
}
.cyber-button:active { background: var(--neon-green); color: #000; }

/* Состояние неактивной кнопки при загрузке картинок */
.cyber-button.disabled {
    border-color: #555; color: #555; pointer-events: none; cursor: not-allowed;
}

.full-width { display: block; width: 100%; text-align: center; text-decoration: none; margin-top: 20px; }
.pulse-btn { box-shadow: 0 0 20px rgba(144,255,34,0.4); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(144,255,34,0.7); } 70% { box-shadow: 0 0 0 15px rgba(144,255,34,0); } 100% { box-shadow: 0 0 0 0 rgba(144,255,34,0); } }

/* === 1. ИНТРО (ВЗРЫВ) === */
#intro-cinematic {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #000; z-index: 9998; display: flex;
    justify-content: center; align-items: center;
    transition: opacity 1s ease;
}

#old-universe {
    position: relative; display: flex; flex-direction: column; gap: 30px; align-items: center;
}

/* ОБНОВЛЕННЫЙ СТИЛЬ СТАРЫХ ЛОГОТИПОВ (БЕЛЫЙ ФОН) */
.old-logo { 
    width: 200px; 
    background-color: #ffffff; 
    padding: 20px;
    border-radius: 10px;
    opacity: 0.85; 
    filter: grayscale(100%); 
    transition: transform 0.1s; 
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
}

/* Тряска перед взрывом */
.shake-active { animation: shake 0.1s infinite; }
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    25% { transform: translate(-1px, -2px) rotate(-1deg); }
    50% { transform: translate(-3px, 0px) rotate(1deg); }
    75% { transform: translate(2px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -1px) rotate(-1deg); }
}

/* Белая вспышка */
#white-flash {
    position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #fff; z-index: 10; opacity: 0;
}
.flash-active { animation: explodeFlash 1.5s ease-out forwards; }
@keyframes explodeFlash {
    0% { opacity: 0; transform: scale(1); }
    10% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0; transform: scale(2); display: none; }
}

/* Новая вселенная (Анимация логотипов) */
#new-universe { position: absolute; z-index: 11; display: flex; flex-direction: column; align-items: center; }
.intro-container { position: relative; width: 250px; height: 250px; }
.intro-layer {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    max-width: 100%; object-fit: contain; opacity: 0;
}
#intro-frame { width: 250px; }
#intro-bizon-text { width: 140px; }
#intro-dv-icon { width: 180px; }
#intro-dv-final-text { margin-top: 20px; width: 200px; opacity: 0; transition: all 0.5s ease; }

.hidden-layer { opacity: 0; pointer-events: none; }
.visible { opacity: 1 !important; transform: translate(-50%, -50%) scale(1) !important; }
.focus-active { animation: lensFocusSnap 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards; opacity: 1 !important; }
.visible-text { opacity: 1 !important; }

@keyframes lensFocusSnap {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(-180deg); filter: blur(10px); }
    60% { opacity: 1; filter: blur(0px); transform: translate(-50%, -50%) scale(1.05) rotate(15deg); }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}

.hidden { display: none !important; }


/* === 2. ОСНОВНАЯ ПРЕЗЕНТАЦИЯ === */
#main-presentation { position: relative; width: 100%; min-height: 100vh; padding-bottom: 50px; z-index: 1; }

/* Сетка Vaporwave */
.synth-grid {
    position: fixed; bottom: 0; left: 0; width: 100vw; height: 50vh;
    background: linear-gradient(transparent 0%, rgba(144, 255, 34, 0.2) 100%);
    background-size: 100% 100%; z-index: -1;
    transform: perspective(500px) rotateX(60deg);
    transform-origin: bottom;
    background-image: linear-gradient(to right, rgba(144,255,34,0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(144,255,34,0.1) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: gridMove 2s linear infinite;
}
@keyframes gridMove { from { background-position: 0 0; } to { background-position: 0 40px; } }

.pres-header { padding: 80px 20px 40px; text-align: center; }
.pres-header h1 { font-size: 3rem; line-height: 1; margin-bottom: 15px; }
.neon-text { color: var(--neon-green); text-shadow: 0 0 15px rgba(144, 255, 34, 0.6); }

.pres-section { padding: 0 20px 40px; }
.card { padding: 25px; border-radius: 16px; margin: 0 auto; max-width: 600px; }
.glass-panel { background: var(--glass-bg); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.05); }
.border-neon { border: 1px solid var(--glass-border); box-shadow: 0 0 30px rgba(144,255,34,0.1); }

.showcase-img { width: 100%; border-radius: 8px; margin-bottom: 20px; object-fit: cover; }
.card h2 { font-size: 1.5rem; margin-bottom: 10px; color: #fff; }
.card p { color: #bbb; font-size: 0.95rem; margin-bottom: 15px; }
.card ul { padding-left: 20px; color: #bbb; font-size: 0.95rem; }
.card li { margin-bottom: 8px; }
.card li strong { color: var(--neon-green); }

.final-cta { text-align: center; max-width: 600px; margin: 0 auto; padding-top: 40px; }
.final-cta p { color: #bbb; margin-bottom: 20px; }

footer { text-align: center; padding: 40px 20px; font-family: 'JetBrains Mono', monospace; color: #555; font-size: 12px; }

/* Анимация появления при скролле */
.fade-up { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.fade-up.in-view { opacity: 1; transform: translateY(0); }