/* ═══════════════════════════════════════════════════════════════════════
   ENERGARD — анімація перемикання теми.

   Три частини:
   1. Іконка в кнопці: сонце ⇄ місяць перетікають одне в одне (обертання +
      масштаб). Обидві іконки лежать одна на одній у .eg-ico-wrap (18×18) —
      розмітка в header.php.
   2. Спалах біля кнопки: сонце «стріляє» промінням (світла тема) або
      розходиться прохолодне сяйво (темна). Тільки навколо кнопки,
      напівпрозоре — контент читається.
   3. Перехід теми: коло розкривається від кнопки через View Transitions
      (assets/js/theme-switch.js). Під ним — жива сторінка в новій темі,
      тому контент нічим не перекривається. Де API немає (старі Firefox) —
      плавне перефарбування класом .eg-theme-anim.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Іконка кнопки ─────────────────────────────────────────────────── */
.eg-theme-btn .eg-ico-wrap,
.eg-mob-theme .eg-ico-wrap {
  position: relative; display: block; width: 18px; height: 18px; flex: 0 0 18px;
}
.eg-ico-wrap .eg-ico-sun,
.eg-ico-wrap .eg-ico-moon {
  position: absolute; inset: 0; display: block !important; margin: 0 !important;
  transition: opacity .22s ease, transform .45s cubic-bezier(.34,1.4,.64,1);
}
/* темна тема (типова): показуємо сонце — «увімкнути світле» */
.eg-ico-wrap .eg-ico-sun  { opacity: 1; transform: rotate(0)       scale(1);   }
.eg-ico-wrap .eg-ico-moon { opacity: 0; transform: rotate(-110deg) scale(.35); }
html[data-theme="light"] .eg-ico-wrap .eg-ico-sun  { opacity: 0; transform: rotate(110deg) scale(.35); }
html[data-theme="light"] .eg-ico-wrap .eg-ico-moon { opacity: 1; transform: rotate(0)      scale(1);   }
/* промені сонця на ховері трохи розходяться */
.eg-theme-btn:hover .eg-ico-sun,
.eg-mob-theme:hover .eg-ico-sun { transform: rotate(35deg) scale(1.08); }
html[data-theme="light"] .eg-theme-btn:hover .eg-ico-moon,
html[data-theme="light"] .eg-mob-theme:hover .eg-ico-moon { transform: rotate(-18deg) scale(1.08); }
/* підпис у мобільному меню */
.eg-mob-theme .eg-t-dark { display: none; }
html[data-theme="light"] .eg-mob-theme .eg-t-light { display: none; }
html[data-theme="light"] .eg-mob-theme .eg-t-dark  { display: inline; }

/* ── 2. Спалах біля кнопки ────────────────────────────────────────────── */
/* Клас eg-flare скрипт вішає на натиснуту кнопку на 0.72 с. Обидва
   псевдоелементи не перехоплюють кліки й нічого не зсувають. */
[data-eg-theme-toggle] { position: relative; }
[data-eg-theme-toggle].eg-flare::before,
[data-eg-theme-toggle].eg-flare::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 150px; height: 150px; margin: -75px 0 0 -75px;
  border-radius: 50%; pointer-events: none; z-index: 2;
  opacity: 0; will-change: transform, opacity;
}
/* проміння: сектори conic-градієнта, м'яко згашені до центру й до краю */
[data-eg-theme-toggle].eg-flare::before {
  background: repeating-conic-gradient(from 0deg,
    rgba(255,201,63,.85) 0deg 3.5deg, transparent 3.5deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 13%, #000 30%, transparent 62%);
          mask: radial-gradient(circle, transparent 13%, #000 30%, transparent 62%);
  animation: eg-flare-rays .72s cubic-bezier(.2,.75,.25,1) forwards;
}
/* тепле кільце-сяйво */
[data-eg-theme-toggle].eg-flare::after {
  background: radial-gradient(circle,
    rgba(255,223,138,.5) 0%, rgba(255,201,63,.28) 34%,
    rgba(255,201,63,.1) 52%, transparent 68%);
  animation: eg-flare-glow .72s cubic-bezier(.2,.75,.25,1) forwards;
}
/* у світлій темі перемикач веде в темну — сяйво прохолодне, без проміння */
html[data-theme="light"] [data-eg-theme-toggle].eg-flare::before {
  background: repeating-conic-gradient(from 0deg,
    rgba(143,166,255,.5) 0deg 2.5deg, transparent 2.5deg 45deg);
}
html[data-theme="light"] [data-eg-theme-toggle].eg-flare::after {
  background: radial-gradient(circle,
    rgba(232,236,255,.55) 0%, rgba(143,166,255,.3) 34%,
    rgba(90,110,200,.12) 52%, transparent 68%);
}
@keyframes eg-flare-rays {
  0%   { opacity: 0;   transform: rotate(-28deg) scale(.18); }
  22%  { opacity: .95; }
  100% { opacity: 0;   transform: rotate(26deg)  scale(1.12); }
}
@keyframes eg-flare-glow {
  0%   { opacity: 0;  transform: scale(.14); }
  26%  { opacity: 1;  }
  100% { opacity: 0;  transform: scale(1.3); }
}

/* ── 3. Перехід теми (View Transitions) ───────────────────────────────── */
/* Типовий кросфейд вимикаємо: нову тему відкриває clip-path зі скрипта,
   стара лежить під нею незмінна, тому сторінка не блимає й не гасне. */
html.eg-vt-theme::view-transition-old(root),
html.eg-vt-theme::view-transition-new(root) {
  animation: none; mix-blend-mode: normal;
}
html.eg-vt-theme::view-transition-old(root) { z-index: 0; }
html.eg-vt-theme::view-transition-new(root) { z-index: 1; }

/* ── 4. Запас для браузерів без View Transitions ──────────────────────── */
/* Тему міняємо одразу, але кольори переходять плавно. Клас живе ~0.45 с. */
html.eg-theme-anim, html.eg-theme-anim *,
html.eg-theme-anim *::before, html.eg-theme-anim *::after {
  transition: background-color .38s ease, border-color .38s ease,
              color .38s ease, fill .38s ease, stroke .38s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  .eg-ico-wrap .eg-ico-sun, .eg-ico-wrap .eg-ico-moon { transition: none; }
  [data-eg-theme-toggle].eg-flare::before,
  [data-eg-theme-toggle].eg-flare::after { display: none; }
  html.eg-theme-anim, html.eg-theme-anim *,
  html.eg-theme-anim *::before, html.eg-theme-anim *::after { transition: none !important; }
}