/* ===== BASE ===== */
body {
    margin: 0;
    font-family: 'Arial', sans-serif;
    background: #050816;
    color: #ffffff;
    overflow: hidden;
}

/* ===== BACKGROUND ===== */
.bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

/* кубы */
.cube {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 20px;
    backdrop-filter: blur(20px);
    transform: rotate(25deg);
    opacity: 0.5;
}

/* разные цвета */
.c1 {
    background: linear-gradient(135deg, #00d4ff, #4361ee);
    top: 15%;
    left: 20%;
    animation: float1 12s ease-in-out infinite alternate;
}

.c2 {
    background: linear-gradient(135deg, #7b2cff, #00ffa3);
    bottom: 10%;
    right: 15%;
    animation: float2 14s ease-in-out infinite alternate;
}

.c3 {
    background: linear-gradient(135deg, #00ffa3, #00d4ff);
    top: 55%;
    left: 55%;
    animation: float3 16s ease-in-out infinite alternate;
}

/* движение */
@keyframes float1 {
    from { transform: translate(0,0) rotate(25deg); }
    to { transform: translate(120px, -80px) rotate(35deg); }
}

@keyframes float2 {
    from { transform: translate(0,0) rotate(25deg); }
    to { transform: translate(-140px, 100px) rotate(15deg); }
}

@keyframes float3 {
    from { transform: translate(0,0) rotate(25deg); }
    to { transform: translate(80px, 120px) rotate(45deg); }
}

/* центральное свечение */
body::before {
    content: "";
    position: fixed;
    inset: 0;

    background: radial-gradient(
        circle at center,
        rgba(0,212,255,0.2),
        transparent 60%
    );

    animation: pulse 6s ease-in-out infinite alternate;
    z-index: 1;
    pointer-events: none;
}

@keyframes pulse {
    0%   { opacity: 0.4; transform: scale(1); }
    100% { opacity: 0.8; transform: scale(1.2); }
}

/* затемнение */
body::after {
    content: "";
    position: fixed;
    inset: 0;

    background: radial-gradient(
        ellipse at center,
        rgba(0,0,0,0.05),
        rgba(0,0,0,0.6),
        rgba(0,0,0,0.9)
    );

    z-index: 1;
    pointer-events: none;
}

/* ===== CONTENT ===== */
.container {
    position: relative;
    z-index: 2;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    animation: fadeIn 1.5s ease forwards;
    opacity: 0;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

h1 {
    font-size: 2.2rem;
    color: #00d4ff;

    text-shadow:
        0 2px 10px rgba(0,0,0,0.9),
        0 0 25px rgba(0,212,255,0.4);
}

p {
    margin-top: 12px;
    font-size: 1.05rem;
    color: rgba(255,255,255,0.85);
    text-shadow: 0 2px 6px rgba(0,0,0,0.7);
}

.footer {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.6);
    z-index: 2;
}