:root {
    --splash-black: #050505;
    --splash-orange: #FF6600;
    --splash-white: #FFFFFF;
    --splash-duration: 11000ms;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    background: var(--splash-black);
}

body.splash-page {
    overflow: hidden;
}

.artfight-splash {
    position: fixed;
    z-index: 999999;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    background: var(--splash-black);
    color: var(--splash-white);
    font-family: Arial, Helvetica, sans-serif;
    opacity: 1;
    visibility: visible;
    transition:
        opacity 750ms ease,
        visibility 750ms ease;
}

.artfight-splash.is-finished {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* FUNDO */

.artfight-splash__background {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.artfight-splash__particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--splash-orange);
    opacity: 0;
    box-shadow: 0 0 12px rgba(255, 102, 0, 0.75);
    animation: splash-particle 3.8s ease-in-out infinite;
}

.artfight-splash__particle--one {
    top: 22%;
    left: 18%;
    animation-delay: 0.2s;
}

.artfight-splash__particle--two {
    top: 34%;
    right: 16%;
    animation-delay: 0.8s;
}

.artfight-splash__particle--three {
    bottom: 24%;
    left: 24%;
    animation-delay: 1.1s;
}

.artfight-splash__particle--four {
    bottom: 18%;
    right: 22%;
    animation-delay: 1.7s;
}

.artfight-splash__particle--five {
    top: 15%;
    right: 32%;
    animation-delay: 2.1s;
}

.artfight-splash__particle--six {
    bottom: 36%;
    left: 12%;
    animation-delay: 2.6s;
}

@keyframes splash-particle {
    0%,
    100% {
        opacity: 0;
        transform: scale(0.5);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.5);
    }
}

/* INTRODUÇÃO */

.artfight-splash__intro {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 4vh, 38px);
    padding: 24px;
    animation: splash-intro-out 11s linear forwards;
}

.artfight-punch {
    position: relative;
    width: min(76vw, 760px);
    max-height: 55vh;
    aspect-ratio: 1.65 / 1;
    display: grid;
    place-items: center;
    transform-origin: center;
    animation: punch-impact 11s linear forwards;
}

.artfight-punch__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.artfight-punch__fist {
    transform-box: fill-box;
    transform-origin: center;
}

/* DEDOS: DA DIREITA PARA A ESQUERDA */

.artfight-punch__finger {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center bottom;
}

.artfight-punch__finger--little {
    animation: finger-appear 400ms ease-out 0.1s forwards;
}

.artfight-punch__finger--ring {
    animation: finger-appear 400ms ease-out 0.45s forwards;
}

.artfight-punch__finger--middle {
    animation: finger-appear 400ms ease-out 0.8s forwards;
}

.artfight-punch__finger--index {
    animation: finger-appear 400ms ease-out 1.15s forwards;
}

@keyframes finger-appear {
    0% {
        opacity: 0;
        transform: translateY(45px) scaleY(0.75);
    }

    70% {
        opacity: 1;
        transform: translateY(-5px) scaleY(1.04);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

/* PALMA E DEDÃO JUNTOS */

.artfight-punch__palm,
.artfight-punch__thumb {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: fist-close 420ms cubic-bezier(0.2, 0.75, 0.2, 1) 1.55s forwards;
}

@keyframes fist-close {
    0% {
        opacity: 0;
        transform: translateY(35px) scale(0.92);
    }

    75% {
        opacity: 1;
        transform: translateY(-3px) scale(1.02);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* BARRA INICIAL: CARREGA DURANTE A MONTAGEM DO PUNHO */

.artfight-splash__loading {
    position: relative;
    z-index: 3;
    width: min(72vw, 360px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    opacity: 0;
    animation: loading-appear 300ms ease-out 0.05s forwards;
}

.artfight-splash__loading-track {
    position: relative;
    width: 100%;
    height: 4px;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
}

.artfight-splash__loading-progress {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: inherit;
    background: var(--splash-orange);
    box-shadow: 0 0 12px rgba(255, 102, 0, 0.65);
    animation: loading-progress 2.15s ease-in-out 0.05s forwards;
}

.artfight-splash__loading-text {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(12px, 1.5vw, 15px);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

@keyframes loading-appear {
    to {
        opacity: 1;
    }
}

@keyframes loading-progress {
    0% {
        width: 0;
    }

    30% {
        width: 28%;
    }

    65% {
        width: 68%;
    }

    100% {
        width: 100%;
    }
}

/* SOCO: RECUA, AVANÇA E PERMANECE VISÍVEL */

@keyframes punch-impact {
    0%,
    34% {
        transform: scale(1) translate(0, 0);
        opacity: 1;
    }

    38% {
        transform: scale(0.62) translate(0, 0);
        opacity: 1;
    }

    42% {
        transform: scale(0.68) translate(0, 0);
        opacity: 1;
    }

    45% {
        transform: scale(1.35) translate(0, 0);
        opacity: 1;
    }

    48% {
        transform: scale(2.8) translate(0, 0);
        opacity: 1;
    }

    51%,
    66% {
        transform: scale(2.8) translate(0, 0);
        opacity: 1;
    }

    72%,
    100% {
        transform: scale(2.8) translate(0, 0);
        opacity: 0;
    }
}

/* INTRO E PUNHO SOMEM JUNTOS COM AS RACHADURAS */

@keyframes splash-intro-out {
    0%,
    66% {
        opacity: 1;
        visibility: visible;
    }

    72%,
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

/* RACHADURAS BRANCAS */

.artfight-cracks {
    position: absolute;
    z-index: 5;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    animation: cracks-lifecycle 11s linear forwards;
}

.artfight-cracks__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.artfight-cracks__set {
    transform-box: view-box;
    transform-origin: 960px 540px;
}

.artfight-cracks__set--one {
    transform: rotate(0deg);
}

.artfight-cracks__set--two {
    transform: rotate(120deg);
}

.artfight-cracks__set--three {
    transform: rotate(240deg);
}

.artfight-cracks__main,
.artfight-cracks__branches {
    fill: none;
    stroke: #FFFFFF;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 2600;
    stroke-dashoffset: 2600;
}

.artfight-cracks__main {
    stroke-width: 3.2;
    animation: cracks-draw-main 1.05s ease-out 4.95s forwards;
}

.artfight-cracks__branches {
    stroke-width: 1.7;
    opacity: 0.9;
    animation: cracks-draw-branches 1.2s ease-out 5.1s forwards;
}

@keyframes cracks-draw-main {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes cracks-draw-branches {
    to {
        stroke-dashoffset: 0;
    }
}

/* CLARÃO DO IMPACTO */

.artfight-cracks__flash {
    position: absolute;
    inset: 0;
    background: #FFFFFF;
    opacity: 0;
    animation: impact-flash 11s linear forwards;
}

@keyframes impact-flash {
    0%,
    44% {
        opacity: 0;
    }

    45% {
        opacity: 0.85;
    }

    46% {
        opacity: 0.18;
    }

    47%,
    100% {
        opacity: 0;
    }
}

/*
 * O VIDRO PERMANECE TRINCADO ENQUANTO O PUNHO FICA NA TELA.
 * OS DOIS COMEÇAM A DESAPARECER NO MESMO MOMENTO.
 */

@keyframes cracks-lifecycle {
    0%,
    44% {
        opacity: 0;
    }

    46%,
    66% {
        opacity: 1;
    }

    72%,
    100% {
        opacity: 0;
    }
}

/* TELA FINAL: SÓ ENTRA DEPOIS DA SAÍDA DO PUNHO E DAS TRINCAS */

.artfight-splash__content {
    position: absolute;
    z-index: 10;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    animation: final-content-appear 11s linear forwards;
}

@keyframes final-content-appear {
    0%,
    72% {
        opacity: 0;
        visibility: hidden;
    }

    73% {
        opacity: 0;
        visibility: visible;
    }

    82%,
    100% {
        opacity: 1;
        visibility: visible;
    }
}

.artfight-splash__final {
    width: min(90vw, 650px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.artfight-splash__logo {
    display: block;
    width: min(52vw, 300px);
    max-width: 100%;
    height: auto;
    object-fit: contain;
    opacity: 0;
    transform: scale(0.82);
    animation: logo-reveal 800ms cubic-bezier(0.2, 0.75, 0.2, 1) 7.95s forwards;
}

@keyframes logo-reveal {
    0% {
        opacity: 0;
        transform: scale(0.82);
    }

    70% {
        opacity: 1;
        transform: scale(1.04);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.artfight-splash__brand {
    margin: 26px 0 0;
    color: var(--splash-white);
    font-size: clamp(19px, 3.2vw, 34px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.025em;
    opacity: 0;
    transform: translateY(12px);
    animation: brand-reveal 650ms ease-out 8.25s forwards;
}

@keyframes brand-reveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* BARRA FINAL */

.artfight-splash__final-loading {
    position: relative;
    width: min(70vw, 300px);
    height: 4px;
    margin-top: 28px;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.16);
    opacity: 0;
    animation: final-bar-appear 350ms ease-out 8.55s forwards;
}

.artfight-splash__final-progress {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: inherit;
    background: var(--splash-orange);
    box-shadow: 0 0 12px rgba(255, 102, 0, 0.65);
    animation: final-progress 1.05s ease-in-out 8.6s forwards;
}

@keyframes final-bar-appear {
    to {
        opacity: 1;
    }
}

@keyframes final-progress {
    to {
        width: 100%;
    }
}

/* BOAS-VINDAS */

.artfight-splash__welcome {
    margin: 20px 0 0;
    color: var(--splash-orange);
    font-size: clamp(16px, 2.2vw, 22px);
    font-weight: 700;
    letter-spacing: 0.08em;
    opacity: 0;
    transform: translateY(8px);
    animation: welcome-reveal 600ms ease-out 9.25s forwards;
}

@keyframes welcome-reveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* RESPONSIVIDADE */

@media (max-width: 600px) {
    .artfight-splash__intro {
        gap: 22px;
        padding: 20px;
    }

    .artfight-punch {
        width: min(94vw, 560px);
        max-height: 42vh;
    }

    .artfight-splash__loading {
        width: min(80vw, 320px);
    }

    .artfight-splash__logo {
        width: min(68vw, 260px);
    }

    .artfight-splash__brand {
        max-width: 92vw;
        margin-top: 22px;
    }
}

/* ACESSIBILIDADE */

@media (prefers-reduced-motion: reduce) {
    .artfight-splash__particle {
        animation: none;
    }
}