/* =========================================================
   3DMAD
   STYLE.CSS
========================================================= */


/* =========================================================
   RESET
========================================================= */

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

html,
body {
    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #000;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

body {
    position: relative;

    color: #fff;
}


/* =========================================================
   ESPAÇO
========================================================= */

.space {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 50% 45%,
            #0b0c12 0%,
            #05060a 38%,
            #020204 70%,
            #000 100%
        );
}


/* =========================================================
   ESPAÇO
========================================================= 

.space {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 50% 45%,
            #0b0c12 0%,
            #05060a 38%,
            #020204 70%,
            #000 100%
        );
}


/* =========================================================
   NEBULOSA DISCRETA
========================================================= */

.space::before {

    content: "";

    position: absolute;

    width: 150vw;
    height: 90vh;

    left: -25vw;
    top: 5vh;

    pointer-events: none;

    background:

        radial-gradient(
            ellipse at 35% 50%,
            rgba(70, 90, 150, .025) 0%,
            rgba(60, 70, 140, .012) 30%,
            transparent 68%
        ),

        radial-gradient(
            ellipse at 70% 45%,
            rgba(150, 90, 190, .018) 0%,
            transparent 65%
        );

    filter: blur(65px);

    transform:
        rotate(-8deg);

    animation:
        nebulaMove 90s ease-in-out infinite alternate;

    z-index: 1;
}


@keyframes nebulaMove {

    from {

        transform:
            translate3d(-3%, 0, 0)
            rotate(-8deg)
            scale(1);
    }

    to {

        transform:
            translate3d(5%, -2%, 0)
            rotate(-6deg)
            scale(1.08);
    }
}


/* =========================================================
   CANVAS
========================================================= */

#spaceCanvas {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    pointer-events: none;

    z-index: 2;
}


/* =========================================================
   CANVAS — VIAGEM ESPACIAL
========================================================= 

#spaceCanvas {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    pointer-events: none;

    z-index: 2;
}


/* =========================================================
   CONTEÚDO
========================================================= */

.content {

    position: relative;

    z-index: 10;

    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    perspective: 1200px;
}


/* =========================================================
   ESTÁGIO DO LOGO
========================================================= */

.logo-stage {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    transform-style: preserve-3d;

    animation:
        stageFloat 6s ease-in-out infinite;
}


@keyframes stageFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotateX(5deg)
            rotateY(-3deg);
    }

    50% {

        transform:
            translateY(-10px)
            rotateX(3deg)
            rotateY(3deg);
    }
}


/* =========================================================
   LOGO PRINCIPAL
========================================================= */

.logo {

    position: relative;

    display: flex;

    align-items: baseline;

    font-weight: 900;

    font-size:
        clamp(70px, 13vw, 180px);

    letter-spacing:
        -0.075em;

    line-height: .8;

    transform-style: preserve-3d;

    user-select: none;
}


/* =========================================================
   3D — BRANCO
========================================================= */

.logo-3d {

    position: relative;

    color: #fff;

    text-shadow:

        0 1px 0 #d8d8d8,
        0 2px 0 #bcbcbc,
        0 3px 0 #a0a0a0,
        0 4px 0 #888,
        0 5px 7px rgba(0, 0, 0, .9);
}


/* =========================================================
   MAD — LILÁS
========================================================= */

.logo-mad {

    position: relative;

    color: #c58cff;

    text-shadow:

        0 1px 0 #ad6dea,
        0 2px 0 #9754d1,
        0 3px 0 #7f3db8,
        0 4px 0 #682d9c,
        0 5px 7px rgba(0, 0, 0, .9);
}


/* =========================================================
   CAMADAS DE IMPRESSÃO 3D
========================================================= */

.logo-3d::after,
.logo-mad::after {

    content: attr(data-text);

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;

    color: transparent;

    pointer-events: none;

    text-shadow:

        0 7px 0 rgba(255, 255, 255, .16),
        0 10px 0 rgba(255, 255, 255, .12),
        0 13px 0 rgba(255, 255, 255, .08),
        0 16px 0 rgba(255, 255, 255, .04);

    z-index: -1;
}


.logo-mad::after {

    text-shadow:

        0 7px 0 rgba(197, 140, 255, .20),
        0 10px 0 rgba(197, 140, 255, .14),
        0 13px 0 rgba(197, 140, 255, .09),
        0 16px 0 rgba(197, 140, 255, .05);
}


/* =========================================================
   LINHAS DE FILAMENTO
========================================================= */

.logo::before {

    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: -10px;

    height: 2px;

    background:

        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, .8) 0px,
            rgba(255, 255, 255, .8) 3px,
            transparent 3px,
            transparent 8px
        );

    opacity: .25;

    filter: blur(.2px);

    animation:
        filament 2.5s linear infinite;
}


@keyframes filament {

    from {
        background-position: 0 0;
    }

    to {
        background-position: 80px 0;
    }
}


/* =========================================================
   BRILHO DO LOGO
========================================================= */

.logo-glow {

    position: absolute;

    width: 75%;
    height: 55%;

    top: 25%;

    background:

        radial-gradient(
            ellipse,
            rgba(183, 105, 255, .22),
            transparent 70%
        );

    filter: blur(35px);

    z-index: -2;

    animation:
        glow 4s ease-in-out infinite;
}


@keyframes glow {

    0%,
    100% {

        opacity: .5;

        transform:
            scale(.9);
    }

    50% {

        opacity: .9;

        transform:
            scale(1.08);
    }
}


/* =========================================================
   EFEITO DE IMPRESSÃO
========================================================= */

.print-line {

    position: absolute;

    width: 0;
    height: 3px;

    left: 50%;

    bottom: -25px;

    transform:
        translateX(-50%);

    background: #c58cff;

    box-shadow:

        0 0 8px #c58cff,
        0 0 18px rgba(197, 140, 255, .7);

    animation:

        printLine 4s ease-out forwards,
        printPulse 2s ease-in-out infinite 4s;
}


@keyframes printLine {

    0% {

        width: 0;

        opacity: 0;
    }

    30% {

        opacity: 1;
    }

    100% {

        width: 90%;

        opacity: .7;
    }
}


@keyframes printPulse {

    0%,
    100% {

        opacity: .3;
    }

    50% {

        opacity: 1;
    }
}


/* =========================================================
   SUBTÍTULO
========================================================= */

.tagline {

    margin-top: 42px;

    font-size:
        clamp(15px, 2vw, 25px);

    letter-spacing: .38em;

    text-transform: uppercase;

    color:
        rgba(255, 255, 255, .78);

    text-align: center;

    font-weight: 300;

    text-shadow:
        0 0 12px rgba(255, 255, 255, .15);

    animation:
        taglineAppear 2s ease-out;
}


@keyframes taglineAppear {

    from {

        opacity: 0;

        transform:
            translateY(15px);

        letter-spacing: .65em;
    }

    to {

        opacity: .78;

        transform:
            translateY(0);

        letter-spacing: .38em;
    }
}


/* =========================================================
   BASE / SOMBRA
========================================================= */

.logo-base {

    width:
        min(550px, 65vw);

    height: 25px;

    margin-top: 42px;

    background:

        radial-gradient(
            ellipse,
            rgba(197, 140, 255, .25),
            transparent 70%
        );

    filter: blur(12px);

    transform:
        rotateX(70deg)
        translateZ(-20px);

    animation:
        basePulse 4s ease-in-out infinite;
}


@keyframes basePulse {

    0%,
    100% {

        opacity: .3;

        transform:
            rotateX(70deg)
            scaleX(.85)
            translateZ(-20px);
    }

    50% {

        opacity: .7;

        transform:
            rotateX(70deg)
            scaleX(1)
            translateZ(-20px);
    }
}


/* =========================================================
   RODAPÉ
========================================================= */

.footer {

    position: fixed;

    bottom: 25px;

    left: 0;
    right: 0;

    text-align: center;

    z-index: 20;

    font-size: 11px;

    letter-spacing: .25em;

    color:
        rgba(255, 255, 255, .28);

    text-transform: uppercase;
}


/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width: 600px) {

    .logo {

        font-size: 18vw;
    }

    .tagline {

        font-size: 11px;

        letter-spacing: .28em;

        margin-top: 35px;
    }

    .logo-base {

        width: 75vw;
    }

    .footer {

        font-size: 8px;
    }
}


/* =========================================================
   REDUÇÃO DE MOVIMENTO
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .logo-stage,
    .logo-glow,
    .logo::before,
    .print-line,
    .tagline,
    .logo-base,
    .space::before {

        animation: none !important;
    }
}