/* =========================================================
   ДАРСИ — прелоадер. Кольцо-прогресс, проявление лого
   и «раскрывающийся занавес» на выходе.
   ========================================================= */

.pre{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background:#0B0B0C;
  overflow:hidden;
}
/* тёплое свечение позади лого */
.pre::before{
  content:''; position:absolute; left:50%; top:50%;
  width:min(90vw,760px); aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(227,169,186,.16) 0%, rgba(227,169,186,0) 62%);
  animation:preGlow 3.4s ease-in-out infinite;
}
@keyframes preGlow{
  0%,100%{opacity:.55; transform:translate(-50%,-50%) scale(.94)}
  50%{opacity:1; transform:translate(-50%,-50%) scale(1.06)}
}

/* две шторки, разъезжающиеся вверх и вниз */
.pre__curtain{
  position:absolute; left:0; right:0; height:50.2%;
  background:#0B0B0C; z-index:2;
  transition:transform 1s cubic-bezier(.76,0,.24,1);
}
.pre__curtain--t{top:0}
.pre__curtain--b{bottom:0}

.pre__box{
  position:relative; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:26px;
  transition:opacity .45s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}

/* ---------- кольцо ---------- */
.pre__ring{position:relative; width:clamp(150px,17vw,206px); aspect-ratio:1; display:grid; place-items:center}
.pre__prog{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg)}
.pre__ring circle{fill:none; stroke-width:1.4; vector-effect:non-scaling-stroke}
.pre__track{stroke:rgba(255,255,255,.12)}
.pre__bar{
  stroke:url(#preGrad); stroke-linecap:round;
  stroke-dasharray:1 1;                 /* задаётся из JS */
  transition:stroke-dashoffset .5s cubic-bezier(.2,.7,.3,1);
}

/* обручальные кольца внутри — тонкая свадебная деталь */
.pre__rings{position:relative; width:64%; height:auto; aspect-ratio:100/60; opacity:.9}
.pre__rings circle{stroke:rgba(255,255,255,.62); stroke-width:1.2; vector-effect:non-scaling-stroke}
.pre__rings circle:first-child{animation:preRingA 3s ease-in-out infinite}
.pre__rings circle:last-child{animation:preRingB 3s ease-in-out infinite}
@keyframes preRingA{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(-3px)}
}
@keyframes preRingB{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(3px)}
}

/* ---------- лого и подпись ---------- */
.pre__logo{
  width:clamp(140px,14vw,190px); height:auto; display:block;
  opacity:0; transform:translateY(8px);
  animation:preIn .9s cubic-bezier(.2,.7,.3,1) .15s forwards;
}
@keyframes preIn{to{opacity:1; transform:none}}

.pre__cap{
  margin:0; display:flex; align-items:center; gap:12px;
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.42);
  opacity:0; animation:preIn .9s cubic-bezier(.2,.7,.3,1) .35s forwards;
}
.pre__cap b{
  min-width:3.2em; text-align:right; color:#fff; font-weight:400;
  font-variant-numeric:tabular-nums; letter-spacing:.1em;
}

/* ---------- выход ---------- */
.pre.is-done .pre__box{opacity:0; transform:translateY(-10px)}
.pre.is-done .pre__curtain--t{transform:translateY(-100%)}
.pre.is-done .pre__curtain--b{transform:translateY(100%)}
.pre.is-hidden{display:none}

/* пока грузимся — страница не скроллится */
html.is-loading, html.is-loading body{overflow:hidden; height:100%}

@media (prefers-reduced-motion:reduce){
  .pre::before,.pre__rings circle{animation:none}
  .pre__logo,.pre__cap{opacity:1; animation:none; transform:none}
  .pre__curtain,.pre__box{transition:opacity .2s linear}
}