/* ===== Preloader v2 (ring + floating duck) ===== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: radial-gradient(1000px 700px at 30% 20%, rgba(255, 195, 80, .12), transparent 60%), radial-gradient(900px 600px at 75% 10%, rgba(120, 90, 255, .12), transparent 62%), radial-gradient(1000px 700px at 60% 80%, rgba(255, 80, 180, .08), transparent 65%), rgba(6, 8, 14, .92);
  backdrop-filter: blur(18px) saturate(1.06);
  -webkit-backdrop-filter: blur(18px) saturate(1.06);
  transition: opacity .75s ease, transform .75s ease;
}

.preloader.done {
  opacity: 0;
  transform: translateY(-8px) scale(.99);
  pointer-events: none;
}

.preloaderInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.ringWrap {
  width: 190px;
  height: 190px;
  display: grid;
  place-items: center;
  position: relative;
}

.ringSvg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ringBg {
  fill: none;
  stroke: rgba(255, 255, 255, .10);
  stroke-width: 10;
}

.ringProg {
  fill: none;
  stroke: rgba(255, 195, 80, .95);
  stroke-width: 10;
  stroke-linecap: round;
  filter: url(#glow);
  stroke-dasharray: 289;
  /* 2*pi*r (r=46) */
  stroke-dashoffset: 289;
  animation: ringFill 3.75s cubic-bezier(.2, .85, .25, 1) forwards;
}

@keyframes ringFill {
  0% {
    stroke-dashoffset: 289;
    opacity: .95;
  }

  85% {
    stroke-dashoffset: 24;
    opacity: 1;
  }

  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

.duckCore {
  width: 118px;
  height: 118px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  transform: translateZ(0);
  animation: duckBob 2.4s ease-in-out infinite;
}

.duckImg {
  width: 118px;
  height: 118px;
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .45)) drop-shadow(0 0 18px rgba(255, 195, 80, .22));
  animation: duckSwim 2.8s ease-in-out infinite;
}

@keyframes duckBob {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes duckSwim {

  0%,
  100% {
    transform: translateX(-6px) rotate(-1.2deg);
  }

  50% {
    transform: translateX(6px) rotate(1.2deg);
  }
}

.preloaderCaption {
  margin-top: 14px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .2px;
  background: linear-gradient(90deg, rgba(255, 214, 102, 1), rgba(255, 158, 45, 1), rgba(255, 214, 102, 1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 10px 40px rgba(255, 195, 80, .10);
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {

  .ringProg,
  .duckCore,
  .duckImg {
    animation: none !important;
  }

  .preloader {
    transition: none !important;
  }
}

/* --- Preloader: speedometer premium --- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: rgba(6, 7, 12, .72);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  transition: opacity .55s ease, transform .55s ease;
}

.preloader.hide {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

.preGlass {
  width: min(420px, 92vw);
  padding: 22px 22px 18px;
  border-radius: 24px;
  background: rgba(18, 18, 26, .42);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 24px 90px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
  position: relative;
  overflow: hidden;
}

.preGlass::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .18), transparent 45%), radial-gradient(circle at 70% 60%, rgba(255, 214, 102, .14), transparent 55%);
  filter: blur(22px);
  opacity: .55;
  animation: glassSheen 5.8s ease-in-out infinite;
}

@keyframes glassSheen {

  0%,
  100% {
    transform: translate3d(-2%, -1%, 0) scale(1.02);
    opacity: .45
  }

  50% {
    transform: translate3d(2%, 1%, 0) scale(1.06);
    opacity: .62
  }
}

.speedWrap {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 210px;
}

.speedo {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  opacity: .95
}

.ticks line {
  stroke: rgba(255, 255, 255, .16);
  stroke-width: 2;
  stroke-linecap: round
}

.arc {
  fill: none;
  stroke-linecap: round;
  stroke-width: 10
}

.arcBase {
  stroke: rgba(255, 255, 255, .10)
}

.arcProg {
  fill: none;
  stroke: rgba(255, 180, 60, .92);
  stroke-width: 10;
  stroke-linecap: round;
  filter: drop-shadow(0 8px 18px rgba(255, 175, 70, .28));
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: spdFill var(--loadDur) ease-in-out forwards;
}

@keyframes spdFill {
  to {
    stroke-dashoffset: 0
  }
}

.needle {
  transform-origin: 120px 120px;
  transform: rotate(-90deg);
  animation: needleSweep var(--loadDur) ease-in-out forwards;
}

@keyframes needleSweep {
  0% {
    transform: rotate(-90deg)
  }

  100% {
    transform: rotate(90deg)
  }
}

.hub {
  fill: rgba(255, 255, 255, .86);
  opacity: .9
}

.needleLine {
  stroke: rgba(255, 255, 255, .92);
  stroke-width: 3.5;
  stroke-linecap: round;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35));
}

.duckCenter {
  width: 118px;
  height: 118px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.duckCenter::after {
  content: "";
  position: absolute;
  left: -25%;
  top: -35%;
  width: 150%;
  height: 160%;
  background: radial-gradient(circle at 40% 35%, rgba(255, 214, 102, .22), transparent 45%);
  opacity: .9;
  mix-blend-mode: screen;
  animation: duckAura 3.2s ease-in-out infinite;
}

@keyframes duckAura {

  0%,
  100% {
    transform: translate3d(-2%, 0, 0) scale(1.0);
    opacity: .55
  }

  50% {
    transform: translate3d(2%, 0, 0) scale(1.08);
    opacity: .78
  }
}

.duckSpin {
  width: 92px;
  height: 92px;
  object-fit: contain;
  animation: none;
}

/* Header duck: micro "alive" wobble (no side-to-side swimming) */
.siteHeader .duckSpin {
  animation: brandWobble 7.5s ease-in-out infinite !important;
  transform-origin: 50% 60%;
  will-change: transform;
}

@keyframes brandWobble {

  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-1deg);
  }

  50% {
    transform: translate3d(0, -1px, 0) rotate(1deg);
  }
}

@keyframes duckSwimMicro {

  0%,
  100% {
    transform: translateY(0) rotate(-2deg)
  }

  50% {
    transform: translateY(-3px) rotate(2deg)
  }
}

.preText {
  margin-top: 14px;
  text-align: center;
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 18px;
  background: linear-gradient(90deg, rgba(255, 214, 102, 1), rgba(255, 158, 45, 1), rgba(255, 214, 102, 1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 10px 40px rgba(255, 195, 80, .10);
}

/* Make header duck calm (no rave) */
.logoDuck {
  animation: logoDuckMicro 3.8s ease-in-out infinite !important;
}

@keyframes logoDuckMicro {

  0%,
  100% {
    transform: translateY(0) rotate(-2deg)
  }

  50% {
    transform: translateY(-1.5px) rotate(1deg)
  }
}

/* Tune: logo duck should be subtly alive, not dancing */
.logoDuck {
  animation: none !important;
  transform: none !important;
}

/* Preloader caption visibility */
.preCaption {
  display: block;
  margin-top: 14px;
  font-size: 14px;
  letter-spacing: .2px;
  opacity: .85;
}
/* Добавьте эти стили в конец файла preloader.css */

.preloader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.55s ease, visibility 0.55s ease;
}

/* Анимация скрытия */
.preloader.hide {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

/* Убедитесь, что прелоадер скрывает контент */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  /* ... остальные стили ... */
}

/* Управление видимостью контента */
body.is-loading main {
  opacity: 0;
  visibility: hidden;
}

body.is-loaded main {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease;
}