/* ==========================================================================
   UKS 31 RYBNIK - PREMIUM STAGGERED COLUMN PAGE TRANSITIONS
   ========================================================================== */

#page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: all;
  background: transparent; /* transparent because the columns provide the background */
}

/* Background columns container */
.loader-bg-columns {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  pointer-events: none;
  z-index: 1;
}

.loader-col {
  flex: 1;
  height: 100%;
  transform: scaleY(1);
  will-change: transform;
}

/* Symmetric premium brand color palette for columns */
.loader-col.col-1 { background-color: var(--color-dark, #070b13); }
.loader-col.col-2 { background-color: var(--color-primary-dark, #0036b5); }
.loader-col.col-3 { background-color: var(--color-primary, #0052ff); }
.loader-col.col-4 { background-color: var(--color-primary-dark, #0036b5); }
.loader-col.col-5 { background-color: var(--color-dark, #070b13); }

/* Center Content Wrapper */
.loader-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  text-align: center;
}

/* Background Animated Dots overlay on top of columns */
.loader-dots-bg {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  transform: rotate(15deg);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  animation: loader-dots-move 60s linear infinite;
  will-change: transform, opacity;
}

@keyframes loader-dots-move {
  0% {
    transform: translate(0, 0) rotate(15deg);
  }
  100% {
    transform: translate(-100px, -100px) rotate(15deg);
  }
}

/* Logo Image Styling */
.loader-logo {
  height: clamp(65px, 12vw, 105px);
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0;
  transform: scale(0.85);
  margin-bottom: 24px;
  z-index: 3;
  will-change: transform, opacity;
}

/* Loader Circle Spinner */
.loader-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.08);
  border-top-color: var(--color-primary, #0052ff);
  border-radius: 50%;
  animation: loader-spin 1s cubic-bezier(0.55, 0.1, 0.45, 0.9) infinite;
  opacity: 0;
  z-index: 3;
  will-change: transform, opacity;
}

@keyframes loader-spin {
  to {
    transform: rotate(360deg);
  }
}