/* =============================================================================
   Студия Аиста — страницы продуктов (legaldocs / aistory / loyalty).
   Подключается ПОСЛЕ site.css. Раскладка страницы продукта + крупные
   сцены-«гифки» по той же технике, что на главной:
   разметка описывает финальный кадр (static-first), анимации живут только
   внутри @media (prefers-reduced-motion: no-preference) и включаются классом
   .is-live, который вешает site.js по IntersectionObserver.
   ========================================================================== */

/* --- 1. Хлебная крошка -------------------------------------------------------- */
.crumb-bar { padding-block: 14px 0; }
.crumb {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding-inline: 2px;
  font-size: var(--fs-1); font-weight: 600; color: var(--muted); text-decoration: none;
  transition: color .16s var(--ease);
}
.crumb .i { width: 15px; height: 15px; transition: transform .16s var(--ease); }
.crumb:hover { color: var(--ink); }
.crumb:hover .i { transform: translateX(-3px); }
.drop-menu a[aria-current="page"] { background: var(--sunk); }

/* --- 2. Герой продукта -------------------------------------------------------- */
.phero { padding-block: clamp(28px, 4vw, 56px) clamp(56px, 7vw, 96px); }
.phero-grid {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(34px, 5vw, 76px);
}
.phero-text h1 { max-width: 18ch; font-size: clamp(34px, 4.4vw, 56px); }
.phero-lead { margin-top: clamp(16px, 2vw, 24px); max-width: 52ch; }
.phero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3vw, 34px); }

/* Подложка вместо тени — как на главной. Работает и для анимированной сцены,
   и для статического мокапа страниц разработчиков (там анимации нет). */
.phero-media .scene,
.phero-media > figure {
  padding: clamp(16px, 2.4vw, 32px);
  background: var(--sunk); border: 1px solid var(--line-2); border-radius: var(--r-l);
}
.phero-media figcaption { max-width: 52ch; margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.phero-media .skin-term { border-radius: 0; min-height: 0; padding: 18px 20px; }
.phero-media, .phero-media > figure, .phero-media .win { min-width: 0; max-width: 100%; }

@media (max-width: 980px) {
  .phero-grid { grid-template-columns: 1fr; gap: 36px; }
  .phero-text h1 { max-width: 100%; }
}

/* --- 3. Как это работает ------------------------------------------------------ */
#how { scroll-margin-top: 76px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(26px, 3.2vw, 46px); }
.step { border-top: 1px solid var(--line-2); padding-top: 16px; }
.step b {
  display: block; font: 600 12px/1 Inter, sans-serif;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.step h3 { margin-top: 12px; }
.step p { margin-top: 9px; color: var(--muted); }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }

/* --- 4. Что это снимает: сплошная проза --------------------------------------- */
.flow { display: grid; gap: clamp(16px, 1.8vw, 22px); max-width: 64ch; }
.flow p { color: var(--muted); }
.flow p:first-child { font-size: var(--fs-3); line-height: 1.55; color: var(--ink); }

/* --- 5. Условия и деньги ------------------------------------------------------- */
.rows { list-style: none; border-top: 1px solid var(--line); }
.rows li {
  display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 6px 34px;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.rows b { font-size: var(--fs-1); font-weight: 600; color: var(--muted); }
.rows p { max-width: 58ch; }
@media (max-width: 660px) { .rows li { grid-template-columns: 1fr; padding: 18px 0; } }

.disclaimer {
  margin-top: clamp(24px, 3vw, 34px); padding-left: 16px;
  border-left: 2px solid var(--line-2);
  font-size: var(--fs-1); color: var(--muted); max-width: 62ch;
}

/* Блок «Вопросы и ответы» переехал в site.css: он нужен и на главной. */

/* --- 7. Финальный экран -------------------------------------------------------- */
.pfinal-grid { display: grid; justify-items: start; gap: clamp(20px, 2.6vw, 30px); }
.pfinal h2 { max-width: 20ch; }
.mail-fallback { font-size: var(--fs-1); }
.mail-fallback a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--on-dark); font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px;
}
.on-dark .mail-fallback, .on-dark .mail-fallback a { color: var(--on-dark); }

/* --- 8. Две карточки других продуктов ------------------------------------------ */
.pcards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pcards .pcard h3 { font-size: var(--fs-h3); }
.pcards .pcard span { font-size: var(--fs-1); font-weight: 600; color: var(--accent); }
@media (max-width: 700px) { .pcards { grid-template-columns: 1fr; } }

/* =============================================================================
   СЦЕНЫ. Крупный вариант мокапов из site.css: окно кабинета и телефон.
   Разметка = финальный кадр сценария.
   ========================================================================== */

.scene--big .win { max-width: 620px; margin-inline: auto; }
.scene--big .win-body { min-height: 430px; padding: 20px; gap: 13px; }
.scene--big .skin-doc { font-size: 13.5px; }
.scene--big .skin-doc .d-name { font-size: 14px; }
.scene--big .skin-doc .d-state { font-size: 12.5px; }
.scene--big .skin-doc .d-q, .scene--big .skin-doc .d-a { padding: 10px 14px; }
.scene--big .skin-doc .d-title { font-size: 12.5px; }
.scene--big .skin-doc .d-h { font-size: 13px; }
.scene--big .skin-doc .d-sheet { padding: 16px; gap: 8px; }

.scene--big .phone { width: min(340px, 84vw); padding: 12px 11px 15px; border-radius: 44px; }
.scene--big .phone-screen { min-height: 540px; padding: 46px 13px 16px; border-radius: 34px; gap: 13px; }

/* Переключатель текста внутри мокапа: статически виден только последний вариант */
.swap { display: inline-grid; justify-items: end; }
.swap > span { grid-area: 1 / 1; }
.swap > span:not(:last-child) { opacity: 0; }

/* --- Сцена ЛегалДокс ------------------------------------------------------------ */
.skin-doc .d-turn { display: grid; justify-items: end; }
.skin-doc .d-turn > * { grid-area: 1 / 1; }
.skin-doc .d-opts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; opacity: 0; }
.skin-doc .d-opt {
  padding: 8px 13px; font-size: 12px; font-weight: 600; color: #101828;
  background: #FFFFFF; border: 1px solid #D7DEEE; border-radius: 999px;
}
.skin-doc .d-line { font: 12px/1.55 Georgia, 'Times New Roman', serif; color: #3A4254; }
.skin-doc .d-ref { padding: 0 2px; border-radius: 3px; }
.skin-doc .d-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.skin-doc .d-btn { transform-origin: left center; }
/* финальный кадр: все шаги пройдены */
.skin-doc .d-steps li { color: #101828; }
.skin-doc .d-dot { background: var(--doc-blue); }

.scene--legal .pointer, .scene--legal .tap { left: 11%; top: 91%; }
.scene--legal .pointer { margin: -2px 0 0 -3px; transform-origin: 17% 10%; }

/* --- Сцена Аиста Дайери --------------------------------------------------------- */
.scene--big .phone-screen.skin-diary { grid-template-rows: auto auto auto 1fr; align-content: stretch; }
.skin-diary .y-time { display: inline-flex; align-items: center; gap: 6px; }
.skin-diary .y-live { width: 6px; height: 6px; border-radius: 50%; background: #D8674A; }
.skin-diary .y-wave { transform-origin: bottom; }
.scene--big .skin-diary .y-wave { height: 52px; }
.scene--big .skin-diary .y-text { font-size: 13.5px; }
.scene--big .skin-diary .y-rec { width: 74px; height: 74px; align-self: end; }
.scene--big .skin-diary .y-rec svg { width: 30px; height: 30px; }

/* --- Сцена Аиста Лояльность ------------------------------------------------------ */
.scene--big .phone-screen.skin-coffee { align-content: center; }
.skin-coffee .c-stamps i { position: relative; }
.skin-coffee .c-late::before {
  content: ""; position: absolute; inset: -1.5px; opacity: 0;
  border-radius: 50%; border: 1.5px dashed #D8C5A5; background: var(--co-card);
}
.skin-coffee .c-stack { display: grid; justify-items: center; }
.skin-coffee .c-stack > * { grid-area: 1 / 1; }
.skin-coffee .c-btn {
  align-self: center; padding: 11px 18px; min-height: 44px;
  display: inline-flex; align-items: center; opacity: 0;
  font-size: 13px; font-weight: 700; color: #FBF3E2;
  background: var(--co-deep); border-radius: 999px;
}
.skin-coffee .c-qr, .skin-coffee .c-gift, .skin-coffee .c-btn { transform-origin: center; }
.scene--big .skin-coffee .c-qr { width: 136px; height: 136px; }
.scene--big .skin-coffee .c-qr svg { width: 88px; height: 88px; }
.scene--big .skin-coffee .c-stamps i { max-width: 30px; }

/* Палец крупнее курсора; остриё указателя совпадает с точкой нажатия */
.scene--phone .pointer, .scene--phone .tap { left: 50%; top: 88%; }
.scene--phone .pointer { width: 34px; height: 34px; margin: -3px 0 0 -15px; transform-origin: 45% 8%; }
.scene--phone .tap { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.scene--loyal .pointer, .scene--loyal .tap { top: 55%; }

/* =============================================================================
   АНИМАЦИИ. Циклы 15–16с, бесшовные: к концу цикла содержимое гасится
   и возвращается в исходное состояние, поэтому кадр 100% совпадает с кадром 0%.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

/* --- ЛегалДокс: ответ в интервью → сборка → проверка → скачивание (16с) --------- */
.scene--legal.is-live .pointer { animation: pl-path 16s linear infinite, pl-cursor 16s linear infinite; }
.scene--legal.is-live .tap { animation: pl-path 16s linear infinite, pl-tap 16s linear infinite; }
.scene--legal.is-live .d-opts { animation: pl-opts 16s linear infinite; }
.scene--legal.is-live .d-a { animation: pl-a 16s linear infinite; }
.scene--legal.is-live .d-step { animation: pl-step 16s linear infinite; }
.scene--legal.is-live .d-step .d-dot { animation: pl-dot 16s linear infinite; }
.scene--legal.is-live .d-step:nth-child(2), .scene--legal.is-live .d-step:nth-child(2) .d-dot { animation-delay: .6s; }
.scene--legal.is-live .d-step:nth-child(3), .scene--legal.is-live .d-step:nth-child(3) .d-dot { animation-delay: 1.2s; }
.scene--legal.is-live .d-sheet > * { animation: pl-type 16s linear infinite; }
.scene--legal.is-live .d-sheet > :nth-child(2) { animation-delay: .2s; }
.scene--legal.is-live .d-sheet > :nth-child(3) { animation-delay: .4s; }
.scene--legal.is-live .d-sheet > :nth-child(4) { animation-delay: .6s; }
.scene--legal.is-live .d-sheet > :nth-child(5) { animation-delay: .8s; }
.scene--legal.is-live .d-sheet > :nth-child(6) { animation-delay: 1s; }
.scene--legal.is-live .d-sheet > :nth-child(7) { animation-delay: 1.2s; }
.scene--legal.is-live .d-ref { animation: pl-ref 16s linear infinite; }
.scene--legal.is-live .d-ok { animation: pl-ok 16s linear infinite; }
.scene--legal.is-live .d-btn { animation: pl-btn 16s linear infinite; }
.scene--legal.is-live .d-file { animation: pl-file 16s linear infinite; }
.scene--legal.is-live .d-state > span:first-child { animation: pl-state-a 16s linear infinite; }
.scene--legal.is-live .d-state > span:last-child { animation: pl-state-b 16s linear infinite; }

@keyframes pl-path {
  0%   { left: 88%; top: 104%; }
  3%   { left: 88%; top: 104%; animation-timing-function: cubic-bezier(.45, 0, .15, 1); }
  10%  { left: 60%; top: 28%; }
  16%  { left: 60%; top: 28%; animation-timing-function: cubic-bezier(.45, 0, .15, 1); }
  22%  { left: 76%; top: 47%; }
  55%  { left: 76%; top: 47%; animation-timing-function: cubic-bezier(.45, 0, .15, 1); }
  63%  { left: 11%; top: 91%; }
  100% { left: 11%; top: 91%; }
}
@keyframes pl-cursor {
  0%, 2% { opacity: 0; transform: none; }
  5%     { opacity: 1; transform: none; }
  10%    { transform: none; }
  11.5%  { transform: scale(.82); }
  13.5%  { transform: none; }
  63%    { transform: none; }
  64.5%  { transform: scale(.82); }
  67%    { transform: none; }
  88%    { opacity: 1; }
  93%    { opacity: 0; }
  100%   { opacity: 0; transform: none; }
}
@keyframes pl-tap {
  0%, 10.5% { opacity: 0; transform: scale(.35); }
  11.5%     { opacity: .85; transform: scale(.6); }
  16%       { opacity: 0; transform: scale(1.3); }
  64%       { opacity: 0; transform: scale(.35); }
  65%       { opacity: .85; transform: scale(.6); }
  69.5%     { opacity: 0; transform: scale(1.3); }
  100%      { opacity: 0; transform: scale(.35); }
}
@keyframes pl-opts {
  0%, 11%   { opacity: 1; transform: none; }
  13%       { opacity: 0; transform: translateY(-4px); }
  88%       { opacity: 0; transform: translateY(-4px); }
  93%, 100% { opacity: 1; transform: none; }
}
@keyframes pl-a {
  0%, 12%   { opacity: 0; transform: translateY(5px); }
  15%       { opacity: 1; transform: none; }
  88%       { opacity: 1; transform: none; }
  91%, 100% { opacity: 0; transform: translateY(5px); }
}
@keyframes pl-step {
  0%, 16%    { color: #6B7385; }
  19%, 88%   { color: #101828; }
  92%, 100%  { color: #6B7385; }
}
@keyframes pl-dot {
  0%, 16%    { background: #DCE3F2; }
  19%, 88%   { background: #1F4ED8; }
  92%, 100%  { background: #DCE3F2; }
}
@keyframes pl-type {
  0%, 26%   { opacity: 0; clip-path: inset(0 100% 0 0); }
  27%       { opacity: 1; clip-path: inset(0 100% 0 0); }
  31%       { opacity: 1; clip-path: inset(0 0 0 0); }
  88%       { opacity: 1; clip-path: inset(0 0 0 0); }
  91%, 100% { opacity: 0; clip-path: inset(0 0 0 0); }
}
@keyframes pl-ref {
  0%, 43%   { background: rgba(31, 78, 216, 0); }
  47%, 57%  { background: rgba(31, 78, 216, .16); }
  62%, 100% { background: rgba(31, 78, 216, 0); }
}
@keyframes pl-ok {
  0%, 50%   { opacity: 0; transform: translateY(4px); }
  54%, 88%  { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: translateY(4px); }
}
@keyframes pl-btn {
  0%, 64%  { transform: none; }
  65.5%    { transform: scale(.95); }
  68%      { transform: none; }
  100%     { transform: none; }
}
@keyframes pl-file {
  0%, 67%   { opacity: 0; transform: translateY(5px) scale(.96); }
  71%, 88%  { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: translateY(5px) scale(.96); }
}
@keyframes pl-state-a { 0%, 50% { opacity: 1; } 54%, 88% { opacity: 0; } 93%, 100% { opacity: 1; } }
@keyframes pl-state-b { 0%, 50% { opacity: 0; } 54%, 88% { opacity: 1; } 93%, 100% { opacity: 0; } }

/* --- Аиста Дайери: запись → расшифровка → чипы → календарь (15с) ---------------- */
.scene--diary.is-live .pointer { animation: pd-path 15s linear infinite, pd-cursor 15s linear infinite; }
.scene--diary.is-live .tap { animation: pd-path 15s linear infinite, pd-tap 15s linear infinite; }
.scene--diary.is-live .y-rec { animation: pd-rec 15s linear infinite; }
.scene--diary.is-live .y-time { animation: pd-time 15s linear infinite; }
.scene--diary.is-live .y-live { animation: pd-live 15s linear infinite; }
.scene--diary.is-live .y-wave { animation: pd-wave 15s linear infinite; }
.scene--diary.is-live .y-wave i { animation: pd-osc .82s ease-in-out infinite; }
.scene--diary.is-live .y-wave i:nth-child(6n+2) { animation-delay: -.13s; }
.scene--diary.is-live .y-wave i:nth-child(6n+3) { animation-delay: -.27s; }
.scene--diary.is-live .y-wave i:nth-child(6n+4) { animation-delay: -.41s; }
.scene--diary.is-live .y-wave i:nth-child(6n+5) { animation-delay: -.55s; }
.scene--diary.is-live .y-wave i:nth-child(6n+6) { animation-delay: -.68s; }
.scene--diary.is-live .y-text span { animation: pd-word 15s linear infinite; animation-delay: calc(var(--i) * .13s); }
.scene--diary.is-live .y-chip { animation: pd-chip 15s linear infinite; }
.scene--diary.is-live .y-chip:nth-child(2) { animation-delay: .3s; }
.scene--diary.is-live .y-chip:nth-child(3) { animation-delay: .6s; }
.scene--diary.is-live .y-today i { animation: pd-today 15s linear infinite; }

@keyframes pd-path {
  0%   { left: 50%; top: 122%; }
  4%   { left: 50%; top: 122%; animation-timing-function: cubic-bezier(.45, 0, .15, 1); }
  11%  { left: 50%; top: 88%; }
  16%  { left: 50%; top: 88%; animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
  24%  { left: 68%; top: 120%; }
  100% { left: 68%; top: 120%; }
}
@keyframes pd-cursor {
  0%, 2% { opacity: 0; transform: none; }
  5%     { opacity: 1; transform: none; }
  11%    { transform: none; }
  12.5%  { transform: scale(.88) translateY(3px); }
  15%    { transform: none; }
  20%    { opacity: 1; }
  25%    { opacity: 0; }
  100%   { opacity: 0; transform: none; }
}
@keyframes pd-tap {
  0%, 11.5% { opacity: 0; transform: scale(.35); }
  12.5%     { opacity: .85; transform: scale(.6); }
  17%       { opacity: 0; transform: scale(1.35); }
  100%      { opacity: 0; transform: scale(.35); }
}
@keyframes pd-rec {
  0%, 11.5% { transform: none; }
  13%       { transform: scale(.9); }
  44%       { transform: scale(.9); }
  47%, 100% { transform: none; }
}
@keyframes pd-time {
  0%, 12%   { opacity: 0; }
  15%, 88%  { opacity: 1; }
  92%, 100% { opacity: 0; }
}
@keyframes pd-live {
  0%, 13%   { opacity: 0; }
  15%, 42%  { opacity: 1; }
  45%, 100% { opacity: 0; }
}
@keyframes pd-wave {
  0%, 12%   { transform: scaleY(.07); opacity: .5; }
  15%, 42%  { transform: scaleY(1); opacity: 1; }
  46%, 88%  { transform: scaleY(.4); opacity: .75; }
  92%, 100% { transform: scaleY(.07); opacity: .5; }
}
@keyframes pd-osc {
  0%, 100% { transform: scaleY(.4); }
  50%      { transform: scaleY(1); }
}
@keyframes pd-word {
  0%, 20%   { opacity: 0; transform: translateY(3px); }
  23%, 86%  { opacity: 1; transform: none; }
  89%, 100% { opacity: 0; transform: translateY(3px); }
}
@keyframes pd-chip {
  0%, 46%   { opacity: 0; transform: translateY(5px); }
  50%, 87%  { opacity: 1; transform: none; }
  90%, 100% { opacity: 0; transform: translateY(5px); }
}
@keyframes pd-today {
  0%, 58%   { outline-color: transparent; outline-offset: 1px; }
  61%       { outline-color: var(--dy-hi); outline-offset: 6px; }
  65%, 88%  { outline-color: var(--dy-hi); outline-offset: 1px; }
  92%, 100% { outline-color: transparent; outline-offset: 1px; }
}

/* --- Аиста Лояльность: QR → сканирование → штампы 7 и 8 → подарок (16с) --------- */
.scene--loyal.is-live .pointer { animation: pc-path 16s linear infinite, pc-cursor 16s linear infinite; }
.scene--loyal.is-live .tap { animation: pc-path 16s linear infinite, pc-tap 16s linear infinite; }
.scene--loyal.is-live .c-btn { animation: pc-btn 16s linear infinite; }
.scene--loyal.is-live .c-qr { animation: pc-qr 16s linear infinite; }
.scene--loyal.is-live .c-hint { animation: pc-hint 16s linear infinite; }
.scene--loyal.is-live .c-late--1 { animation: pc-pop-1 16s linear infinite; }
.scene--loyal.is-live .c-late--1::before { animation: pc-mask-1 16s linear infinite; }
.scene--loyal.is-live .c-late--2 { animation: pc-pop-2 16s linear infinite; }
.scene--loyal.is-live .c-late--2::before { animation: pc-mask-2 16s linear infinite; }
.scene--loyal.is-live .c-count > span:nth-child(1) { animation: pc-count-1 16s linear infinite; }
.scene--loyal.is-live .c-count > span:nth-child(2) { animation: pc-count-2 16s linear infinite; }
.scene--loyal.is-live .c-count > span:nth-child(3) { animation: pc-count-3 16s linear infinite; }
.scene--loyal.is-live .c-gift { animation: pc-gift 16s linear infinite; }
.scene--loyal.is-live .c-burst i { animation: pc-burst 16s linear infinite; }
.scene--loyal.is-live .c-burst i:nth-child(2) { animation-delay: .04s; }
.scene--loyal.is-live .c-burst i:nth-child(3) { animation-delay: .08s; }
.scene--loyal.is-live .c-burst i:nth-child(4) { animation-delay: .12s; }
.scene--loyal.is-live .c-burst i:nth-child(5) { animation-delay: .16s; }
.scene--loyal.is-live .c-burst i:nth-child(6) { animation-delay: .2s; }

@keyframes pc-path {
  0%   { left: 58%; top: 120%; }
  3%   { left: 58%; top: 120%; animation-timing-function: cubic-bezier(.45, 0, .15, 1); }
  10%  { left: 50%; top: 55%; }
  16%  { left: 50%; top: 55%; animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
  24%  { left: 68%; top: 120%; }
  100% { left: 68%; top: 120%; }
}
@keyframes pc-cursor {
  0%, 2% { opacity: 0; transform: none; }
  5%     { opacity: 1; transform: none; }
  10%    { transform: none; }
  11.5%  { transform: scale(.88) translateY(3px); }
  14%    { transform: none; }
  20%    { opacity: 1; }
  26%    { opacity: 0; }
  100%   { opacity: 0; transform: none; }
}
@keyframes pc-tap {
  0%, 10.5% { opacity: 0; transform: scale(.35); }
  11.5%     { opacity: .85; transform: scale(.6); }
  16%       { opacity: 0; transform: scale(1.35); }
  100%      { opacity: 0; transform: scale(.35); }
}
@keyframes pc-btn {
  0%, 10%   { opacity: 1; transform: none; }
  11.5%     { opacity: 1; transform: scale(.95); }
  14%       { opacity: 0; transform: scale(.95); }
  90%       { opacity: 0; transform: scale(.95); }
  94%, 100% { opacity: 1; transform: none; }
}
@keyframes pc-qr {
  0%, 13%   { opacity: 0; transform: scale(.9); }
  17%, 88%  { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: scale(.9); }
}
@keyframes pc-hint {
  0%, 15%   { opacity: 0; }
  19%, 88%  { opacity: 1; }
  92%, 100% { opacity: 0; }
}
@keyframes pc-pop-1 {
  0%, 30%   { transform: scale(1.35); }
  34%, 88%  { transform: scale(1); }
  92%, 100% { transform: scale(1.35); }
}
@keyframes pc-mask-1 {
  0%, 30%   { opacity: 1; transform: scale(.74); }
  33%       { opacity: 0; transform: scale(.9); }
  88%       { opacity: 0; transform: scale(.9); }
  92%, 100% { opacity: 1; transform: scale(.74); }
}
@keyframes pc-pop-2 {
  0%, 44%   { transform: scale(1.35); }
  48%, 88%  { transform: scale(1); }
  92%, 100% { transform: scale(1.35); }
}
@keyframes pc-mask-2 {
  0%, 44%   { opacity: 1; transform: scale(.74); }
  47%       { opacity: 0; transform: scale(.9); }
  88%       { opacity: 0; transform: scale(.9); }
  92%, 100% { opacity: 1; transform: scale(.74); }
}
@keyframes pc-count-1 { 0%, 31% { opacity: 1; } 34%, 88% { opacity: 0; } 93%, 100% { opacity: 1; } }
@keyframes pc-count-2 { 0%, 31% { opacity: 0; } 34%, 45% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes pc-count-3 { 0%, 45% { opacity: 0; } 48%, 88% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes pc-gift {
  0%, 49%   { opacity: 0; transform: scale(.9); }
  53%, 88%  { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: scale(.9); }
}
@keyframes pc-burst {
  0%, 49% { opacity: 0; transform: none; }
  51%     { opacity: 1; }
  64%     { opacity: 0; transform: translate(var(--bx), var(--by)) rotate(var(--br)); }
  100%    { opacity: 0; transform: none; }
}

} /* /prefers-reduced-motion: no-preference */