/* Живой слой: свет за курсором, наклон карт, блики на золоте, искры от касаний.
 *
 * Мышь (Telegram на компьютере) — эффекты при наведении: блок @media (hover: hover).
 * Телефон — те же эффекты по касанию: fx.js ставит класс .fx-press на 0,6 с и координаты точки.
 * При «уменьшить движение» в системе не работает ничего из этого (fx.js тоже выключается).
 * Координаты света и угол наклона fx.js кладёт в переменные --fx-x, --fx-y, --fx-rx, --fx-ry.
 */

@media (prefers-reduced-motion: no-preference) {

/* ── свет за курсором на стеклянных карточках ─────────────────────────────────── */
:is(.card, .a, .tone, .prof-tone, .cal-event, .cal-pill:not(.is-selected), .shop-pack, .shop-book):is(.fx-hover, .fx-press) {
  background-image: radial-gradient(220px circle at var(--fx-x, 50%) var(--fx-y, 50%),
                    rgba(var(--accent-rgb), .13), rgba(var(--accent-rgb), .04) 40%, transparent 70%);
  border-color: rgba(var(--accent-rgb), .42);
}
:is(.card, .a, .tone, .prof-tone, .cal-event, .shop-pack, .shop-book) {
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}

/* ── наклон в 3D: карта дня, карты расклада, «Спутник», пакеты искр, медальоны ─── */
.fx-tilt {
  transform: perspective(900px) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg)) scale(var(--fx-s, 1));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}
.fx-tilt.fx-hover, .fx-tilt.fx-press { --fx-s: 1.025; transition: transform .12s linear; }

/* голографический блик на лицевой стороне карт Таро — бежит за курсором */
.today-tcard__front::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(260px circle at var(--fx-x, 50%) var(--fx-y, 30%), rgba(var(--accent-rgb), .28), transparent 55%),
    linear-gradient(115deg, transparent 30%, rgba(var(--accent-rgb), .18) 45%, rgba(170, 220, 255, .12) 52%, transparent 65%);
  background-size: 100% 100%, 250% 250%;
  background-position: center, var(--fx-sheen, 100%) 0;
  mix-blend-mode: screen; opacity: 0; transition: opacity .4s ease;
}
.today-tcard.is-flipped:is(.fx-hover, .fx-press) .today-tcard__front::after { opacity: 1; }

/* ── блик по золотым кнопкам ──────────────────────────────────────────────────── */
.btn--gold, .ask__send { position: relative; overflow: hidden; isolation: isolate; }
.btn--gold::after, .ask__send::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg) translateX(0); opacity: 0;
}
:is(.btn--gold, .ask__send):is(.fx-hover, .fx-press):not(:disabled)::after { animation: fx-sweep .9s ease forwards; }
@keyframes fx-sweep { 0% { opacity: 0; transform: skewX(-18deg) translateX(0); } 20% { opacity: 1; }
                      100% { opacity: 0; transform: skewX(-18deg) translateX(420%); } }
.btn--gold:is(.fx-hover, .fx-press) { box-shadow: 0 8px 30px rgba(var(--glow-rgb), .55); }

/* тонкие кнопки — золотая кайма разгорается */
:is(.btn--ghost, .btn--more, .chip, .cal-arrow):is(.fx-hover, .fx-press) {
  border-color: var(--gold-soft); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .07), 0 0 18px rgba(var(--accent-rgb), .18);
}
:is(.btn--ghost, .btn--more, .chip, .cal-arrow) { transition: border-color .3s ease, box-shadow .3s ease, transform .2s ease; }

/* ── медальоны тем в чате ─────────────────────────────────────────────────────── */
.topic .topic__img { transition: transform .6s cubic-bezier(.2, .8, .2, 1), filter .4s ease, box-shadow .4s ease; }
.topic:is(.fx-hover, .fx-press) .topic__img {
  transform: rotate(14deg) scale(1.08);
  filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), .55)) brightness(1.15);
}
.topic:is(.fx-hover, .fx-press) span:last-child { color: var(--gold); transition: color .3s ease; }

/* ── нижнее меню ──────────────────────────────────────────────────────────────── */
.nav__btn:is(.fx-hover, .fx-press) svg { transform: translateY(-3px); stroke: var(--gold); filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .6)); }
.nav__btn:is(.fx-hover, .fx-press) { color: var(--cream); }
.nav__orb { position: relative; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.nav__orb::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(var(--accent-rgb), .85) 82%, transparent 92%);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%, #000 66%, transparent 68%);
          mask: radial-gradient(circle, transparent 58%, #000 60%, #000 66%, transparent 68%);
  opacity: 0; transition: opacity .4s ease; animation: spin 2.4s linear infinite;
}
.nav__btn--orb:is(.fx-hover, .fx-press) .nav__orb { transform: scale(1.1); }
.nav__btn--orb:is(.fx-hover, .fx-press) .nav__orb::after { opacity: 1; }

/* ── мелочи ───────────────────────────────────────────────────────────────────── */
.spark .spark__icon { display: inline-block; transition: transform .7s cubic-bezier(.2, .8, .2, 1), text-shadow .4s ease; }
.spark:is(.fx-hover, .fx-press) .spark__icon { transform: rotate(180deg) scale(1.25); text-shadow: 0 0 16px rgba(var(--accent-rgb), 1); }
.shop-book:is(.fx-hover, .fx-press) .shop-cover__img, .shop-gift:is(.fx-hover, .fx-press) .shop-gift__cover {
  transform: scale(1.07) rotate(-2deg); transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.shop-cover__img, .shop-gift__cover { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.cal-pill:is(.fx-hover, .fx-press):not(.is-locked) { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(5, 8, 24, .45), 0 0 16px rgba(var(--accent-rgb), .2); }
.prof-orb, .orb { transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.orb:is(.fx-hover, .fx-press), .prof-orb:is(.fx-hover, .fx-press) { transform: scale(1.06); }
.orb:is(.fx-hover, .fx-press) .orb__glow { animation-duration: 2.5s; }

/* приподнимание карточек, по которым можно нажать (на мыши) */
@media (hover: hover) and (pointer: fine) {
  :is(.tone, .prof-tone, .cal-event, .shop-pack, .shop-book--more).fx-hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(5, 8, 24, .45); }
  .a.fx-hover { box-shadow: 0 14px 44px rgba(5, 8, 24, .45), 0 0 0 1px rgba(var(--accent-rgb), .12); }
}

/* ── искры: от касаний и шлейф за курсором ───────────────────────────────────── */
.fx-layer { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.fx-spark {
  position: absolute; left: 0; top: 0; width: var(--fx-size, 6px); height: var(--fx-size, 6px);
  margin: calc(var(--fx-size, 6px) / -2) 0 0 calc(var(--fx-size, 6px) / -2);
  background: radial-gradient(circle, #f2fdff 0%, var(--accent) 35%, rgba(var(--glow-rgb), 0) 70%);
  border-radius: 50%; animation: fx-burst .75s cubic-bezier(.15, .7, .3, 1) forwards;
}
.fx-spark--star {
  background: none; color: var(--accent); font-size: var(--fx-size, 10px); line-height: 1; width: auto; height: auto; margin: -.5em 0 0 -.5em;
  text-shadow: 0 0 8px rgba(var(--accent-rgb), .9);
}
.fx-spark--star::before { content: "✦"; }
@keyframes fx-burst {
  0% { opacity: 1; transform: translate(var(--fx-sx), var(--fx-sy)) scale(.6) rotate(0); }
  100% { opacity: 0; transform: translate(calc(var(--fx-sx) + var(--fx-dx)), calc(var(--fx-sy) + var(--fx-dy))) scale(1) rotate(var(--fx-rot, 90deg)); }
}
.fx-trail {
  position: absolute; left: 0; top: 0; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%;
  background: radial-gradient(circle, #f2fdff, rgba(var(--accent-rgb), 0) 70%);
  animation: fx-trail .9s ease-out forwards;
}
@keyframes fx-trail {
  0% { opacity: .85; transform: translate(var(--fx-sx), var(--fx-sy)) scale(1); }
  100% { opacity: 0; transform: translate(var(--fx-sx), calc(var(--fx-sy) - 14px)) scale(.3); }
}

}