/* ============================================================
   PREMIUM PRELOADER — Brand Awakening (emblem edition)
   Ізольовані стилі: усі класи з префіксом .pl- / #preloader.
   Нічого не перетирає стилі сайту.
   ============================================================ */

/* ---------- Оверлей ---------- */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 2147483000; /* вище за хедер Bricks (9999/10001) — перекриває його повністю */
  background: #FFFFFF; /* тільки чистий білий */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  clip-path: inset(0 0 0 0);
  transition:
    clip-path 0.9s cubic-bezier(0.83, 0, 0.17, 1),
    visibility 0s linear 0.9s;
}

/* Вихід: оверлей «піднімається» вгору через clip-path reveal */
#preloader.pl-done {
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  pointer-events: none;
}

/* Блокуємо скрол, поки прелоадер активний */
body.pl-lock {
  overflow: hidden;
}

/* ---------- Логотип ---------- */
.pl-logo-wrap {
  position: relative;
  line-height: 0;
}

.pl-logo {
  width: clamp(150px, 34vw, 210px); /* емблема ~квадратна; на мобільних менша, завжди по центру */
  height: auto;
  display: block;
  animation: plLogoIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
  will-change: opacity, transform, filter;
}

@keyframes plLogoIn {
  from { opacity: 0; transform: scale(0.96); filter: blur(10px); }
  to   { opacity: 1; transform: scale(1);     filter: blur(0);   }
}

/* --- Синій контур-щит: mask reveal (коло розкривається з центру емблеми) --- */
.pl-frame-mask-circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: plMaskGrow 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}

@keyframes plMaskGrow {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* --- Внутрішні шари «оживають» пошарово: світлі → середні → глибокі → темні --- */
.pl-paper { animation: plFade 0.6s ease-out 0.30s both; } /* білі площини — база */
.pl-light { animation: plFade 0.7s ease-out 0.75s both; } /* #C9DCEA */
.pl-mid   { animation: plRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.90s both; } /* #6797BD */
.pl-deep  { animation: plFade 0.6s ease-out 1.05s both; } /* #1D4161 */
.pl-dark  { animation: plFade 0.6s ease-out 1.15s both; } /* #1C3341 — чисто, останніми */

.pl-mid { transform-box: fill-box; }

@keyframes plFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes plRise {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* --- Делікатний light sweep по логотипу --- */
.pl-sweep {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.pl-sweep::after {
  content: "";
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: 0;
  width: 32%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-160%) skewX(-18deg);
  animation: plSweep 1s ease-in-out 1.9s both;
}

@keyframes plSweep {
  from { transform: translateX(-160%) skewX(-18deg); }
  to   { transform: translateX(420%)  skewX(-18deg); }
}

/* ---------- Прогрес ---------- */
.pl-meta {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: plRiseMeta 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.35s both;
}

@keyframes plRiseMeta {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Тонка мінімалістична лінія прогресу */
.pl-progress {
  width: 168px;
  height: 2px;
  border-radius: 2px;
  background: rgba(28, 51, 65, 0.10); /* доріжка у тон бренду */
  overflow: hidden;
}

.pl-bar-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: #206FB1; /* заповнення основним синім бренду */
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* ---------- Поява hero після прелоадера ---------- */
[data-hero-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--pl-d, 0.1s),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--pl-d, 0.1s);
}

body.pl-revealed [data-hero-reveal] {
  opacity: 1;
  transform: none;
}

/* ---------- Показ лише раз за сесію (без flash до JS) ---------- */
html.pl-skip #preloader { display: none; }
html.pl-skip [data-hero-reveal] { opacity: 1; transform: none; transition: none; }

/* ---------- prefers-reduced-motion: спрощений fade ---------- */
@media (prefers-reduced-motion: reduce) {
  .pl-logo,
  .pl-frame-mask-circle,
  .pl-paper,
  .pl-light,
  .pl-mid,
  .pl-deep,
  .pl-dark,
  .pl-meta {
    animation: plFade 0.5s ease-out both !important;
    clip-path: none !important;
    transform: none !important;
    filter: none !important;
  }

  .pl-sweep::after { display: none; }

  #preloader {
    clip-path: none;
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
  }

  #preloader.pl-done {
    clip-path: none;
    opacity: 0;
  }

  [data-hero-reveal] {
    transform: none;
    transition: opacity 0.5s ease;
  }
}