/* Swing Pendulum Loader Animation */

.loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(50, 49, 51, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

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

.loader ul {
    padding: 0;
    margin: 0;
}

.loader li {
    list-style: none;
}

/* Pendulum strings */
.loader-pendulum {
    padding: 0;
}

.loader-pendulum li {
    position: absolute;
    top: 20vh;
    right: 50%;
    width: 0.0625rem;
    background: linear-gradient(rgba(46, 204, 113, 0), rgba(46, 204, 113, 0.25));
    list-style: none;
    transform-origin: 50% 0;
    animation: swing 4s ease-in-out infinite;
}

/* Generate heights and delays for 128 elements */
.loader-pendulum li:nth-child(1) { height: 3.75vh; animation-delay: -0.03125s; }
.loader-pendulum li:nth-child(2) { height: 4.24vh; animation-delay: -0.0625s; }
.loader-pendulum li:nth-child(3) { height: 4.73vh; animation-delay: -0.09375s; }
.loader-pendulum li:nth-child(4) { height: 5.23vh; animation-delay: -0.125s; }
.loader-pendulum li:nth-child(5) { height: 5.72vh; animation-delay: -0.15625s; }
.loader-pendulum li:nth-child(6) { height: 6.21vh; animation-delay: -0.1875s; }
.loader-pendulum li:nth-child(7) { height: 6.70vh; animation-delay: -0.21875s; }
.loader-pendulum li:nth-child(8) { height: 7.20vh; animation-delay: -0.25s; }
.loader-pendulum li:nth-child(9) { height: 7.69vh; animation-delay: -0.28125s; }
.loader-pendulum li:nth-child(10) { height: 8.18vh; animation-delay: -0.3125s; }
.loader-pendulum li:nth-child(11) { height: 8.67vh; animation-delay: -0.34375s; }
.loader-pendulum li:nth-child(12) { height: 9.17vh; animation-delay: -0.375s; }
.loader-pendulum li:nth-child(13) { height: 9.66vh; animation-delay: -0.40625s; }
.loader-pendulum li:nth-child(14) { height: 10.15vh; animation-delay: -0.4375s; }
.loader-pendulum li:nth-child(15) { height: 10.64vh; animation-delay: -0.46875s; }
.loader-pendulum li:nth-child(16) { height: 11.14vh; animation-delay: -0.5s; }
.loader-pendulum li:nth-child(17) { height: 11.63vh; animation-delay: -0.53125s; }
.loader-pendulum li:nth-child(18) { height: 12.12vh; animation-delay: -0.5625s; }
.loader-pendulum li:nth-child(19) { height: 12.61vh; animation-delay: -0.59375s; }
.loader-pendulum li:nth-child(20) { height: 13.11vh; animation-delay: -0.625s; }
.loader-pendulum li:nth-child(21) { height: 13.60vh; animation-delay: -0.65625s; }
.loader-pendulum li:nth-child(22) { height: 14.09vh; animation-delay: -0.6875s; }
.loader-pendulum li:nth-child(23) { height: 14.58vh; animation-delay: -0.71875s; }
.loader-pendulum li:nth-child(24) { height: 15.08vh; animation-delay: -0.75s; }
.loader-pendulum li:nth-child(25) { height: 15.57vh; animation-delay: -0.78125s; }
.loader-pendulum li:nth-child(26) { height: 16.06vh; animation-delay: -0.8125s; }
.loader-pendulum li:nth-child(27) { height: 16.55vh; animation-delay: -0.84375s; }
.loader-pendulum li:nth-child(28) { height: 17.05vh; animation-delay: -0.875s; }
.loader-pendulum li:nth-child(29) { height: 17.54vh; animation-delay: -0.90625s; }
.loader-pendulum li:nth-child(30) { height: 18.03vh; animation-delay: -0.9375s; }
.loader-pendulum li:nth-child(31) { height: 18.52vh; animation-delay: -0.96875s; }
.loader-pendulum li:nth-child(32) { height: 19.02vh; animation-delay: -1s; }
.loader-pendulum li:nth-child(33) { height: 19.51vh; animation-delay: -1.03125s; }
.loader-pendulum li:nth-child(34) { height: 20vh; animation-delay: -1.0625s; }
.loader-pendulum li:nth-child(35) { height: 20.49vh; animation-delay: -1.09375s; }
.loader-pendulum li:nth-child(36) { height: 20.99vh; animation-delay: -1.125s; }
.loader-pendulum li:nth-child(37) { height: 21.48vh; animation-delay: -1.15625s; }
.loader-pendulum li:nth-child(38) { height: 21.97vh; animation-delay: -1.1875s; }
.loader-pendulum li:nth-child(39) { height: 22.46vh; animation-delay: -1.21875s; }
.loader-pendulum li:nth-child(40) { height: 22.96vh; animation-delay: -1.25s; }
.loader-pendulum li:nth-child(41) { height: 23.45vh; animation-delay: -1.28125s; }
.loader-pendulum li:nth-child(42) { height: 23.94vh; animation-delay: -1.3125s; }
.loader-pendulum li:nth-child(43) { height: 24.43vh; animation-delay: -1.34375s; }
.loader-pendulum li:nth-child(44) { height: 24.93vh; animation-delay: -1.375s; }
.loader-pendulum li:nth-child(45) { height: 25.42vh; animation-delay: -1.40625s; }
.loader-pendulum li:nth-child(46) { height: 25.91vh; animation-delay: -1.4375s; }
.loader-pendulum li:nth-child(47) { height: 26.40vh; animation-delay: -1.46875s; }
.loader-pendulum li:nth-child(48) { height: 26.90vh; animation-delay: -1.5s; }
.loader-pendulum li:nth-child(49) { height: 27.39vh; animation-delay: -1.53125s; }
.loader-pendulum li:nth-child(50) { height: 27.88vh; animation-delay: -1.5625s; }
.loader-pendulum li:nth-child(51) { height: 28.37vh; animation-delay: -1.59375s; }
.loader-pendulum li:nth-child(52) { height: 28.87vh; animation-delay: -1.625s; }
.loader-pendulum li:nth-child(53) { height: 29.36vh; animation-delay: -1.65625s; }
.loader-pendulum li:nth-child(54) { height: 29.85vh; animation-delay: -1.6875s; }
.loader-pendulum li:nth-child(55) { height: 30.34vh; animation-delay: -1.71875s; }
.loader-pendulum li:nth-child(56) { height: 30.84vh; animation-delay: -1.75s; }
.loader-pendulum li:nth-child(57) { height: 31.33vh; animation-delay: -1.78125s; }
.loader-pendulum li:nth-child(58) { height: 31.82vh; animation-delay: -1.8125s; }
.loader-pendulum li:nth-child(59) { height: 32.31vh; animation-delay: -1.84375s; }
.loader-pendulum li:nth-child(60) { height: 32.81vh; animation-delay: -1.875s; }
.loader-pendulum li:nth-child(61) { height: 33.30vh; animation-delay: -1.90625s; }
.loader-pendulum li:nth-child(62) { height: 33.79vh; animation-delay: -1.9375s; }
.loader-pendulum li:nth-child(63) { height: 34.28vh; animation-delay: -1.96875s; }
.loader-pendulum li:nth-child(64) { height: 34.78vh; animation-delay: -2s; }
.loader-pendulum li:nth-child(65) { height: 35.27vh; animation-delay: -2.03125s; }
.loader-pendulum li:nth-child(66) { height: 35.76vh; animation-delay: -2.0625s; }
.loader-pendulum li:nth-child(67) { height: 36.25vh; animation-delay: -2.09375s; }
.loader-pendulum li:nth-child(68) { height: 36.75vh; animation-delay: -2.125s; }
.loader-pendulum li:nth-child(69) { height: 37.24vh; animation-delay: -2.15625s; }
.loader-pendulum li:nth-child(70) { height: 37.73vh; animation-delay: -2.1875s; }
.loader-pendulum li:nth-child(71) { height: 38.22vh; animation-delay: -2.21875s; }
.loader-pendulum li:nth-child(72) { height: 38.72vh; animation-delay: -2.25s; }
.loader-pendulum li:nth-child(73) { height: 39.21vh; animation-delay: -2.28125s; }
.loader-pendulum li:nth-child(74) { height: 39.70vh; animation-delay: -2.3125s; }
.loader-pendulum li:nth-child(75) { height: 40.19vh; animation-delay: -2.34375s; }
.loader-pendulum li:nth-child(76) { height: 40.69vh; animation-delay: -2.375s; }
.loader-pendulum li:nth-child(77) { height: 41.18vh; animation-delay: -2.40625s; }
.loader-pendulum li:nth-child(78) { height: 41.67vh; animation-delay: -2.4375s; }
.loader-pendulum li:nth-child(79) { height: 42.16vh; animation-delay: -2.46875s; }
.loader-pendulum li:nth-child(80) { height: 42.66vh; animation-delay: -2.5s; }
.loader-pendulum li:nth-child(81) { height: 43.15vh; animation-delay: -2.53125s; }
.loader-pendulum li:nth-child(82) { height: 43.64vh; animation-delay: -2.5625s; }
.loader-pendulum li:nth-child(83) { height: 44.13vh; animation-delay: -2.59375s; }
.loader-pendulum li:nth-child(84) { height: 44.63vh; animation-delay: -2.625s; }
.loader-pendulum li:nth-child(85) { height: 45.12vh; animation-delay: -2.65625s; }
.loader-pendulum li:nth-child(86) { height: 45.61vh; animation-delay: -2.6875s; }
.loader-pendulum li:nth-child(87) { height: 46.10vh; animation-delay: -2.71875s; }
.loader-pendulum li:nth-child(88) { height: 46.60vh; animation-delay: -2.75s; }
.loader-pendulum li:nth-child(89) { height: 47.09vh; animation-delay: -2.78125s; }
.loader-pendulum li:nth-child(90) { height: 47.58vh; animation-delay: -2.8125s; }
.loader-pendulum li:nth-child(91) { height: 48.07vh; animation-delay: -2.84375s; }
.loader-pendulum li:nth-child(92) { height: 48.57vh; animation-delay: -2.875s; }
.loader-pendulum li:nth-child(93) { height: 49.06vh; animation-delay: -2.90625s; }
.loader-pendulum li:nth-child(94) { height: 49.55vh; animation-delay: -2.9375s; }
.loader-pendulum li:nth-child(95) { height: 50.04vh; animation-delay: -2.96875s; }
.loader-pendulum li:nth-child(96) { height: 50.54vh; animation-delay: -3s; }
.loader-pendulum li:nth-child(97) { height: 51.03vh; animation-delay: -3.03125s; }
.loader-pendulum li:nth-child(98) { height: 51.52vh; animation-delay: -3.0625s; }
.loader-pendulum li:nth-child(99) { height: 52.01vh; animation-delay: -3.09375s; }
.loader-pendulum li:nth-child(100) { height: 52.51vh; animation-delay: -3.125s; }
.loader-pendulum li:nth-child(101) { height: 53vh; animation-delay: -3.15625s; }
.loader-pendulum li:nth-child(102) { height: 53.49vh; animation-delay: -3.1875s; }
.loader-pendulum li:nth-child(103) { height: 53.98vh; animation-delay: -3.21875s; }
.loader-pendulum li:nth-child(104) { height: 54.48vh; animation-delay: -3.25s; }
.loader-pendulum li:nth-child(105) { height: 54.97vh; animation-delay: -3.28125s; }
.loader-pendulum li:nth-child(106) { height: 55.46vh; animation-delay: -3.3125s; }
.loader-pendulum li:nth-child(107) { height: 55.95vh; animation-delay: -3.34375s; }
.loader-pendulum li:nth-child(108) { height: 56.45vh; animation-delay: -3.375s; }
.loader-pendulum li:nth-child(109) { height: 56.94vh; animation-delay: -3.40625s; }
.loader-pendulum li:nth-child(110) { height: 57.43vh; animation-delay: -3.4375s; }
.loader-pendulum li:nth-child(111) { height: 57.92vh; animation-delay: -3.46875s; }
.loader-pendulum li:nth-child(112) { height: 58.42vh; animation-delay: -3.5s; }
.loader-pendulum li:nth-child(113) { height: 58.91vh; animation-delay: -3.53125s; }
.loader-pendulum li:nth-child(114) { height: 59.40vh; animation-delay: -3.5625s; }
.loader-pendulum li:nth-child(115) { height: 59.89vh; animation-delay: -3.59375s; }
.loader-pendulum li:nth-child(116) { height: 60.39vh; animation-delay: -3.625s; }
.loader-pendulum li:nth-child(117) { height: 60.88vh; animation-delay: -3.65625s; }
.loader-pendulum li:nth-child(118) { height: 61.37vh; animation-delay: -3.6875s; }
.loader-pendulum li:nth-child(119) { height: 61.86vh; animation-delay: -3.71875s; }
.loader-pendulum li:nth-child(120) { height: 62.36vh; animation-delay: -3.75s; }
.loader-pendulum li:nth-child(121) { height: 62.85vh; animation-delay: -3.78125s; }
.loader-pendulum li:nth-child(122) { height: 63.34vh; animation-delay: -3.8125s; }
.loader-pendulum li:nth-child(123) { height: 63.83vh; animation-delay: -3.84375s; }
.loader-pendulum li:nth-child(124) { height: 64.33vh; animation-delay: -3.875s; }
.loader-pendulum li:nth-child(125) { height: 64.82vh; animation-delay: -3.90625s; }
.loader-pendulum li:nth-child(126) { height: 65.31vh; animation-delay: -3.9375s; }
.loader-pendulum li:nth-child(127) { height: 65.80vh; animation-delay: -3.96875s; }
.loader-pendulum li:nth-child(128) { height: 66.30vh; animation-delay: -4s; }

/* Colored dots at the end */
.loader-pendulum li:before {
    content: '';
    position: absolute;
    left: -1px;
    bottom: 1px;
    width: 3px;
    height: 3px;
}

.loader-pendulum li:nth-child(4n):before {
    background: #D8334A;
}

.loader-pendulum li:nth-child(4n+1):before {
    background: #FFCE54;
}

.loader-pendulum li:nth-child(4n+2):before {
    background: #2ECC71;
}

.loader-pendulum li:nth-child(4n+3):before {
    background: #5D9CEC;
}

/* Swing animation */
@keyframes swing {
    0%, 100% {
        transform: rotate(-30deg);
    }
    5%, 45% {
        opacity: 0.25;
    }
    50%, 100%, 0% {
        opacity: 1;
    }
    50% {
        transform: rotate(30deg);
    }
}