/* ===========================
   PRELOADER WRAPPER
=========================== */

.loader-wrapper {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, #fffef7 0%, #f7f7f7 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.loader-wrapper.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ===========================
   LOADER CORE
=========================== */

.pl {
    --dur: 2s;
    position: relative;
    width: 10.5em;
    height: 10.5em;
    animation: spin 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* DOT BASE */
.pl__dot {
    position: absolute;
    top: calc(50% - 0.875em);
    left: calc(50% - 0.875em);
    width: 1.75em;
    height: 1.75em;
}

/* EVEN DOT SIZE */
.pl__dot:nth-child(even) {
    top: calc(50% - 1.125em);
    left: calc(50% - 1.125em);
    width: 2.25em;
    height: 2.25em;
}

/* DOT LAYERS */
.pl__dot-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    mix-blend-mode: screen;
}

/* COLORS SOLAIRE */
.pl__dot-layer:nth-child(1) {
    background: #FFC107; /* jaune solaire */
    animation: scale-down-1 var(--dur) infinite;
}

.pl__dot-layer:nth-child(2) {
    background: #FF9800; /* orange énergie */
    transform: translateY(20%) scale(0.85);
    animation: scale-down-2 var(--dur) infinite;
}

.pl__dot-layer:nth-child(3) {
    background: #4CAF50; /* vert énergie */
    transform: translateY(40%) scale(0.7);
    animation: scale-down-3 var(--dur) infinite;
}

/* EVEN DOT ANIMATION */
.pl__dot:nth-child(even) .pl__dot-layer:nth-child(1) {
    transform: scale(0.33);
    animation: scale-up-1 var(--dur) infinite;
}

.pl__dot:nth-child(even) .pl__dot-layer:nth-child(2) {
    transform: translateY(15%) scale(0.3);
    animation: scale-up-2 var(--dur) infinite;
}

.pl__dot:nth-child(even) .pl__dot-layer:nth-child(3) {
    transform: translateY(30%) scale(0.27);
    animation: scale-up-3 var(--dur) infinite;
}

/* POSITION AUTOUR DU CERCLE */
.pl__dot:nth-child(1) { transform: rotate(0deg) translateY(-4em); }
.pl__dot:nth-child(2) { transform: rotate(-60deg) translateY(-4em); }
.pl__dot:nth-child(3) { transform: rotate(-120deg) translateY(-4em); }
.pl__dot:nth-child(4) { transform: rotate(-180deg) translateY(-4em); }
.pl__dot:nth-child(5) { transform: rotate(-240deg) translateY(-4em); }
.pl__dot:nth-child(6) { transform: rotate(-300deg) translateY(-4em); }

/* DELAYS */
.pl__dot:nth-child(2) .pl__dot-layer { animation-delay: 0.02s; }
.pl__dot:nth-child(3) .pl__dot-layer { animation-delay: 0.04s; }
.pl__dot:nth-child(4) .pl__dot-layer { animation-delay: 0.06s; }
.pl__dot:nth-child(5) .pl__dot-layer { animation-delay: 0.08s; }
.pl__dot:nth-child(6) .pl__dot-layer { animation-delay: 0.1s; }

/* ===========================
   ANIMATIONS
=========================== */

@keyframes spin {
    from { transform: rotate(120deg); }
    50% { transform: rotate(240deg); }
    to { transform: rotate(360deg); }
}

@keyframes scale-down-1 {
    0%,100% { transform: scale(1); }
    50% { transform: translateY(-40%) scale(0.6); }
}

@keyframes scale-down-2 {
    0%,100% { transform: translateY(20%) scale(0.85); }
    50% { transform: translateY(-40%) scale(0.6); }
}

@keyframes scale-down-3 {
    0%,100% { transform: translateY(40%) scale(0.7); }
    50% { transform: translateY(-40%) scale(0.6); }
}

@keyframes scale-up-1 {
    0%,100% { transform: scale(0.33); }
    50% { transform: scale(1); }
}

@keyframes scale-up-2 {
    0%,100% { transform: scale(0.3); }
    50% { transform: scale(1); }
}

@keyframes scale-up-3 {
    0%,100% { transform: scale(0.27); }
    50% { transform: scale(1); }
}