/* RUNA Pilates — preloader
   Скрол блокується в JS без overflow:hidden, щоб смуга прокрутки не зникала і сайт не стрибав */

.runa-preloader {
  --rp-ease: cubic-bezier(.22, 1, .36, 1);
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f8f2e8;
  transition: opacity .6s var(--rp-ease) .05s, visibility .65s;
}

.runa-preloader__bg {
  position: absolute;
  inset: 0;
  background: url("img/preloader-bg.jpg") center / cover no-repeat;
  transform: scale(1.06);
  transition: transform 1.6s var(--rp-ease);
}
@media (max-width: 767px) {
  .runa-preloader__bg { background-image: url("img/preloader-bg-mobile.jpg"); background-position: 62% center; }
}
@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
  .runa-preloader__logo { width: min(32vw, 300px) !important; }
}
@media (max-width: 767px) and (orientation: portrait) {
  .runa-preloader__logo { width: min(46vw, 210px) !important; }
}

.runa-preloader__logo {
  position: relative;
  /* ширина від екрана, але не вища за ~50% висоти (горизонтальний телефон) */
  width: min(clamp(170px, 21vw, 310px), calc(50vh * 613 / 855));
  aspect-ratio: 613 / 855;
  transition: transform .6s var(--rp-ease), opacity .5s var(--rp-ease);
}
.runa-preloader__logo img {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
  margin: 0;
  opacity: 0;
  user-select: none;
  -webkit-user-drag: none;
}
.rp-flower  { left: 4.08%;  top: 0;      width: 91.84%; transform: scale(.4) rotate(-90deg); }
.rp-r       { left: 37.52%; top: 21.40%; width: 28.71%; transform: translateY(18%); filter: blur(6px); }
.rp-l1      { left: .16%;   top: 74.39%; width: 17.13%; }
.rp-l2      { left: 26.10%; top: 74.39%; width: 18.60%; }
.rp-l3      { left: 53.51%; top: 74.39%; width: 18.43%; }
.rp-l4      { left: 80.10%; top: 74.39%; width: 19.74%; }
.rp-l1, .rp-l2, .rp-l3, .rp-l4 { transform: translateY(35%); filter: blur(4px); }
.rp-pilates { left: 20.39%; top: 95.67%; width: 59.22%; clip-path: inset(0 50% 0 50%); }

.runa-preloader.is-ready .runa-preloader__bg { transform: scale(1); }
.runa-preloader.is-ready .rp-flower  { animation: rpFlower .8s var(--rp-ease) 0s forwards; }
.runa-preloader.is-ready .rp-r       { animation: rpIn .6s var(--rp-ease) .35s forwards; }
.runa-preloader.is-ready .rp-l1      { animation: rpIn .5s var(--rp-ease) .5s forwards; }
.runa-preloader.is-ready .rp-l2      { animation: rpIn .5s var(--rp-ease) .56s forwards; }
.runa-preloader.is-ready .rp-l3      { animation: rpIn .5s var(--rp-ease) .62s forwards; }
.runa-preloader.is-ready .rp-l4      { animation: rpIn .5s var(--rp-ease) .68s forwards; }
.runa-preloader.is-ready .rp-pilates { animation: rpReveal .6s var(--rp-ease) .75s forwards; }

@keyframes rpFlower { to { opacity: 1; transform: none; } }
@keyframes rpIn     { to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes rpReveal { to { opacity: 1; clip-path: inset(0 0 0 0); } }

.runa-preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.runa-preloader.is-done .runa-preloader__logo { transform: translateY(-30px) scale(.97); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .runa-preloader, .runa-preloader * { animation-duration: .01s !important; animation-delay: 0s !important; transition-duration: .3s !important; }
}