/* ==========================================================
   ETHERION — LAUNCHER CINEMATOGRÁFICO
   ========================================================== */

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    background: #020202;
}

button,
input {
    font: inherit;
}

button {
    color: inherit;
}


/* ==========================================================
   ROOT
   ========================================================== */

#etherion-launcher {
    position: relative;

    width: 100vw;
    height: 100vh;

    overflow: hidden;

    background: #020202;
}


/* ==========================================================
   LOADING
   ========================================================== */

.launcher-loading {
    position: absolute;
    inset: 0;

    z-index: 100;

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

    background:
        radial-gradient(
            circle at center,
            #11100d 0%,
            #060606 35%,
            #020202 75%
        );

    transition:
        opacity 900ms ease,
        visibility 900ms ease;
}

.launcher-loading.is-leaving {
    opacity: 0;
    visibility: hidden;
}


.loading-symbol {
    position: relative;

    width: 150px;
    height: 150px;

    display: grid;
    place-items: center;

    color: #d1b171;

    font-family:
        Georgia,
        serif;

    font-size: 66px;

    animation:
        loading-breathe 2.6s ease-in-out infinite;
}


.loading-symbol__rings,
.loading-symbol__rings::before,
.loading-symbol__rings::after {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(209, 177, 113, 0.22);

    content: "";
}

.loading-symbol__rings {
    inset: 0;

    animation:
        loading-spin 12s linear infinite;
}

.loading-symbol__rings::before {
    inset: 12px;
}

.loading-symbol__rings::after {
    inset: 26px;
}


.loading-title {
    margin-top: 24px;

    display: flex;
    flex-direction: column;

    align-items: center;

    text-transform: uppercase;
}

.loading-title small {
    color: #85735a;

    font-size: 9px;
    letter-spacing: 0.42em;
}

.loading-title strong {
    margin-top: 8px;

    color: #d8c399;

    font-family: Georgia, serif;

    font-size: 25px;
    font-weight: 400;

    letter-spacing: 0.3em;
}


.loading-status {
    margin: 30px 0 12px;

    color: #777169;

    font-size: 11px;

    letter-spacing: 0.08em;
}


.loading-progress {
    width: min(310px, 65vw);
    height: 2px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.08);
}

.loading-progress__bar {
    width: 0%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #72582e,
            #d1b171
        );

    box-shadow:
        0 0 14px rgba(209, 177, 113, 0.5);

    transition:
        width 450ms ease;
}


.loading-percentage {
    margin-top: 8px;

    color: #625d56;

    font-size: 9px;
}


.launcher-awaken {
    margin-top: 30px;

    padding: 13px 28px;

    cursor: pointer;

    color: #18120a;

    background:
        linear-gradient(
            135deg,
            #d5b675,
            #ac8647
        );

    border: 0;

    border-radius: 4px;

    font-weight: 700;

    letter-spacing: 0.06em;

    animation:
        awaken-appear 700ms ease both;
}


.launcher-silent {
    margin-top: 13px;

    cursor: pointer;

    color: #716b62;

    background: transparent;

    border: 0;

    font-size: 10px;
}


/* ==========================================================
   MUNDO
   ========================================================== */

.launcher-world {
    position: absolute;
    inset: 0;

    overflow: hidden;

    opacity: 0;

    visibility: hidden;

    transform:
        scale(1.025);

    transition:
        opacity 1400ms ease,
        transform 1800ms ease,
        visibility 1400ms ease;
}

.launcher-world.is-visible {
    opacity: 1;
    visibility: visible;

    transform:
        scale(1);
}


.launcher-background {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;

    background: #020202;
}


.launcher-youtube-background-player {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
}


.launcher-youtube-background-player iframe {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 100vw !important;
    height: 56.25vw !important;

    min-width: 177.777778vh !important;
    min-height: 100vh !important;

    transform:
        translate(-50%, -50%)
        scale(1.03);

    pointer-events: none;

    border: 0;
}


.launcher-shade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.25),
            rgba(0, 0, 0, 0.2) 45%,
            rgba(0, 0, 0, 0.72)
        );
}


.launcher-vignette {
    position: absolute;
    inset: 0;

    pointer-events: none;

    box-shadow:
        inset 0 0 220px 80px
        rgba(0, 0, 0, 0.72);
}


.launcher-grain {
    position: absolute;
    inset: -50%;

    pointer-events: none;

    opacity: 0.055;

    background-image:
        repeating-radial-gradient(
            circle at 30% 40%,
            transparent 0,
            rgba(255,255,255,.15) 1px,
            transparent 2px
        );

    background-size:
        7px 7px;

    animation:
        grain-move 400ms steps(2) infinite;
}


/* ==========================================================
   CENTRO
   ========================================================== */

.launcher-center {
    position: absolute;

    left: 50%;
    top: 50%;

    width: min(760px, 90vw);

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

    text-align: center;

    transform:
        translate(-50%, -50%);
}


.launcher-emblem {
    position: relative;

    width: 94px;
    height: 94px;

    display: grid;
    place-items: center;

    color: #dfc17f;

    font-family: Georgia, serif;
    font-size: 49px;

    text-shadow:
        0 0 35px rgba(212, 176, 106, 0.26);
}


.launcher-emblem__circle {
    position: absolute;
    inset: 0;

    border:
        1px solid rgba(217, 180, 108, 0.35);

    border-radius: 50%;

    box-shadow:
        0 0 40px
        rgba(191, 148, 76, 0.08);
}


.launcher-kicker {
    margin:
        27px 0 10px;

    color: #c09858;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.46em;
}


.launcher-center h1 {
    margin: 0;

    color: #f0e8d7;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(58px, 9vw, 105px);

    font-weight: 400;

    line-height: 0.95;

    text-shadow:
        0 5px 30px rgba(0, 0, 0, 0.7);
}


.launcher-subtitle {
    margin:
        19px 0 33px;

    color:
        rgba(235, 225, 207, 0.72);

    font-size:
        clamp(13px, 1.7vw, 17px);

    letter-spacing: 0.04em;
}


.launcher-enter {
    position: relative;

    min-width: 230px;

    padding:
        14px 25px;

    cursor: pointer;

    overflow: hidden;

    color: #171109;

    background:
        linear-gradient(
            135deg,
            #d6b774,
            #aa8140
        );

    border:
        1px solid rgba(255, 220, 151, 0.55);

    border-radius: 4px;

    font-weight: 700;

    letter-spacing: 0.05em;

    box-shadow:
        0 10px 38px
        rgba(0, 0, 0, 0.34);

    transition:
        transform 220ms ease,
        box-shadow 220ms ease;
}


.launcher-enter:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 14px 50px
        rgba(197, 153, 77, 0.16);
}


.launcher-enter::after {
    content: "";

    position: absolute;

    top: -50%;
    left: -80%;

    width: 50%;
    height: 200%;

    transform:
        rotate(25deg);

    background:
        rgba(255, 255, 255, 0.16);

    transition:
        left 600ms ease;
}


.launcher-enter:hover::after {
    left: 140%;
}


/* ==========================================================
   SISTEMA
   ========================================================== */

.launcher-system {
    position: absolute;

    left: 26px;
    bottom: 22px;

    display: flex;
    align-items: flex-end;

    gap: 25px;

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

    font-size: 9px;

    letter-spacing: .08em;
}


.launcher-system > div:first-child {
    display: flex;
    flex-direction: column;

    gap: 3px;
}


.launcher-system strong {
    color:
        rgba(220, 193, 139, 0.74);

    font-weight: 500;
}


.launcher-system__state {
    display: flex;

    align-items: center;

    gap: 6px;
}


.launcher-system__state i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #ab945c;

    box-shadow:
        0 0 9px #ab945c;
}


/* ==========================================================
   CONTROLES
   ========================================================== */

.launcher-controls {
    position: absolute;

    right: 26px;
    top: 22px;

    display: flex;
    align-items: center;

    gap: 10px;
}


.launcher-controls button {
    min-height: 36px;

    padding: 0 12px;

    cursor: pointer;

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

    background:
        rgba(8,8,8,.56);

    border:
        1px solid
        rgba(215, 182, 118, .18);

    border-radius: 5px;

    backdrop-filter:
        blur(12px);
}


.launcher-volume {
    display: flex;
    align-items: center;

    gap: 8px;

    padding: 8px 10px;

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

    background:
        rgba(8,8,8,.56);

    border:
        1px solid
        rgba(215,182,118,.18);

    border-radius: 5px;

    font-size: 9px;

    backdrop-filter:
        blur(12px);
}


.launcher-volume input {
    width: 90px;

    accent-color:
        #c5a05f;
}



/* ==========================================================
   TRANSIÇÃO
   ========================================================== */

.launcher-transition {
    position: fixed;
    inset: 0;

    z-index: 1000;

    display: grid;
    place-items: center;

    pointer-events: none;

    opacity: 0;

    background: #020202;

    transition:
        opacity 850ms ease;
}


.launcher-transition.is-active {
    opacity: 1;
    pointer-events: all;
}


.launcher-transition span {
    color: #cba760;

    font-family:
        Georgia,
        serif;

    font-size: 50px;

    opacity: 0;

    transition:
        opacity 500ms ease;
}


.launcher-transition.is-active span {
    opacity: 1;
}


/* ==========================================================
   ANIMAÇÕES
   ========================================================== */

@keyframes loading-spin {
    to {
        transform: rotate(360deg);
    }
}


@keyframes loading-breathe {
    0%,
    100% {
        opacity: .65;
    }

    50% {
        opacity: 1;
    }
}


@keyframes awaken-appear {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes grain-move {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(2%, -1%);
    }

    50% {
        transform: translate(-1%, 2%);
    }

    75% {
        transform: translate(1%, 1%);
    }

    100% {
        transform: translate(0, 0);
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    .launcher-system {
        left: 14px;
        bottom: 14px;
    }

    .launcher-controls {
        right: 14px;
        top: 14px;
    }

    .launcher-volume {
        display: none;
    }


}