/*
 * Copyright (c) 2026 PsyGioX. Licensed under the MIT License.
 * Source: https://github.com/PsyGioX/PsyGioX-website — Site: https://psygiox-dev.vercel.app/
 *
 * Copyright (c) 2026 PsyGioX. Лицензия MIT.
 * Исходники: https://github.com/PsyGioX/PsyGioX-website — Сайт: https://psygiox-dev.vercel.app/
 */
/* ==========================================================================
   Прелоадер — «ставлю пластинку»
   Показывается один раз за сессию (решает встроенный скрипт в <head>, он ставит html.pl-on),
   логика — scripts/preloader.js: он кладёт прогресс 0–100 в переменную --p, а иглой, полоской и числом
   управляет CSS. Без .pl-on элемент скрыт и ничего не стоит. Токены берутся из site.css.
   ========================================================================== */

.pl {
  --p: 0;
  --pl-d: clamp(190px, 34vmin, 270px); /* диаметр пластинки */
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  background: var(--void);
  overscroll-behavior: contain;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
html.pl-on .pl {
  display: block;
  /* страховка: если скрипт не отработал, экран сам уйдёт через 7 с */
  animation: pl-failsafe 0.01s linear 7s forwards;
}
@keyframes pl-failsafe {
  to { visibility: hidden; opacity: 0; pointer-events: none; }
}

/* ---------- Шторки: две половины неба, сшитые розовой строчкой ---------- */
.pl__half {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50% + 1px);
  background: linear-gradient(160deg, var(--sky-a) 0%, var(--sky-b) 52%, var(--sky-c) 100%);
  background-size: 200% 100%;
  will-change: transform;
}
.pl__half--l {
  left: 0;
  background-position: 0 0;
  border-right: 10px solid transparent;
}
.pl__half--r {
  right: 0;
  background-position: 100% 0;
  border-left: 10px solid transparent;
}
.pl__half::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 3px dashed rgba(255, 255, 255, 0.85);
  opacity: 0;
  transition: opacity 0.25s;
}
.pl.is-done .pl__half--l { border-right-color: var(--p-pink); }
.pl.is-done .pl__half--r { border-left-color: var(--p-pink); }
.pl.is-done .pl__half::after { opacity: 1; }
.pl__half--l::after { right: 4px; }
.pl__half--r::after { left: 4px; }

/* ---------- Сцена ---------- */
.pl__stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pl__player {
  position: relative;
  width: var(--pl-d);
  height: var(--pl-d);
  animation: pl-in 0.8s var(--spring) both;
}
@keyframes pl-in {
  from { opacity: 0; transform: translateY(24px) scale(0.85); }
}
.pl__player::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(248, 180, 208, 0.7), rgba(205, 180, 246, 0.3) 60%, transparent 100%);
  animation: pl-glow 2.6s ease-in-out infinite alternate;
}
@keyframes pl-glow {
  from { opacity: 0.55; transform: scale(0.94); }
  to   { opacity: 1;    transform: scale(1.06); }
}

.pl__disc {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 33%, rgba(255, 255, 255, 0.08) 33.4%, transparent 34%),
    conic-gradient(from 20deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.32) 9%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.24) 59%, rgba(255, 255, 255, 0) 72%),
    repeating-radial-gradient(circle, #6b5b95 0 2px, #5d4e87 2px 4px);
  box-shadow: 0 28px 50px -20px rgba(var(--shadow-rgb), 0.8), inset 0 0 0 7px rgba(255, 255, 255, 0.08);
  animation: spin 2.4s linear infinite;
}
.pl__logo {
  width: 38%;
  height: 38%;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--p-pink);
  box-shadow: 0 0 0 4px rgba(255, 246, 216, 0.9);
}
/* игла опускается на дорожку по мере загрузки: -64° (в покое) → -40° (в канавке) */
.pl__arm {
  position: absolute;
  z-index: 2;
  top: 2%;
  right: -4%;
  width: 46%;
  height: 4%;
  min-height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--p-pink) 0 14%, #fff6d8 14% 100%);
  box-shadow: 0 5px 8px -3px rgba(var(--shadow-rgb), 0.55);
  transform-origin: right center;
  transform: rotate(calc(-66deg + var(--p) * 0.26deg));
}
.pl__arm::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -9px;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6d8 0 30%, #ecd9ff 31% 100%);
  box-shadow: 0 5px 10px -3px rgba(var(--shadow-rgb), 0.6), 0 0 0 3px rgba(255, 255, 255, 0.5);
}
/* ноты, всплывающие над пластинкой */
.pl__note {
  position: absolute;
  top: 10%;
  left: 14%;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.7);
  animation: pl-note 3.6s ease-out infinite;
}
.pl__note--2 { left: 44%; top: -2%; color: #62c9a5; animation-delay: 1.2s; }
.pl__note--3 { left: 2%; top: 38%; color: #f1b94a; animation-delay: 2.4s; }
.pl__note--1 { color: var(--p-pink); filter: saturate(1.5); }
@keyframes pl-note {
  0%   { opacity: 0; transform: translate(0, 12px) rotate(-8deg); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-14px, -60px) rotate(10deg); }
}

/* табличка: эквалайзер, статус, проценты и полоска */
.pl__plate {
  /* пластинка стоит ровно на оси (центр экрана), табличка — под ней и не сдвигает её */
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + var(--pl-d) / 2 + clamp(26px, 6vmin, 44px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  width: min(340px, calc(100vw - 56px));
  padding: 12px 18px 16px;
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  color: var(--dim);
  background: var(--glass);
  border: 2px solid var(--white-border);
  border-radius: 22px;
  box-shadow: 0 14px 30px -14px rgba(var(--shadow-rgb), 0.55);
  animation: pl-in 0.8s var(--spring) 0.1s both;
}
.pl__plate::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 8px;
  height: 5px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--p-pink), var(--p-lav)) 0 0 / calc(var(--p) * 1%) 100% no-repeat, rgba(var(--cyan-rgb), 0.15);
}
.pl__eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
}
.pl__eq i {
  width: 4px;
  height: 100%;
  background: var(--p-pink);
  border-radius: 3px;
  transform-origin: bottom;
  animation: eq 1s ease-in-out infinite;
}
.pl__eq i:nth-child(2) { background: var(--p-lav); animation-duration: 1.3s; animation-delay: -0.3s; }
.pl__eq i:nth-child(3) { background: var(--p-mint); animation-duration: 0.85s; animation-delay: -0.5s; }
.pl__eq i:nth-child(4) { background: var(--p-butter); animation-duration: 1.15s; animation-delay: -0.2s; }
.pl__status {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.pl__pct {
  flex: none;
  min-width: 4ch;
  text-align: right;
  font-size: 16px;
  font-weight: 900;
  color: var(--star);
  font-variant-numeric: tabular-nums;
}

/* ---------- Финал: подпрыгивает пластинка → шторки разъезжаются ---------- */
.pl.is-done .pl__disc {
  animation: spin 0.9s linear infinite, pl-bounce 0.6s var(--spring);
}
@keyframes pl-bounce {
  0% { scale: 1; }
  40% { scale: 1.12; }
  100% { scale: 1; }
}
.pl.is-done .pl__note { animation-duration: 1.4s; animation-delay: 0s; }
.pl.is-done .pl__note--2 { animation-delay: 0.2s; }
.pl.is-done .pl__note--3 { animation-delay: 0.4s; }
.pl.is-done .pl__stage {
  animation: pl-stage-out 0.4s var(--ease) 0.25s forwards;
}
@keyframes pl-stage-out {
  to { opacity: 0; transform: scale(1.08) translateY(-12px); }
}
.pl.is-done .pl__half--l { animation: pl-door-l 0.8s cubic-bezier(0.7, 0, 0.2, 1) 0.42s forwards; }
.pl.is-done .pl__half--r { animation: pl-door-r 0.8s cubic-bezier(0.7, 0, 0.2, 1) 0.42s forwards; }
@keyframes pl-door-l { to { transform: translate3d(-104%, 0, 0); } }
@keyframes pl-door-r { to { transform: translate3d(104%, 0, 0); } }

/* ---------- Узкие экраны и уменьшенное движение ---------- */
@media (max-width: 480px) {
  .pl__plate { font-size: 13px; padding: 12px 14px 16px; }
  .pl__pct { font-size: 15px; }
}
@media (max-height: 420px) {
  .pl { --pl-d: 132px; }
  .pl__plate { top: calc(50% + var(--pl-d) / 2 + 14px); }
}
@media (prefers-reduced-motion: reduce) {
  .pl { display: none !important; }
}