/* Preloader Component */

.preloader {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--smoky-black);
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 9999;
     opacity: 1;
     visibility: visible;
     transition: opacity 0.5s ease, visibility 0.5s ease;
}

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

.preloader-content {
     text-align: center;
     position: relative;
}

.preloader-logo {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 15px;
     margin-bottom: 40px;
     font-family: 'Courier New', monospace;
}

.code-bracket {
     font-size: 64px;
     font-weight: 700;
     color: var(--orange-yellow-crayola);
     animation: bracketPulse 1.5s ease-in-out infinite;
     text-shadow: 0 0 20px hsla(45, 100%, 72%, 0.5);
}

.code-bracket.left {
     animation-delay: 0s;
}

.code-bracket.right {
     animation-delay: 0.3s;
}

@keyframes bracketPulse {

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

     50% {
          transform: scale(1.1);
          opacity: 0.8;
     }
}

.preloader-text {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 32px;
     font-weight: 600;
     letter-spacing: 2px;
}

.dev-text {
     color: var(--orange-yellow-crayola);
     animation: textGlow 2s ease-in-out infinite;
}

.ampersand {
     color: var(--light-gray);
     font-size: 28px;
     margin: 0 5px;
     animation: rotate 3s linear infinite;
}

@keyframes rotate {
     0% {
          transform: rotate(0deg);
     }

     100% {
          transform: rotate(360deg);
     }
}

.design-text {
     color: var(--white-2);
     animation: textGlow 2s ease-in-out infinite 0.5s;
}

@keyframes textGlow {

     0%,
     100% {
          text-shadow: 0 0 10px hsla(45, 100%, 72%, 0.5);
     }

     50% {
          text-shadow: 0 0 20px hsla(45, 100%, 72%, 0.8), 0 0 30px hsla(45, 100%, 72%, 0.6);
     }
}

.preloader-progress {
     width: 300px;
     height: 4px;
     background: var(--eerie-black-1);
     border-radius: 10px;
     overflow: hidden;
     margin: 0 auto 20px;
     border: 1px solid var(--jet);
     position: relative;
}

.progress-bar {
     height: 100%;
     width: 0%;
     background: var(--text-gradient-yellow);
     border-radius: 10px;
     position: relative;
     animation: progressAnimation 2s ease-in-out forwards;
     box-shadow: 0 0 10px hsla(45, 100%, 72%, 0.6);
}

.progress-bar::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(90deg, transparent, hsla(45, 100%, 72%, 0.4), transparent);
     animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
     0% {
          transform: translateX(-100%);
     }

     100% {
          transform: translateX(100%);
     }
}

@keyframes progressAnimation {
     0% {
          width: 0%;
     }

     100% {
          width: 100%;
     }
}

.preloader-percentage {
     font-size: 18px;
     color: var(--light-gray);
     font-weight: 500;
     letter-spacing: 1px;
}

.percentage-text {
     color: var(--orange-yellow-crayola);
     font-weight: 600;
     font-size: 24px;
}

/* Responsive */
@media (max-width: 580px) {
     .code-bracket {
          font-size: 48px;
     }

     .preloader-text {
          font-size: 24px;
     }

     .preloader-progress {
          width: 250px;
     }

     .preloader-logo {
          gap: 10px;
          margin-bottom: 30px;
     }
}