/*
 * Свет на приборной плите (SPEC §8.5).
 *
 * Общий слой: плита есть и в карточке гостя, и в голове дела, и обе
 * должны быть сделаны из одного материала. Разметку ставит экран,
 * координаты пишет scripts/plate-light.mjs.
 */

/* ── свет на плите (SPEC §8.5) ──
   Отдельный слой, а не `overflow:hidden` на самой плите: она держит
   окно меток, которое обязано из неё вылезать. */
.plate-lite{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  border-radius:inherit;
}
/* Пятно света. Позиция приходит переменными из plate-light.mjs, движение
   идёт только трансформом — единственное, что браузер двигает, не считая
   раскладку заново. */
.plate-lite b{
  position:absolute;left:0;top:0;display:block;border-radius:50%;
  transform:translate3d(calc(var(--x) - 50%), calc(var(--y) - 50%), 0);
  will-change:transform,opacity;
}
/* Ближнее пятно — блик: плотное, быстрое, белое, живёт там, где
   указатель. Оно и делает плиту лакированной. */
.plate-lite .near{
  --x:var(--lx,50%); --y:var(--ly,50%);
  width:460px;height:460px;opacity:calc(var(--lp,0) * .85);
  background:radial-gradient(circle closest-side,
    rgb(255 253 246 / .055), rgb(255 253 246 / .02) 46%, transparent 72%);
}

/* ── пигменты под лаком ──
   Не украшение, а собственные краски продукта, увиденные сквозь лак:
   красный шахматки «сейчас», охра ожидания, тон самого гостя. Новых
   цветов здесь нет — только те, что уже названы в наборе (§8.3).

   Два движения сразу и нарочно разные: медленный собственный дрейф
   (плита живёт и когда её не трогают) и отклик на указатель — по
   всему экрану, а не только над карточкой. Глубина у каждого своя,
   и у одного она отрицательная: встречное движение читается объёмом,
   а не сдвигом картинки целиком.

   `translate` отдельным свойством, а не в `transform`: там уже сидит
   дрейф, и одно затёрло бы другое. */
.plate-lite .orb{
  --x:50%; --y:50%;
  translate:calc(var(--px,0) * var(--d)) calc(var(--py,0) * var(--d) * .55);
  mix-blend-mode:screen;
  animation:gsDrift var(--t) cubic-bezier(.45,0,.55,1) infinite alternate;
}
/* Красный взят глубокий, кирпичный (`--late`), а не алый «сейчас»:
   на шахматке алый — волосяная черта в один пиксель и потому не
   кричит, а пятном в полметра он читался розовым заревом. Пигменту
   нужен тот же красный, но той плотности, какой он бывает в тени. */
.plate-lite .red{
  --d:52px; --t:34s; left:var(--o1x,14%); top:var(--o1y,-30%);
  width:560px;height:560px;opacity:.6;
  background:radial-gradient(circle closest-side,
    rgb(143 42 28 / .66), rgb(143 42 28 / .2) 44%, transparent 70%);
}
.plate-lite .ochre{
  --d:-34px; --t:47s; left:var(--o2x,66%); top:var(--o2y,34%);
  width:620px;height:620px;opacity:.4;animation-delay:-12s;
  background:radial-gradient(circle closest-side,
    rgb(122 82 6 / .44), rgb(122 82 6 / .12) 46%, transparent 72%);
}
/* Тон гостя: карточка каждого светится по-своему, и это не украшение —
   тот же знак, что стоит на аватарке (§8.5). Он держится тише двух
   других: у синих и зелёных гостей он иначе перебивал красный, и
   плита у каждого второго переставала быть красной. */
.plate-lite .own{
  --d:40px; --t:29s; left:var(--o3x,40%); top:var(--o3y,70%);
  width:700px;height:700px;opacity:.22;animation-delay:-21s;
  /* Тон гостя без подмеса белого: разбавленный, он делал плиту дымной. */
  background:radial-gradient(circle closest-side,
    var(--av, var(--band-3)), transparent 68%);
}
/* Дрейф — не круг и не маятник: две оси с разными периодами дают
   траекторию, которая не повторяется на глаз. Тридцать секунд на
   размах: медленнее порога, за которым движение начинает отвлекать. */
@keyframes gsDrift{
  0%{transform:translate3d(-6%,-4%,0) scale(1)}
  50%{transform:translate3d(5%,6%,0) scale(1.07)}
  100%{transform:translate3d(8%,-5%,0) scale(.96)}
}

/* Зерно. Тёмный градиент на восьмибитном экране идёт полосами; зерно
   их разбивает и заодно делает плиту материалом, а не заливкой.
   Оно неподвижно: шевелящийся шум — это уже спецэффект. */
.plate-lite::after{
  content:'';position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* Блик выдвижения: карточку вынули из ящика, и по лаку прошёл свет.
   Один раз, 620 мс, семь процентов — на границе заметности. */
.plate-lite .sheen{
  position:absolute;top:-60%;bottom:-60%;width:38%;left:0;display:block;
  transform:translate3d(-160%,0,0) rotate(9deg);opacity:0;
  background:linear-gradient(100deg,transparent,
    rgb(255 252 244 / .07) 42%, rgb(255 252 244 / .1) 52%, transparent);
}
.fresh .sheen{animation:gsSheen .62s cubic-bezier(.22,.61,.36,1) both}
@keyframes gsSheen{
  0%{transform:translate3d(-160%,0,0) rotate(9deg);opacity:0}
  18%{opacity:1}
  100%{transform:translate3d(360%,0,0) rotate(9deg);opacity:0}
}

/* ── снег под лаком (новогодний сезон) ──
   Плита тёмная, поэтому снег на ней — единственное белое, и меру задаёт
   не размер хлопьев, а их число: два дальних и три ближних на клетку,
   то есть около двух десятков на всю голову карточки. Он идёт за
   пигментами и перед зерном: снег внутри плиты, а не поверх неё.

   Два слоя с разным шагом клетки и разной длиной пути — это и есть
   глубина: дальние падают вчетверо медленнее ближних. Путь каждого
   слоя кратен высоте его клетки, иначе петля дёргалась бы на стыке.
   Снос вбок не сделан нарочно: чтобы он не рвал петлю, сдвиг должен
   быть кратен ширине клетки, а это уже метель, а не «в меру».

   Цвет тот же, что у блика лака (255 253 246), — снег сделан из того
   же света, что и сама плита, и не заводит в наборе нового белого. */
html[data-mascot-theme="winter"] .plate-lite::before{
  content:'';position:absolute;inset:0;z-index:2;
  background-image:
    radial-gradient(1.1px 1.1px at 23px 17px, rgb(255 253 246 / .34), transparent 100%),
    radial-gradient(1.1px 1.1px at 91px 63px, rgb(255 253 246 / .30), transparent 100%),
    radial-gradient(1.7px 1.7px at 14px 49px, rgb(255 253 246 / .55), transparent 100%),
    radial-gradient(1.6px 1.6px at 61px 11px, rgb(255 253 246 / .50), transparent 100%),
    radial-gradient(1.4px 1.4px at 78px 58px, rgb(255 253 246 / .45), transparent 100%);
  background-size:132px 104px, 132px 104px, 96px 76px, 96px 76px, 96px 76px;
  animation:plSnow 18s linear infinite;
}
/* Ближние проходят голову карточки (171 px) секунд за тринадцать, дальние
   вдвое медленнее. Медленнее — и снег перестаёт падать, быстрее — и он
   начинает тянуть взгляд с имени гостя. */
@keyframes plSnow{
  to{background-position:0 104px, 0 104px, 0 228px, 0 228px, 0 228px}
}

/* Тише — плита остаётся материалом, но перестаёт шевелиться.
   Дрейф пигментов идёт по кругу без конца, и при выключенном движении
   вечная петля — ровно то, от чего человек и отказался (Apple HIG).
   Свет, зерно и глубина остаются: они ничего не двигают, а объём плите
   дают. Отклик на указатель гасит сам plate-light.mjs. */
@media (prefers-reduced-motion:reduce){
  .plate-lite .orb{animation:none}
  .fresh .sheen{animation:none;opacity:0}
  /* Снег снимается целиком, а не останавливается: неподвижные точки на
     плите — это не снег, а сор. */
  html[data-mascot-theme="winter"] .plate-lite::before{content:none}
}