/**
 * @author Ricardo Soares
 * @link https://www.linkedin.com/in/ricardo-david-soares-28dez
 * @version 1.0
 * Created at 21/08/2026 16:53:46
 */

/**
 * Fade on #content show
 */
#content {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
#content.is-visible {
    opacity: 1;
    visibility: visible !important;
    transition: opacity 0.6s ease;
}

/**
 *
 */
.main-fader {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    z-index: 99999;
    background-color: var(--bs-body-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;
}

/* =========================================================
   BALL
========================================================= */
.main-fader .loader {
    width: 300px;
    height: 300px;
}
.main-fader .loader > svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* =========================================================
   BALL PIECES
========================================================= */

/*
 * All pieces are STATIC.
 * No transform.
 * No scaling.
 * No movement.
 */

.main-fader path {
    fill: var(--cv-red);
}

/* =========================================================
   ROTATING HIGHLIGHT
========================================================= */

/*
 * All pieces remain visible.
 * Each piece gets a different animation delay.
 *
 * The animation only changes opacity, making one piece
 * appear highlighted while the others remain static.
 */

.main-fader .path-0,
.main-fader .path-1,
.main-fader .path-2,
.main-fader .path-3,
.main-fader .path-4,
.main-fader .path-5,
.main-fader .path-6,
.main-fader .path-7,
.main-fader .path-8 {
    animation-name: ball-highlight;
    animation-duration: 1.2s;
    animation-timing-function: steps(9);
    animation-iteration-count: infinite;
}

/* =========================================================
   INDIVIDUAL TIMING
========================================================= */

.main-fader .path-0 {
    animation-delay: 0s;
}
.main-fader .path-1 {
    animation-delay: -0.1333s;
}
.main-fader .path-2 {
    animation-delay: -0.2666s;
}
.main-fader .path-3 {
    animation-delay: -0.3999s;
}
.main-fader .path-4 {
    animation-delay: -0.5332s;
}
.main-fader .path-5 {
    animation-delay: -0.6665s;
}
.main-fader .path-6 {
    animation-delay: -0.7998s;
}
.main-fader .path-7 {
    animation-delay: -0.9331s;
}
.main-fader .path-8 {
    animation-delay: -1.0664s;
}

/* =========================================================
   HIGHLIGHT
========================================================= */

@keyframes ball-highlight {
    0%,
    100% {
        opacity: 0.35;
    }
    11% {
        opacity: 1;
    }
    22%,
    100% {
        opacity: 0.35;
    }
}

/* =========================================================
   STATIC CENTER/EXTRA PIECE
========================================================= */

.main-fader .bb-9 {
    opacity: 1;
    animation: none;
}

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

@media (max-width: 576px) {
    .main-fader .loader {
        width: 220px;
        height: 220px;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .main-fader path {
        animation: none !important;
        opacity: 1 !important;
    }
    .main-fader {
        transition: none;
    }
}