/* Заставка при загрузке и открытии сайта. Лежит отдельным маленьким файлом, чтобы показаться раньше всего остального.
   Сверху — знак и название, в центре — анимированная уточка (.lottie) с цепочкой шагов «о чём проект», внизу — крупный процент
   загрузки и полоска. Проценты и шаги ведёт js/splash.js; когда сайт готов, он открывается «диафрагмой» из центра. */

@property --r {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.splash {
  --r: 0%;
  --e: cubic-bezier(0.2, 0.8, 0.2, 1);
  --sp: cubic-bezier(0.34, 1.45, 0.5, 1);
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: max(26px, 5vh) 24px calc(max(26px, 5vh) + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: 'Unbounded', 'Involve', 'Montserrat', sans-serif;
  -webkit-user-select: none;
  user-select: none;
  /* если скрипт сайта не запустился — заставка сама уходит, а не висит вечно */
  animation: sp-failsafe 0.01s 14s forwards;
}

/* ----- фон: мягкое свечение, медленный луч и плывущие вверх искры ----- */
.splash-glow,
.splash-sweep {
  position: absolute;
  left: 50%;
  top: 46%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.splash-glow {
  width: min(130vmax, 1100px);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.032) 46%, transparent 72%);
  animation:
    sp-fade 1.2s both,
    sp-glow 4s ease-in-out infinite;
}
.splash-sweep {
  width: 190vmax;
  background: conic-gradient(from 0deg, transparent 0 74%, rgba(255, 255, 255, 0.05) 88%, transparent 100%);
  -webkit-mask: radial-gradient(circle, #000 0, transparent 38%);
  mask: radial-gradient(circle, #000 0, transparent 38%);
  animation:
    sp-fade 1.6s both,
    sp-sweep 10s linear infinite;
}
.splash-dots i {
  position: absolute;
  left: var(--x);
  bottom: -12px;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  animation: sp-float var(--d) linear var(--w) infinite;
}

/* ----- знак и название ----- */
.splash-brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0;
  animation: sp-rise 0.9s var(--e) 0.15s forwards;
}
.splash-brand b {
  font-weight: 400;
}

/* ----- центр: уточка, текст шага, цепочка ----- */
.splash-main {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3vh, 26px);
}
.splash-stage {
  position: relative;
  flex: none;
  width: clamp(140px, min(56vmin, 32vh), 260px);
  aspect-ratio: 1;
  opacity: 0;
  animation: sp-rise 0.9s var(--e) 0.25s forwards;
}
.splash-stage::before {
  content: '';
  position: absolute;
  inset: -34%;
  background: radial-gradient(closest-side, rgba(255, 200, 70, 0.17), transparent 72%);
  animation: sp-halo 3.4s ease-in-out infinite;
}
.splash-ring {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  opacity: 0;
  animation: sp-ring 3.6s cubic-bezier(0.2, 0.6, 0.3, 1) 0.6s infinite;
}
.splash-ring.r2 {
  animation-delay: 2.4s;
}
.splash-ducks {
  position: absolute;
  inset: 0;
}
.splash-duck {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.72) translateY(14px);
  filter: blur(10px);
  pointer-events: none;
  transition:
    opacity 0.55s,
    transform 0.9s var(--sp),
    filter 0.55s;
}
.splash-duck.on {
  opacity: 1;
  transform: none;
  filter: none;
}
.splash-duck.off {
  opacity: 0;
  transform: scale(1.22) translateY(-8px);
  filter: blur(12px);
}
.splash-duck img,
.splash-canvas {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.splash-canvas {
  opacity: 0;
  transition: opacity 0.5s;
}
.splash-canvas.on {
  opacity: 1;
}
.splash-msg {
  width: min(540px, 88vw);
  min-height: 5.6em;
  text-align: center;
}
.splash-msg h2 {
  margin: 0;
  font-size: clamp(18px, 3.2vmin, 26px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.splash-msg p {
  margin: 9px auto 0;
  max-width: 440px;
  font-family: 'Involve', 'Montserrat', sans-serif;
  font-size: clamp(13px, 2vmin, 15px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.62);
}
.splash-msg.in h2 {
  animation: sp-text 0.75s var(--e) both;
}
.splash-msg.in p {
  animation: sp-text 0.75s var(--e) 0.1s both;
}

/* цепочка: звенья загораются по очереди, между ними заполняется нить */
.splash-chain {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.splash-chain li {
  display: flex;
  align-items: center;
}
.splash-chain .node {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.6px rgba(255, 255, 255, 0.3);
  transition:
    background 0.4s,
    box-shadow 0.4s,
    transform 0.6s var(--sp);
}
.splash-chain li.done .node {
  background: #fff;
  box-shadow: none;
}
.splash-chain li.on .node {
  background: #fff;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.16),
    0 0 16px rgba(255, 255, 255, 0.6);
  transform: scale(1.18);
}
.splash-chain .link {
  position: relative;
  display: block;
  width: clamp(36px, 9vmin, 70px);
  height: 2px;
  margin: 0 6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.splash-chain .link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  transform-origin: left;
  transform: scaleX(var(--f, 0));
}

/* ----- низ: процент и полоска ----- */
.splash-foot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  opacity: 0;
  animation: sp-rise 0.9s var(--e) 0.4s forwards;
}
.splash-pct {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: clamp(40px, 9vmin, 68px);
  line-height: 1;
  letter-spacing: -0.04em;
}
.splash-pct b {
  min-width: 2.15ch;
  text-align: right;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.splash-pct span {
  font-size: 0.4em;
  letter-spacing: 0;
  opacity: 0.55;
}
.splash-track {
  position: relative;
  width: min(320px, 72vw);
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.splash-track i {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.35), #fff);
  box-shadow: 0 0 14px 2px rgba(255, 255, 255, 0.55);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}
.splash-hint {
  min-height: 1.5em;
  font-family: 'Involve', 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* ----- кадры ----- */
@keyframes sp-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes sp-text {
  from {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@keyframes sp-fade {
  to {
    opacity: 1;
  }
}
@keyframes sp-glow {
  50% {
    transform: translate(-50%, -50%) scale(1.14);
    opacity: 0.7;
  }
}
@keyframes sp-halo {
  50% {
    transform: scale(1.12);
    opacity: 0.65;
  }
}
@keyframes sp-sweep {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes sp-ring {
  0% {
    opacity: 0.7;
    transform: scale(0.9);
  }
  100% {
    opacity: 0;
    transform: scale(1.7);
  }
}
@keyframes sp-float {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  15% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    transform: translateY(-105vh);
  }
}
@keyframes sp-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* ----- уход: содержимое раздувается, а сайт открывается «диафрагмой» из центра ----- */
.splash.out {
  pointer-events: none;
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 1.5%));
  mask: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 1.5%));
  animation: sp-iris 1.5s cubic-bezier(0.6, 0, 0.2, 1) forwards;
}
.splash.out .splash-main {
  animation: sp-zoom 1s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}
.splash.out .splash-brand,
.splash.out .splash-foot {
  animation: sp-away 0.6s var(--e) forwards;
}
@keyframes sp-iris {
  0% {
    --r: 0%;
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    --r: 108%;
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes sp-zoom {
  to {
    transform: scale(1.6);
    opacity: 0;
    filter: blur(8px);
  }
}
@keyframes sp-away {
  to {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* без анимаций: статичная картинка и быстрое растворение */
html.no-motion .splash *,
html.no-motion .splash::before {
  animation: none !important;
  transition: none !important;
}
html.no-motion .splash-brand,
html.no-motion .splash-stage,
html.no-motion .splash-foot {
  opacity: 1;
}
html.no-motion .splash-ring,
html.no-motion .splash-dots,
html.no-motion .splash-sweep {
  display: none;
}
html.no-motion .splash.out {
  -webkit-mask: none;
  mask: none;
  animation: sp-failsafe 0.3s forwards !important;
}