/* ============================================================
   SMOOTH PRELOADER — PRINT MALL
   ============================================================ */

/* ---------- Прелоадер ---------- */
.smooth-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  overflow: hidden;
  will-change: clip-path, opacity;
}

.smooth-preloader__inner {
  position: relative;
  z-index: 2;
  width: min(30vw, 260px);
  aspect-ratio: 2210 / 1999;
}

.logo-house {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ============================================================
   АНИМАЦИЯ ЛОГОТИПА — ЦИКЛИЧЕСКАЯ
   Полный цикл = 2.2s. Домик рисуется снова и снова,
   пока браузер грузит страницу.
   ============================================================ */

/* 1) Контур домика — строится снизу вверх */
.logo-house .house-body {
  clip-path: inset(100% 0 0 0);
  -webkit-clip-path: inset(100% 0 0 0);
  animation: pm-houseUp 2.2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
@keyframes pm-houseUp {
  0%   { clip-path: inset(100% 0 0 0); -webkit-clip-path: inset(100% 0 0 0); }
  34%  { clip-path: inset(0 0 0 0);    -webkit-clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 0);    -webkit-clip-path: inset(0 0 0 0); }
}

/* 2) CMYK-полосы — выезжают снизу */
.logo-house .bar {
  transform-origin: center bottom;
  transform: scaleY(0);
  animation: pm-barUp 2.2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.logo-house .bar--cyan    { animation-name: pm-barUpCyan; }
.logo-house .bar--magenta { animation-name: pm-barUpMagenta; }
.logo-house .bar--yellow  { animation-name: pm-barUpYellow; }

@keyframes pm-barUpCyan {
  0%, 23%   { transform: scaleY(0); }
  36%, 100% { transform: scaleY(1); }
}
@keyframes pm-barUpMagenta {
  0%, 30%   { transform: scaleY(0); }
  43%, 100% { transform: scaleY(1); }
}
@keyframes pm-barUpYellow {
  0%, 36%   { transform: scaleY(0); }
  50%, 100% { transform: scaleY(1); }
}

/* 3) Блики (градиенты поверх полос) */
.logo-house .shine {
  opacity: 0;
  animation: pm-fadeIn 2.2s ease-out infinite;
}
@keyframes pm-fadeIn {
  0%, 43%   { opacity: 0; }
  61%, 100% { opacity: 1; }
}

/* 4) Чёрные детали крыши */
.logo-house .house-part {
  opacity: 0;
  transform: translateY(-30px);
  animation: pm-dropIn 2.2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.logo-house .house-part:nth-of-type(1) { animation-name: pm-dropIn1; }
.logo-house .house-part:nth-of-type(2) { animation-name: pm-dropIn2; }
.logo-house .house-part:nth-of-type(3) { animation-name: pm-dropIn3; }

@keyframes pm-dropIn1 {
  0%, 39%   { opacity: 0; transform: translateY(-30px); }
  57%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes pm-dropIn2 {
  0%, 43%   { opacity: 0; transform: translateY(-30px); }
  61%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes pm-dropIn3 {
  0%, 45%   { opacity: 0; transform: translateY(-30px); }
  63%, 100% { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   ВЫХОД — clipOut (схлопывание к центру)
   ============================================================ */
.smooth-preloader--clipOut {
  transition: clip-path 1.1s cubic-bezier(0.77, 0, 0.175, 1);
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}
.smooth-preloader--clipOut.is-hidden {
  clip-path: inset(50% 0 50% 0);
  -webkit-clip-path: inset(50% 0 50% 0);
}
.smooth-preloader--clipOut .smooth-preloader__inner {
  transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1),
              opacity 0.5s ease;
}
.smooth-preloader--clipOut.is-hidden .smooth-preloader__inner {
  transform: scale(0.85);
  opacity: 0;
}

/* ============================================================
   ПЕРЕХОДНЫЙ ПРЕЛОАДЕР (при клике по ссылкам)
   Ускоренная анимация + fade-in
   ============================================================ */

/* Fade-in самого оверлея */
.smooth-preloader.is-transition {
  /* переход opacity управляется через inline-style из JS */
  transition: opacity 250ms ease;
}

/* Ускоренная цикличная анимация логотипа при переходе */
.smooth-preloader.is-transition .logo-house .house-body {
  animation-duration: 1.3s;
}
.smooth-preloader.is-transition .logo-house .bar {
  animation-duration: 1.3s;
}
.smooth-preloader.is-transition .logo-house .shine {
  animation-duration: 1.3s;
}
.smooth-preloader.is-transition .logo-house .house-part {
  animation-duration: 1.3s;
}

/* ============================================================
   ПРИ ПЕРЕХОДЕ МЕЖДУ СТРАНИЦАМИ
   Прелоадер уже был виден на прошлой странице — не анимируем
   появление снова, просто показываем сразу.
   ============================================================ */
.smooth-preloader.is-navigating {
  opacity: 1;
  animation: none;
  transition: none;
}

/* Логотип сразу в конечном состоянии, без проигрывания анимации
   (чтобы не было "двойного появления") */
.smooth-preloader.is-navigating .logo-house .house-body {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
  animation: none;
}
.smooth-preloader.is-navigating .logo-house .bar {
  transform: scaleY(1);
  animation: none;
}
.smooth-preloader.is-navigating .logo-house .shine {
  opacity: 1;
  animation: none;
}
.smooth-preloader.is-navigating .logo-house .house-part {
  opacity: 1;
  transform: translateY(0);
  animation: none;
}

/* ============================================================
   ПОЯВЛЕНИЕ КОНТЕНТА после прелоадера
   ============================================================ */
body.is-loaded .page,
body.is-loaded main,
body.is-loaded #app {
  opacity: 1;
  transform: translateY(0);
}

.page, main, #app {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s ease 0.15s,
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}