:root {
    --void: #020204;
    --moon-light: #e0e6ed; 
    --accent: #a8c0ff; 
    --glow: rgba(168, 192, 255, 0.9);
    --glow-soft: rgba(168, 192, 255, 0.4);
    
    --size: 85vmin; 
    --depth: calc(var(--size) / 2);
}

body {
    margin: 0; padding: 0; background-color: var(--void); color: var(--moon-light);
    font-family: 'Montserrat', sans-serif;
    overflow: hidden; height: 100vh; width: 100vw;
    touch-action: none; user-select: none; cursor: none;
}

#preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 9999; display: flex; justify-content: center; align-items: center; transition: opacity 1s ease-out; }
.loader-content { text-align: center; }
.loader-logo { font-size: 10vmin; font-weight: 900; letter-spacing: 10px; color: transparent; -webkit-text-stroke: 1px var(--moon-light); animation: text-pulse-glow 2s infinite; }
.loader-status { margin-top: 20px; font-family: 'Montserrat', monospace; font-size: 12px; color: var(--accent); letter-spacing: 2px; }

/* === НАВИГАЦИЯ === */
.nav-arrows { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100; }
.arrow-left, .arrow-right, .arrow-down {
    position: absolute; width: 40px; height: 40px;
    color: var(--accent); opacity: 0.4; 
    filter: drop-shadow(0 0 10px var(--glow));
    cursor: pointer; pointer-events: auto; transition: all 0.3s ease;
}
.arrow-left svg, .arrow-right svg, .arrow-down svg { width: 100%; height: 100%; }
.arrow-left:hover, .arrow-right:hover, .arrow-down:hover { opacity: 1; transform: scale(1.2); filter: drop-shadow(0 0 20px var(--accent)); }

/* Позиция ПК */
.arrow-left { top: 50%; left: 30px; margin-top: -20px; animation: pulse-left 3s infinite; }
.arrow-right { top: 50%; right: 30px; margin-top: -20px; animation: pulse-right 3s infinite; }
.arrow-down { bottom: 40px; left: 50%; margin-left: -20px; animation: pulse-down 3s infinite; }

@keyframes pulse-left { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-10px); } }
@keyframes pulse-right { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px); } }
@keyframes pulse-down { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }

/* === ССЫЛКИ ТЕЛЕМЕТРИИ === */
.telemetry-links-block {
    margin-top: 15px;
    pointer-events: auto;
}
.telemetry-link {
    color: var(--moon-light);
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    margin: 0 10px;
    opacity: 0.7;
    transition: 0.3s;
    border-bottom: 1px solid transparent;
    letter-spacing: 1px;
    font-weight: 300;
}
.telemetry-link:hover {
    color: var(--accent);
    opacity: 1;
    text-shadow: 0 0 10px var(--accent);
    border-bottom-color: var(--accent);
}

.base-link { pointer-events: auto; background: rgba(0,0,0,0.3); border: 1px solid rgba(168, 192, 255, 0.1); color: var(--moon-light); padding: 10px 25px; border-radius: 20px; font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 12px; letter-spacing: 2px; cursor: none; display: flex; align-items: center; gap: 10px; transition: 0.4s ease; opacity: 1; transform: translateY(0); box-shadow: 0 0 20px var(--glow-soft); }
.base-link.hidden { opacity: 0; pointer-events: none; transform: translateY(-20px); }
.base-link:hover { background: rgba(168, 192, 255, 0.1); border-color: var(--accent); color: #fff; box-shadow: 0 0 30px var(--glow), inset 0 0 20px var(--glow-soft); }
.base-icon { width: 10px; height: 10px; border: 1px solid currentColor; border-radius: 50%; position: relative; display: flex; justify-content: center; align-items: center; }
.base-icon span { width: 2px; height: 2px; background: currentColor; border-radius: 50%; animation: radar-ping 1.5s infinite; }
@keyframes radar-ping { 0% { box-shadow: 0 0 0 0 currentColor; opacity: 1; } 100% { box-shadow: 0 0 0 10px transparent; opacity: 0; } }

#sound-toggle { position: fixed; top: 30px; right: 30px; z-index: 100; display: flex; align-items: center; gap: 15px; cursor: none; pointer-events: auto; opacity: 0.9; transition: 0.3s; flex-direction: row-reverse; }
#sound-toggle:hover { opacity: 1; text-shadow: 0 0 15px var(--accent); }
.sound-icon { font-size: 10px; font-family: 'Montserrat', sans-serif; letter-spacing: 1px; font-weight: 600; white-space: nowrap; }
.sound-waves span { display: inline-block; width: 2px; height: 10px; background: var(--accent); margin-right: 2px; animation: sound-anim 1s infinite; box-shadow: 0 0 5px var(--accent); }
.sound-waves span:nth-child(2) { animation-delay: 0.2s; }
.sound-waves span:nth-child(3) { animation-delay: 0.4s; }
@keyframes sound-anim { 0%, 100% { height: 5px; } 50% { height: 15px; } }

.space-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; background: radial-gradient(ellipse at bottom, #151920 0%, #000000 100%); }
.stars-1, .stars-2, .stars-3 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 2px; height: 2px; background: transparent; animation: animStar linear infinite; }
.stars-1 { width: 1px; height: 1px; opacity: 1; box-shadow: 10vw 10vh #fff, 20vw 80vh #fff, 80vw 10vh #fff, 90vw 90vh #fff, 30vw 30vh #fff, 60vw 40vh #fff, 50vw 50vh #fff, 15vw 25vh #fff, 85vw 75vh #fff, 35vw 15vh #fff; animation-duration: 60s; }
.stars-2 { width: 2px; height: 2px; opacity: 0.9; box-shadow: 12vw 15vh #fff, 40vw 60vh #fff, 70vw 20vh #fff, 15vw 85vh #fff, 60vw 10vh #fff, 30vw 80vh #fff; animation-duration: 100s; }
.stars-3 { width: 3px; height: 3px; opacity: 0.7; box-shadow: 5vw 90vh #fff, 95vw 10vh #fff, 30vw 40vh #fff, 70vw 60vh #fff; animation-duration: 150s; }
@keyframes animStar { from { transform: translateY(0px); } to { transform: translateY(-200px); } }
#dust-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: 0.8; }
.noise-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48ZmlsdGVyIGlkPSJnoiPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjY1IiBudW1PY3RhdmVzPSIzIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI2cpIiBvcGFjaXR5PSIwLjAzIi8+PC9zdmc+'); opacity: 0.25; pointer-events: none; z-index: 2; }
.scene { width: 100vw; height: 100vh; perspective: 1800px; display: flex; justify-content: center; align-items: center; z-index: 5; }

.cube { width: var(--size); height: var(--size); position: relative; transform-style: preserve-3d; transition: transform 1.8s cubic-bezier(0.1, 0.9, 0.1, 1); }
.cube__face { position: absolute; width: var(--size); height: var(--size); background: rgba(8, 10, 14, 0.65); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 150px rgba(0,0,0,0.95), 0 0 40px rgba(168, 192, 255, 0.08); backface-visibility: hidden; }
.cube__face::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%); opacity: 0.6; pointer-events: none; }
.cube__face--front  { transform: rotateY(0deg) translateZ(var(--depth)); }
.cube__face--back   { transform: rotateY(180deg) translateZ(var(--depth)); }
.cube__face--right  { transform: rotateY(90deg) translateZ(var(--depth)); }
.cube__face--left   { transform: rotateY(-90deg) translateZ(var(--depth)); }
.cube__face--top    { transform: rotateX(90deg) translateZ(var(--depth)); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(var(--depth)); }

/* === БАЗОВЫЙ ЦЕНТР КОНТЕНТА === */
.content-layer { 
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 
    width: var(--size); height: var(--size); 
    display: flex; flex-direction: column; justify-content: center; align-items: center; 
    text-align: center; z-index: 10; pointer-events: none; 
    opacity: 0; transition: opacity 0.8s ease, transform 0.8s ease; 
}
.content-layer.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.content-layer.hidden { opacity: 0; transform: translate(-50%, -50%) scale(1.1); filter: blur(20px); }

.top-label { font-weight: 300; font-size: 3vmin; letter-spacing: 0.2em; text-transform: uppercase; color: var(--moon-light); opacity: 0.9; margin-bottom: 20px; text-shadow: 0 0 15px var(--glow); }
.logo-img { width: 65vmin; max-width: none; object-fit: contain; filter: drop-shadow(0 0 35px rgba(168, 192, 255, 0.3)); margin-bottom: 20px; }
.base-logo-img { width: 250px; height: 250px; object-fit: contain; margin-bottom: 25px; filter: drop-shadow(0 0 25px rgba(168, 192, 255, 0.4)); }
.slogan { font-weight: 200; font-size: 3vmin; letter-spacing: 0.15em; text-transform: uppercase; color: var(--moon-light); opacity: 1; text-shadow: 0 0 20px var(--glow), 0 0 40px var(--accent); }

/* ИМЯ АРТИСТА (H2) */
h2 { 
    font-size: 7vmin; font-weight: 100; text-transform: uppercase; 
    margin-bottom: 7px; 
    letter-spacing: 0.2em; color: #fff; text-shadow: 0 0 30px var(--glow), 0 0 60px rgba(168, 192, 255, 0.6); animation: text-pulse-glow 4s infinite; 
}

.meta-label { font-size: 1.2vmin; color: var(--accent); text-transform: uppercase; letter-spacing: 0.4em; margin-bottom: 15px; display: inline-block; border-bottom: 1px solid rgba(168, 192, 255, 0.2); padding-bottom: 5px; text-shadow: 0 0 10px var(--glow-soft); }
.meta-value { font-size: 3vmin; margin-bottom: 50px; font-weight: 300; color: #fff; letter-spacing: 0.05em; line-height: 1.4; text-shadow: 0 0 10px rgba(0,0,0,0.5); }

/* ТИТЛ АРТИСТА (ПК): Отступ сверху */
.meta-label.artist-title {
    margin-top: 8vh;
}

/* ФОТО АРТИСТОВ (ПК): 36vmin */
.artist-img { 
    width: 36vmin; height: 36vmin; 
    object-fit: cover; border-radius: 50%; border: none; 
    box-shadow: 0 0 15px var(--accent), 0 0 40px var(--glow); 
    margin-bottom: 20px; 
    margin-top: 20px;
}

.btn { pointer-events: auto; display: inline-flex; justify-content: center; align-items: center; padding: 22px 60px; border: 1px solid rgba(168, 192, 255, 0.4); color: var(--moon-light); text-decoration: none; font-size: 1.4vmin; text-transform: uppercase; letter-spacing: 0.3em; transition: all 0.4s ease; background: transparent; position: relative; overflow: hidden; box-shadow: 0 0 20px rgba(168, 192, 255, 0.1); text-shadow: 0 0 10px var(--glow-soft); }
.btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transition: 0.5s; }
.btn:hover::before { left: 100%; }
.btn:hover { border-color: var(--accent); box-shadow: 0 0 50px rgba(168, 192, 255, 0.4), inset 0 0 20px rgba(168, 192, 255, 0.2); color: #fff; }

.cursor-dot, .cursor-outline { pointer-events: none; position: fixed; transform: translate(-50%, -50%); border-radius: 50%; z-index: 999; }
.cursor-dot { width: 6px; height: 6px; background: var(--accent); box-shadow: 0 0 15px var(--accent); }
.cursor-outline { width: 50px; height: 50px; border: 1px solid rgba(168, 192, 255, 0.4); transition: 0.2s; box-shadow: 0 0 10px rgba(168, 192, 255, 0.1); }
body.hovering .cursor-outline { width: 80px; height: 80px; background: rgba(168, 192, 255, 0.05); border-color: var(--accent); }

.ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 20; display: flex; flex-direction: column; justify-content: space-between; padding: 40px; box-sizing: border-box; }
.top-bar { display: flex; justify-content: center; width: 100%; }
.bottom-bar { display: flex; justify-content: space-between; align-items: flex-end; }
.mono-text { font-family: 'Montserrat', monospace; font-size: 11px; letter-spacing: 2px; color: rgba(255,255,255,0.7); white-space: nowrap; }
.hint-block { text-align: right; }
.hint-text { font-family: 'Montserrat', monospace; font-size: 11px; letter-spacing: 1px; color: rgba(255,255,255,0.7); line-height: 1.8; display: block; }

@keyframes text-pulse-glow { 0%, 100% { text-shadow: 0 0 25px var(--glow), 0 0 50px rgba(168, 192, 255, 0.5); opacity: 1; } 50% { text-shadow: 0 0 10px var(--glow), 0 0 20px rgba(168, 192, 255, 0.2); opacity: 0.9; } }

/* === МОБИЛЬНАЯ АДАПТАЦИЯ (ТЕЛЕФОНЫ) === */
@media (max-width: 768px) {
    .nav-arrows { opacity: 0; transition: opacity 0.5s; }
    .nav-arrows.active { opacity: 1; }
    .arrow-left, .arrow-right, .arrow-down { pointer-events: none; }

    /* 1. БАЗОВАЯ ПОЗИЦИЯ: 58% */
    .content-layer { 
        top: 58%; 
        gap: 1.5vh; 
        justify-content: center; 
    }

    /* 2. ГЛАВНАЯ И БАЗА: Поднимаем на 1% (60%) */
    .content-layer.lowered-mobile { top: 59%; }

    .top-bar { margin-top: 60px; }
    
    .top-label, h2, .meta-label, .meta-value, .base-logo-img, .artist-img, .logo-img, .slogan {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .meta-label.artist-title { margin-top: 0 !important; }

    .top-label { font-size: 4vmin; } 
    .logo-img { width: 70vmin; margin-bottom: 10px; } 
    .slogan { font-size: 5vmin; }
    
    .base-logo-img, .artist-img { width: 35vmin; height: 35vmin; margin-bottom: 5px; margin-top: 10px; }
    .meta-label { font-size: 2.5vmin; letter-spacing: 0.2em; margin-bottom: 5px; }
    h2 { font-size: 8vmin; margin-bottom: 5px; } 
    .meta-value { font-size: 4vmin; margin-bottom: 10px; } 
    .btn { font-size: 3.5vmin; padding: 16px 30px; margin-top: 5px !important; width: 80%; max-width: 300px; text-align: center; }
    
    .telemetry-links-block { margin-top: 15px; }
    .telemetry-link { font-size: 3.5vmin; margin: 0 8px; }
    
    .ui-layer { padding: 20px; }
    .bottom-bar { flex-direction: column; align-items: center; gap: 10px; }
    .hint-block { display: none; }
    .cursor-dot, .cursor-outline { display: none; } body { cursor: auto; }
    
    /* 3. СТРЕЛКИ МОБИЛЬНЫЕ */
    /* Боковые: 55% */
    .arrow-left { 
        top: 55%; 
        width: 30px; height: 30px; 
        margin-top: -15px; 
        left: 2%; 
    }
    .arrow-right { 
        top: 55%; 
        width: 30px; height: 30px; 
        margin-top: -15px; 
        right: 2%; 
    }
    /* Нижняя: 6% */
    .arrow-down { 
        bottom: 6%; 
        width: 60px; height: 30px; 
    }
}