/* Шар руху: vanilla-порти Aceternity (аврора, проявлення тексту, прожектор на картках),
   перефарбовані в токени Цукру. Класи ace-* не перейменовувати — за ними порт можна
   звірити з джерелом у скілі aceternity-ui. Кольори, шрифт і картки лишаються
   цукровими: беремо лише рух, не дизайн-систему. Усе гасне під prefers-reduced-motion. */

/* ───────────────────────── аврора за героєм ───────────────────────── */
/* Абсолютний шар угорі сторінки з негативним z-index: малюється над папером body,
   але під усім вмістом. Не перекриває нічого і не ловить кліки. Маска тримає сяйво
   за заголовком героя (ліворуч угорі), до потоку облич воно вже згасає. */

.ace-aurora {
  position: absolute; top: 0; left: 0; right: 0; height: 640px;
  z-index: -1; pointer-events: none; overflow: hidden;
  --ace-aurora: repeating-linear-gradient(100deg,
    var(--yellow-2) 10%, var(--yellow) 15%, var(--violet-soft) 20%,
    var(--green-soft) 25%, var(--yellow-2) 30%);
  --ace-stripes: repeating-linear-gradient(100deg,
    var(--paper) 0%, var(--paper) 7%, transparent 10%, transparent 12%, var(--paper) 16%);
}
.ace-aurora::before {
  content: ""; position: absolute; inset: -10px;
  background-image: var(--ace-stripes), var(--ace-aurora);
  background-size: 300% 200%, 200% 100%;
  background-position: 50% 50%, 50% 50%;
  filter: blur(18px); opacity: .55; will-change: background-position;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 28% 0%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 90% at 28% 0%, #000 10%, transparent 72%);
  animation: ace-aurora 70s linear infinite;
}
html[data-theme="dark"] .ace-aurora::before { opacity: .5; filter: blur(22px); }
@keyframes ace-aurora {
  from { background-position: 50% 50%, 50% 50%; }
  to   { background-position: 350% 50%, 350% 50%; }
}
@media (max-width: 720px) {
  .ace-aurora { height: 460px; }
  .ace-aurora::before {
    -webkit-mask-image: radial-gradient(ellipse 110% 80% at 30% 0%, #000 10%, transparent 75%);
    mask-image: radial-gradient(ellipse 110% 80% at 30% 0%, #000 10%, transparent 75%);
  }
}

/* ─────────────────────── заголовок героя зі слів ─────────────────────── */
/* fx.js розкладає h1 на <span> по словах і ставить --i; рядки лишаються текстовими
   вузлами "\n" — white-space: pre-line у app.css і далі ламає їх. Без класу is-in
   слова видимі: якщо JS не виконався, заголовок просто стоїть. */

.ace-text-generate-effect { --ace-tge-duration: .7s; --ace-tge-stagger: .09s; }
.ace-text-generate-effect.is-in > span {
  display: inline-block;
  animation: ace-tge-in var(--ace-tge-duration) ease-out both;
  animation-delay: calc(var(--i, 0) * var(--ace-tge-stagger));
}
@keyframes ace-tge-in {
  from { opacity: 0; filter: blur(10px); transform: translateY(4px); }
  to   { opacity: 1; filter: blur(0);    transform: none; }
}

/* ─────────────────────── прожектор на картці справи ─────────────────────── */
/* Теплий radial-gradient стежить за курсором (--x/--y ставить fx.js делегуванням на
   #month-root, тому перемальовування місяця йому байдуже). isolation: isolate — щоб
   ::before із z-index -1 ліг над фоном картки, а не за нею. Хінт (.hint, z-index 25)
   лишається поверх, бо тепер живе в тому ж контексті. Жодного overflow: hidden —
   він відрізав би хінт, який виступає за картку. */

.card { isolation: isolate; --x: 50%; --y: 50%; }
.card::before {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .3s;
  background:
    radial-gradient(300px circle at var(--x) var(--y),
      color-mix(in srgb, var(--yellow) 75%, transparent), transparent 60%),
    radial-gradient(460px circle at var(--x) var(--y),
      color-mix(in srgb, var(--violet-soft) 55%, transparent), transparent 70%);
}
.card:hover::before { opacity: 1; }
/* У режимі правки картка — редактор, прожектор там лише заважає читати поля */
body.e-on .card::before { display: none; }

/* ─────────────────────── лічильники ─────────────────────── */
/* Число набігає (fx.js), нічого не рухається в макеті: ширина фіксується через
   tabular-nums, інакше «1» і «8» різної ширини смикали б сусідній текст. */
.ace-count { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .ace-aurora::before { animation: none; }
  .ace-text-generate-effect.is-in > span { animation: none; }
  .card::before { transition: none; }
}