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

body {
    background: #050510;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* GROS VORTEX DE FOND */
#bgBlock {
    position: absolute;
    inset: 50%;
    transform: translate(-50%, -50%);
    width: max(140vw, 140vh);
    height: max(140vw, 140vh);
    z-index: 0;
    border-radius: 50%;
    overflow: hidden;
}

#bg {
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    filter: blur(8px);
    opacity: 0.8;

    background: conic-gradient(
            from 0deg,
            #00d4ff,
            #0078ff,
            #8a00ff,
            #ff00d4,
            #00d4ff
    );
    animation: spin 30s linear infinite;

    /* Masque radial pour que ça se fonde dans le noir */
    -webkit-mask: radial-gradient(
            circle,
            rgba(0,0,0,1) 0%,
            rgba(0,0,0,1) 30%,
            rgba(0,0,0,0) 80%
    );
    mask: radial-gradient(
            circle,
            rgba(0,0,0,1) 0%,
            rgba(0,0,0,1) 30%,
            rgba(0,0,0,0) 80%
    );
}

/* BLOC CENTRAL CARRÉ */
main {
    position: relative;
    z-index: 1;
    width: min(60vw, 60vh);
    height: min(60vw, 60vh);
    border-radius: 1.5rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background: rgba(0, 0, 0, 0.75);
    box-shadow:
            0 0 40px rgba(0, 0, 0, 0.8),
            0 0 80px rgba(0, 120, 255, 0.3);
    backdrop-filter: blur(10px);
}

/* LÉGER HALO GRADIENT SUR LE BLOC (statique, pas de rotation) */
main::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: conic-gradient(
            from 0deg,
            rgba(0,212,255,0.1),
            rgba(138,0,255,0.4),
            rgba(255,0,212,0.3),
            rgba(0,212,255,0.1)
    );
    -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
    opacity: 0.9;
}

/* CONTENU */
h1 {
    font-size: clamp(2.8rem, 5vw, 4rem);
    color: #f5f7ff;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
}

p {
    color: #9ea5c6;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ANIMATIONS */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}