/* =============================================
   LOADING SCREEN
   ============================================= */

.loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  background: var(--c-bg);
  background-image: radial-gradient(ellipse at 50% 50%, rgba(229, 37, 53, 0.08) 0%, transparent 60%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.loader__logo {
  font-family: var(--ff-heading);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  background: linear-gradient(
    135deg,
    var(--c-red-hot) 0%,
    #fff 25%,
    var(--c-red-vivid) 50%,
    #fff 75%,
    var(--c-red-hot) 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: loaderGradient 3s ease-in-out infinite;
  position: relative;
}

/* Glow behind text */
.loader__logo::after {
  content: 'FunTime';
  position: absolute;
  inset: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  color: var(--c-red-vivid);
  filter: blur(25px);
  opacity: 0.5;
  z-index: -1;
  animation: loaderGlow 2s ease-in-out infinite alternate;
}

@keyframes loaderGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes loaderGlow {
  0% { opacity: 0.3; filter: blur(20px); }
  100% { opacity: 0.6; filter: blur(30px); }
}

.loader__bar-track {
  width: 200px;
  height: 2px;
  background: rgba(229, 37, 53, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.loader__bar {
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, var(--c-red-dark), var(--c-red-vivid), var(--c-rose));
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(229, 37, 53, 0.6);
  animation: loaderSlide 1.2s ease-in-out infinite;
}

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

.loader__text {
  font-family: var(--ff-mono);
  font-size: var(--fs-label);
  color: var(--c-text-muted);
  letter-spacing: var(--ls-ultra);
  text-transform: uppercase;
}

/* Exit animation */
.loader--exit {
  animation: loaderExit 0.6s ease-in-out forwards;
}

@keyframes loaderExit {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
    visibility: hidden;
  }
}

/* Page is loaded */
body.loaded .loader {
  pointer-events: none;
  display: none;
}