:root {
    color-scheme: dark;
    --ink: #f5f3ff;
    --lilac: #c8a3ff;
    --stage-y: 50%;
    --stage-width: min(800px, 70vw, 90vh);
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
    margin: 0;
    min-width: 320px;
    background: #090b21;
    color: var(--ink);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.cosmos {
    position: relative;
    isolation: isolate;
    min-height: 560px;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    background:
        radial-gradient(ellipse 50% 65% at 50% 100%, #202c74 0%, transparent 76%),
        radial-gradient(ellipse 50% 55% at 0% 62%, #161044 0%, transparent 78%),
        linear-gradient(125deg, #0d0c24 0%, #121634 55%, #080f28 100%);
}

.cosmos::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 75% at 50% 45%, transparent 49%, rgba(3, 5, 21, .34) 100%),
        linear-gradient(to bottom, rgba(4, 5, 18, .08), transparent 37%, rgba(6, 7, 28, .12));
}

.parallax-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.stage-frame {
    position: absolute;
    width: var(--stage-width);
    aspect-ratio: 800 / 680;
    left: 50%;
    top: var(--stage-y);
    transform: translate(-50%, -50%);
}

.sky {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.aurora-background {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.background-image .sky canvas { display: none; }
.background-procedural .sky { inset: -6%; }

.aurora-canvas,
.aurora-glow {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    transform: scale(1.035);
}

.aurora-glow {
    opacity: .58;
    filter: blur(clamp(20px, 3vw, 42px));
}

.aurora-canvas {
    opacity: .92;
    filter: blur(clamp(3px, .38vw, 5px));
}
.stars {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.star {
    position: absolute;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: #fff;
    opacity: .24;
    box-shadow: 0 0 7px 1px rgba(174, 203, 255, .55);
    transform: scale(.75);
}

.star--cross::before,
.star--cross::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: linear-gradient(90deg, transparent, rgba(240, 246, 255, .74), transparent);
    transform: translate(-50%, -50%);
}

.star--cross::before { width: 15px; height: 1px; }
.star--cross::after { width: 1px; height: 15px; }

.star.is-flashing { animation: star-flash 1.4s ease-in-out 1; }

@keyframes star-flash {
    0%, 100% { opacity: .24; transform: scale(.75); }
    45% { opacity: .87; transform: scale(1.45); }
}

.site-header {
    position: absolute;
    top: clamp(36px, 7.5vh, 86px);
    left: clamp(30px, 5vw, 96px);
    z-index: 8;
    width: clamp(260px, 24vw, 330px);
}

.site-name {
    display: flex;
    justify-content: space-between;
    margin: 0;
    font-size: clamp(27px, 2.2vw, 38px);
    font-weight: 300;
    line-height: 1;
}

.site-tagline {
    display: flex;
    align-items: center;
    gap: 17px;
    margin: 19px 0 0;
    color: #f3e9ff;
    font-size: clamp(10px, .85vw, 14px);
    font-weight: 400;
    letter-spacing: .43em;
    white-space: nowrap;
}

.site-tagline span {
    display: block;
    flex: 1;
    min-width: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--lilac), transparent);
}

.orbit-layer { z-index: 3; }
.orbit-layer--front { z-index: 5; }

.orbit-art {
    height: auto;
    overflow: visible;
}

.orbit-path {
    stroke: #b4a3d7;
    stroke-width: 1.45;
    opacity: .82;
    vector-effect: non-scaling-stroke;
}

.orbit-path--wide { stroke: #c3adf9; opacity: .91; }

.satellite-glow { fill: #b396ff; opacity: .28; }
.satellite-ring { fill: none; stroke: #c6b8f5; stroke-width: 1; opacity: .8; }
.satellite-core { fill: #fbf9ff; }

.planet-layer { z-index: 4; }

.planet {
    position: absolute;
    width: 46%;
    aspect-ratio: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.planet-aura {
    position: absolute;
    inset: -7%;
    border-radius: 50%;
    background: radial-gradient(circle, transparent 42%, rgba(119, 75, 242, .15) 60%, transparent 76%);
}

.planet img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(206, 182, 255, .65));
}

.scene-nav { z-index: 7; }

.scene-link {
    position: absolute;
    display: inline-flex;
    flex-direction: column;
    gap: 10px;
    width: max-content;
    max-width: 30%;
    color: #f6f4ff;
    font-size: clamp(18px, min(3vh, 2.4vw), 30px);
    font-weight: 300;
    line-height: 1.15;
    text-decoration: none;
    text-shadow: 0 1px 10px rgba(4, 6, 23, .9), 0 0 3px rgba(4, 6, 23, .85);
    pointer-events: auto;
    transition: color .25s ease, transform .25s ease;
}

.scene-link span {
    display: block;
    width: 56px;
    height: 2px;
    background: linear-gradient(90deg, #ded2ff, transparent);
    transform-origin: left;
    transition: width .25s ease, background .25s ease;
}

.scene-link:hover,
.scene-link:focus-visible { color: #d6bfff; transform: translateY(-3px); }
.scene-link:hover span,
.scene-link:focus-visible span { width: 100%; background: linear-gradient(90deg, #c5a7ff, #70dbfa); }
.scene-link:focus-visible { outline: 2px solid #b6e9ff; outline-offset: 8px; border-radius: 2px; }

.scene-link--video { left: 8%; top: 15%; }
.scene-link--songs { left: 77%; top: 21%; }
.scene-link--projects { left: 6%; top: 78%; }
.scene-link--contacts { left: 78%; top: 65%; }

.socials {
    position: absolute;
    z-index: 9;
    right: clamp(24px, 4vw, 70px);
    top: 50%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    transform: translateY(-50%);
}

.socials a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(245, 241, 255, .7);
    border-radius: 50%;
    background: rgba(11, 13, 39, .22);
    transition: background .25s ease, transform .25s ease, border-color .25s ease;
}

.socials a:hover,
.socials a:focus-visible {
    background: rgba(145, 98, 244, .28);
    border-color: #c4a8ff;
    transform: scale(1.1);
}

.socials a:focus-visible { outline: 2px solid #b6e9ff; outline-offset: 4px; }

.socials img {
    display: block;
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: grayscale(1) brightness(0) invert(1);
}

.socials img[src$=".svg"] { filter: grayscale(1); }

/* Панель отладки Django не относится к оформлению страницы. */
#djDebug { display: none !important; }

@media (max-width: 900px) {
    .socials { right: 18px; }
}

@media (max-width: 700px) {
    :root {
        --stage-y: 48%;
        --stage-width: min(94vw, 600px, 80vh);
    }

    .cosmos { min-height: 680px; }
    .aurora-background { object-position: 72% center; }
    .site-header { top: 31px; left: 26px; width: min(210px, calc(100vw - 52px)); }
    .site-name { font-size: clamp(22px, 6vw, 30px); }
    .site-tagline { margin-top: 13px; font-size: 10px; letter-spacing: .25em; gap: 9px; }

    .planet { width: 55%; }

    .scene-link {
        max-width: none;
        font-size: clamp(18px, 3.6vw, 22px);
    }

    .scene-link--video { left: 0; top: 15%; }
    .scene-link--songs { left: 77%; top: 21%; }
    .scene-link--projects { left: 1%; top: 78%; }
    .scene-link--contacts { left: 78%; top: 65%; }
    .scene-link span { width: 38px; }
    .socials {
        top: auto;
        right: 0;
        bottom: 28px;
        left: 0;
        flex-direction: row;
        justify-content: center;
        gap: 14px;
        transform: none;
    }

    .socials a { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}