/* =====================================================================================
 * Сцена «Справедливая цена предметов» на главной.
 *
 * Раньше весь блок крутился на CSS: внутри телефона отмечались предметы, затем экран
 * сменялся уведомлениями. Теперь предметы лежат карточками перед телефоном, их по
 * очереди выбирает курсор, после чего они слетаются в телефон — он поднимается снизу
 * и показывает те же уведомления о зачислении, что и прежде.
 *
 * Состояния сцены задаёт рантайм (home-fair-scene.js) атрибутом data-fair на самой
 * сцене. Пока рантайм не поднялся, на <html> нет data-skc-fair и работает прежняя
 * анимация на чистом CSS — без скриптов блок не ломается.
 * ===================================================================================== */

html[data-skc-fair] .skc-phone-app { display: none }

/* Страница с уведомлениями больше не крутится сама: её показывает рантайм. */
html[data-skc-fair] .skc-phone-page,
html[data-skc-fair] .skc-notif.one,
html[data-skc-fair] .skc-notif.two { animation: none }
html[data-skc-fair] .skc-phone-page { opacity: 0; transform: none; transition: opacity .3s ease }
html[data-skc-fair] .skc-phone-wrap.is-paid .skc-phone-page { opacity: 1 }
html[data-skc-fair] .skc-notif { opacity: 0; transform: translateY(140%) scale(.94) }

/* Телефон утоплен под нижний край, пока идёт выбор предметов. */
html[data-skc-fair] .skc-phone {
  transition: transform .55s cubic-bezier(.55, 0, .75, .2), opacity .4s ease .12s;
  transform: translateY(110px) scale(.96);
  opacity: 0;
}
html[data-skc-fair] .skc-phone-wrap.is-paid .skc-phone {
  transition: transform .8s cubic-bezier(.2, .9, .3, 1) .1s, opacity .35s ease .1s;
  transform: none;
  opacity: 1;
}

/* Уведомления приходят по команде рантайма, вид прежний: подъём с лёгким отскоком. */
html[data-skc-fair] .skc-notif.is-on { animation: skc-fair-notif .55s cubic-bezier(.2, .9, .3, 1) both }
html[data-skc-fair] .skc-notif.one.is-down { animation: skc-fair-notif-down .4s cubic-bezier(.2, .9, .3, 1) both }
@keyframes skc-fair-notif {
  0% { opacity: 0; transform: translateY(140%) scale(.94) }
  60% { opacity: 1; transform: translateY(-6%) scale(1) }
  100% { opacity: 1; transform: translateY(0) scale(1) }
}
@keyframes skc-fair-notif-down {
  0% { opacity: 1; transform: translateY(0) scale(1) }
  100% { opacity: 1; transform: translateY(62px) scale(1) }
}

/* ---- карточки предметов --------------------------------------------------------- */

.skc-fair-stage {
  position: absolute;
  left: 50%;
  top: 10px;
  z-index: 2;
  width: 299px;
  height: 328px;
  margin-left: -150px;
  /* Масштаб и отступ сверху считает рантайм: телефон утоплен под нижний край
     карточки, и сцена должна уместиться в её видимую часть. Точка отсчёта —
     верх сцены, тогда уменьшение забирает высоту только снизу. */
  transform: scale(.82);
  transform-origin: 50% 0;
  perspective: 1100px;
  perspective-origin: 100% 50%;
  pointer-events: none;
}
.skc-fair-plane {
  position: absolute;
  inset: 0;
  transform: rotateY(-14deg) rotateX(3deg);
  transform-origin: 100% 50%;
  animation: skc-fair-drift 7s ease-in-out infinite;
}
@keyframes skc-fair-drift {
  0%, 100% { transform: rotateY(-14deg) rotateX(3deg) translate(0, 0) }
  25% { transform: rotateY(-14deg) rotateX(3deg) translate(3px, -5px) }
  50% { transform: rotateY(-14deg) rotateX(3deg) translate(-2px, -8px) }
  75% { transform: rotateY(-14deg) rotateX(3deg) translate(-4px, -3px) }
}

.skc-fair-card {
  position: absolute;
  width: 146px;
  height: 148px;
  transition: transform .45s cubic-bezier(.2, .9, .3, 1), opacity .45s cubic-bezier(.2, .9, .3, 1);
}
.skc-fair-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform .18s cubic-bezier(.2, 1.3, .4, 1);
}
.skc-fair-card.is-pressed .skc-fair-inner { transform: scale(.95); transition-duration: .1s }

.skc-fair-face {
  position: absolute;
  inset: 0;
  border: 1px solid #0f5236;
  border-radius: 14px;
  background-color: #07120d;
  background-image:
    radial-gradient(circle at 80% 0%, rgba(62, 255, 158, .18) 0%, transparent 55%),
    linear-gradient(135deg, rgba(34, 209, 126, .22) 0%, rgba(4, 14, 10, .6) 100%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}
/* Мягкое свечение позади карточек — зелёная тень, которая ложится на фон.
 *
 * Свет вынесен в отдельный слой: четыре элемента по местам карточек идут в
 * плоскости перед ними, поэтому любая карточка закрывает собой и своё, и чужое
 * свечение. Пока свет рисовался псевдоэлементом самой карточки, ореол соседа
 * ложился поверх неё — соседи стоят ниже по разметке и рисуются позже.
 *
 * Светят два пятна, как у настоящего источника: узкое яркое ядро у самого края
 * карточки и широкий приглушённый ореол вокруг. Одним пятном приходилось
 * выбирать между еле заметным контуром и зелёным туманом на пол-баннера: у
 * широкого пятна нет источника, а яркости, чтобы его стало видно, хватает на то,
 * чтобы оно спорило с заголовком справа.
 *
 * Ореол взят цветом #22d17e, а не #3eff9e: на большой площади тот слишком
 * кислотный, а #22d17e уже стоит в этом баннере — им нарисованы верхняя линия и
 * уголки-скобки, так что свет читается как часть оформления. Ядро остаётся
 * ярким #3eff9e, акцент на карточках никуда не девается.
 *
 * Ореол именно залит по центру, а не нарисован внешней box-shadow: та
 * обрезается по рамке элемента, и на отлёте, когда карточка уже растаяла, на её
 * месте оставался тёмный силуэт в светлом пятне.
 *
 * Размер и яркость задаёт одна пара переменных на оба слоя: рантайм ставит их на
 * сцену из ?fairGlow (яркость, 0…1) и ?fairGlowR (радиус в пикселях), а ядро
 * считается от них же — долей радиуса и полуторной яркостью. Так весь свет
 * подбирается одной ссылкой и остаётся соразмерным.
 *
 * Состояние берётся с самой сцены (data-fair). Горит свет только на cards —
 * когда карточки уже стоят по местам: на возврате (return) они ещё разлетаются
 * по сетке, и свет, разгорающийся под ними на лету, читался как часть полёта.
 * Поэтому на этом состоянии он ещё погашен, а зажигается с задержкой уже после
 * посадки. Гаснет наоборот сразу — на отлёте в телефон (collapse), чтобы таять
 * вместе с карточками, а не обрываться в момент их исчезновения.
 */
.skc-fair-glow {
  position: absolute;
  width: 146px;
  height: 148px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s ease;
}
/* Широкий рассеянный ореол. */
.skc-fair-glow::before {
  content: "";
  position: absolute;
  inset: calc(var(--fair-glow-r, 100px) * -1) calc(var(--fair-glow-r, 100px) * -1) calc(var(--fair-glow-r, 100px) * -1.3);
  border-radius: calc(var(--fair-glow-r, 100px) + 14px);
  background: radial-gradient(50% 48% at 50% 55%, rgba(34, 209, 126, var(--fair-glow-a, .34)), rgba(34, 209, 126, 0) 72%);
  filter: blur(calc(var(--fair-glow-r, 100px) * .55));
}
/* Яркое ядро у края карточки: видно, что светится именно она. */
.skc-fair-glow::after {
  content: "";
  position: absolute;
  inset: calc(var(--fair-glow-r, 100px) * -.26) calc(var(--fair-glow-r, 100px) * -.26) calc(var(--fair-glow-r, 100px) * -.34);
  border-radius: calc(var(--fair-glow-r, 100px) * .26 + 14px);
  background: radial-gradient(50% 48% at 50% 55%, rgba(62, 255, 158, min(1, calc(var(--fair-glow-a, .34) * 1.5))), rgba(62, 255, 158, 0) 72%);
  filter: blur(calc(var(--fair-glow-r, 100px) * .16));
}
.skc-fair-stage[data-fair="cards"] .skc-fair-glow {
  opacity: 1;
  transition: opacity .7s ease .3s;
}

.skc-fair-zap { position: absolute; right: 8px; top: 7px; width: 15px; height: 15px; color: #ffd47a }
.skc-fair-art {
  position: absolute;
  inset: 18px 8px auto;
  height: 80px;
  transition: opacity .2s ease-out, transform .2s ease-out;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45));
}
.skc-fair-art img { width: 100%; height: 100%; object-fit: contain }
.skc-fair-card.is-hovered .skc-fair-art { transform: rotate(-3deg) }
.skc-fair-card.is-picked .skc-fair-art { opacity: .4 }

.skc-fair-foot { position: absolute; inset: auto 11px 11px }
.skc-fair-wear { color: #e8ebf5; font-size: 10px; font-weight: 700; letter-spacing: .02em; line-height: 14px }
.skc-fair-price { margin-top: 2px; color: #fff; font-size: 18px; font-weight: 700; line-height: 20px; white-space: nowrap }

/* Затемнение выбранной карточки. */
.skc-fair-veil {
  position: absolute;
  inset: -1px;
  z-index: 1;
  border-radius: 14px;
  background: rgba(3, 18, 12, .45);
  opacity: 0;
  transition: opacity .2s ease-out;
}
.skc-fair-card.is-picked .skc-fair-veil { opacity: 1 }

/* Кружок с плюсом и галочкой. */
.skc-fair-mark {
  position: absolute;
  left: 50%;
  top: 37px;
  z-index: 2;
  display: grid;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  place-items: center;
  border-radius: 999px;
  background: rgba(6, 74, 42, .85);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
  opacity: 0;
  transform: scale(.5);
  transition: opacity .2s ease-out, transform .2s ease-out;
}
.skc-fair-card.is-hovered .skc-fair-mark,
.skc-fair-card.is-picked .skc-fair-mark { opacity: 1; transform: none }
.skc-fair-mark svg { grid-area: 1/1; width: 20px; height: 20px; color: #3eff9e; transition: opacity .15s, transform .15s }
.skc-fair-mark .check { opacity: 0; transform: scale(.4) rotate(-45deg) }
.skc-fair-card.is-picked .skc-fair-mark .plus { opacity: 0; transform: scale(.4) rotate(90deg) }
.skc-fair-card.is-picked .skc-fair-mark .check {
  opacity: 1;
  transform: none;
  /* Пружина, как в оригинале: галочка приезжает с лёгким перелётом. */
  transition: transform .42s cubic-bezier(.2, 1.6, .4, 1), opacity .15s;
}

/* Расходящееся кольцо в момент выбора. */
.skc-fair-ring {
  position: absolute;
  left: 50%;
  top: 37px;
  z-index: 2;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  border: 2px solid #3eff9e;
  border-radius: 999px;
  opacity: 0;
}
.skc-fair-card.is-picked .skc-fair-ring { animation: skc-fair-ring .6s ease-out }
@keyframes skc-fair-ring {
  from { opacity: .85; transform: scale(.7) }
  to { opacity: 0; transform: scale(1.9) }
}

/* Всплывающая сумма. */
.skc-fair-gain {
  position: absolute;
  left: 0;
  right: 0;
  top: 23px;
  z-index: 2;
  color: #3eff9e;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 0 14px rgba(62, 255, 158, .55);
  opacity: 0;
  white-space: nowrap;
}
.skc-fair-card.is-picked .skc-fair-gain { animation: skc-fair-gain 1s cubic-bezier(.3, 0, .2, 1) }
@keyframes skc-fair-gain {
  0% { opacity: 0; transform: translateY(0) scale(.85) }
  12% { opacity: 1; transform: translateY(-4px) scale(1) }
  60% { opacity: 1 }
  100% { opacity: 0; transform: translateY(-38px) scale(1) }
}

/* Курсор. */
.skc-fair-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 30px;
  height: 30px;
  color: #06130c;
  opacity: 0;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55));
}

@media (prefers-reduced-motion: reduce) {
  html[data-skc-fair] .skc-fair-stage { display: none }
  html[data-skc-fair] .skc-phone { transform: none; opacity: 1; transition: none }
  html[data-skc-fair] .skc-phone-page { opacity: 1 }
  html[data-skc-fair] .skc-notif { opacity: 1; transform: none; animation: none }
  html[data-skc-fair] .skc-notif.two { transform: translateY(62px) }
}