/**
 * Page Loader with Logo
 * Loader strony z animowanym logo e-venus - efekt wipe
 * FIXED: Brak skokow, jednorazowe ladowanie
 */

/* ===============================================
   KONTENER LOADERA - STABILNE POZYCJONOWANIE
   =============================================== */
.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  /* Brak animacji opacity - tylko visibility dla natychmiastowego ukrycia */
  opacity: 1;
  visibility: visible;
  /* Zapobieganie scrollowaniu podczas ladowania */
  overflow: hidden;
}

/* Stan zaladowany - plynne znikniecie */
.page-loader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
}

/* ===============================================
   KONTENER LOGO - STABILNE CENTROWANIE
   =============================================== */
.page-loader__logo-container {
  position: relative;
  width: 220px;
  height: 60px; /* Stala wysokosc zapobiega skokom */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Zapobieganie przesunieciam */
  transform: translateZ(0);
  will-change: auto; /* Wylaczenie will-change po zaladowaniu */
}

/* ===============================================
   LOGO - EFEKT WIPE (jednorazowe ladowanie koloru)
   =============================================== */
.page-loader__logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
  /* Zapobieganie przesunieciam podczas renderowania */
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Logo szare (tlo) */
.page-loader__logo--gray {
  filter: grayscale(100%) opacity(0.3);
  z-index: 1;
}

/* Logo kolorowe (nakladka z jednorazowa animacja clip-path) */
.page-loader__logo--color {
  z-index: 2;
  clip-path: inset(0 100% 0 0);
  animation: logoWipeOnce 1.5s ease-out forwards; /* forwards = zatrzymuje sie na koncu */
}

/* Jednorazowa animacja - nie infinite! */
@keyframes logoWipeOnce {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0% 0 0);
  }
}

/* ===============================================
   UKRYCIE STRONY DO ZALADOWANIA
   =============================================== */
body:not(.page-ready) #page {
  opacity: 0;
}

body.page-ready #page {
  opacity: 1;
  transition: opacity 0.3s ease-out;
}

/* ===============================================
   MOBILE RESPONSIVE
   =============================================== */
@media screen and (max-width: 576px) {
  .page-loader__logo-container {
    width: 160px;
    height: 45px;
  }
}

@media screen and (max-width: 380px) {
  .page-loader__logo-container {
    width: 140px;
    height: 40px;
  }
}