/* ==========================================================================
   Tegal Kunir Bersatu — Theme Layer
   --------------------------------------------------------------------------
   1. Token warna (mode terang & gelap)
   2. Lapisan "hidup"  : aurora, gradasi bergerak, kartu, tombol, transisi
   3. Pemetaan gelap   : meng-override utility Tailwind bawaan template
   4. Kontrol form, toggle tema, cetak, reduced-motion

   Dipakai oleh base.html & login.html. Semua override mode gelap memakai
   selector ".dark ..." (spesifisitas 0,2,0) sehingga selalu menang atas
   utility Tailwind (0,1,0) tanpa perlu !important.
   ========================================================================== */

/* ==========================================================================
   1. TOKEN
   ========================================================================== */
:root {
  color-scheme: light;

  --bg:            #f2f6fd;
  --bg-solid:      #f2f6fd;
  --surface:       #ffffff;
  --surface-2:     #f6f9ff;
  --surface-3:     #eaf1ff;
  --surface-soft:  rgba(255, 255, 255, .78);

  --border:        #e5ebf6;
  --border-strong: #d3dced;

  --text:          #0f172a;
  --text-2:        #475569;
  --text-3:        #64748b;
  --text-muted:    #94a3b8;
  --text-faint:    #cbd5e1;

  --accent:        #1d4ed8;
  --accent-soft:   #3b82f6;
  --accent-text:   #1d4ed8;

  --ok:            #059669;
  --warn:          #d97706;
  --bad:           #e11d48;

  --card-shadow:   0 1px 2px rgba(16, 24, 40, .04), 0 14px 30px -18px rgba(29, 78, 216, .28);
  --card-shadow-h: 0 2px 4px rgba(16, 24, 40, .05), 0 22px 40px -20px rgba(29, 78, 216, .38);
  --glow-accent:   0 8px 20px -8px rgba(29, 78, 216, .55);

  --aurora-1: rgba(59, 130, 246, .20);
  --aurora-2: rgba(56, 189, 248, .18);
  --aurora-3: rgba(139, 92, 246, .14);
  --aurora-opacity: 1;
}

html.dark {
  color-scheme: dark;

  --bg:            #070b16;
  --bg-solid:      #070b16;
  --surface:       #101a2e;
  --surface-2:     #16213a;
  --surface-3:     #1d2b48;
  --surface-soft:  rgba(16, 26, 46, .82);

  --border:        rgba(148, 176, 255, .13);
  --border-strong: rgba(148, 176, 255, .24);

  --text:          #e9eefc;
  --text-2:        #b9c6e2;
  --text-3:        #93a3c4;
  --text-muted:    #77879f;
  --text-faint:    #4d5b78;

  --accent:        #3b82f6;
  --accent-soft:   #60a5fa;
  --accent-text:   #8ab4ff;

  --ok:            #34d399;
  --warn:          #fbbf24;
  --bad:           #fb7185;

  --card-shadow:   0 1px 0 rgba(255, 255, 255, .03) inset, 0 18px 34px -22px rgba(0, 0, 0, .9);
  --card-shadow-h: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 26px 46px -22px rgba(0, 0, 0, .95);
  --glow-accent:   0 10px 26px -10px rgba(59, 130, 246, .75);

  --aurora-1: rgba(37, 99, 235, .30);
  --aurora-2: rgba(14, 165, 233, .22);
  --aurora-3: rgba(124, 58, 237, .24);
  --aurora-opacity: 1;
}

/* ==========================================================================
   2. LAPISAN "HIDUP"
   ========================================================================== */

html {
  background-color: var(--bg-solid);
}

/* Body dibiarkan transparan agar aurora di belakangnya terlihat.
   Spesifisitas 0,2,2 mengalahkan utility .bg-slate-100 / .bg-brand-900. */
html body.bg-slate-100,
html body.bg-brand-900,
html body.bg-slate-50 {
  background-color: transparent;
}

body {
  color: var(--text);
  transition: color .3s ease;
}

/* --- Aurora: gumpalan cahaya lembut yang bergerak sangat pelan --- */
@media screen {
  body::before {
    content: '';
    position: fixed;
    inset: -20vmax;
    z-index: -1;
    pointer-events: none;
    opacity: var(--aurora-opacity);
    background-image:
      radial-gradient(38vmax 38vmax at 12% 8%,  var(--aurora-1) 0, transparent 62%),
      radial-gradient(34vmax 34vmax at 92% 4%,  var(--aurora-2) 0, transparent 60%),
      radial-gradient(42vmax 42vmax at 72% 96%, var(--aurora-3) 0, transparent 64%);
    animation: auroraDrift 30s ease-in-out infinite alternate;
    will-change: transform;
    transition: opacity .4s ease;
  }
}

@keyframes auroraDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5vmax, -2vmax, 0) scale(1.06); }
  100% { transform: translate3d(-2vmax, 2.5vmax, 0) scale(1.02); }
}

/* --- Gradasi brand yang bernapas (sidebar & header) --- */
.brand-gradient {
  background: linear-gradient(135deg, #172554 0%, #1d4ed8 55%, #38bdf8 100%);
  background-size: 200% 200%;
  animation: brandFlow 22s ease-in-out infinite;
}
html.dark .brand-gradient {
  background: linear-gradient(135deg, #0a1230 0%, #16307d 52%, #0b7ea8 100%);
  background-size: 200% 200%;
}
@keyframes brandFlow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.hero-glow {
  background-size: 190% 190%;
  animation: brandFlow 24s ease-in-out infinite;
}

/* Di mode gelap hero diredupkan supaya tidak menyilaukan.
   !important diperlukan karena sebagian hero memakai style inline. */
html.dark .hero-glow,
html.dark .hero-alive {
  background-image: linear-gradient(150deg, #0a1230 0%, #16307d 52%, #0e7ba6 130%) !important;
}

/* --- Kilau menyapu di atas hero dashboard (butuh class .hero-alive) --- */
.hero-alive::after {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -75%;
  width: 55%;
  pointer-events: none;
  transform: skewX(-18deg);
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .16) 50%, transparent 100%);
  animation: heroShine 9s cubic-bezier(.4, 0, .2, 1) 1.4s infinite;
}
@keyframes heroShine {
  0%        { left: -75%; }
  45%, 100% { left: 135%; }
}

/* --- Kartu: bayangan berwarna + angkat halus saat disentuh --- */
main .bg-white,
main .bg-white\/70,
main .bg-slate-50,
main .bg-slate-100 {
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .2s ease;
}

main .bg-white.rounded-2xl,
main .bg-white.rounded-3xl,
main .bg-white.rounded-\[20px\],
main .bg-white.rounded-\[22px\],
main .bg-white.rounded-xl {
  box-shadow: var(--card-shadow);
}
main .bg-white.rounded-2xl:hover,
main .bg-white.rounded-3xl:hover {
  box-shadow: var(--card-shadow-h);
}

/* --- Kartu beraksen warna lembut (dipakai di dashboard) --- */
.kartu-hijau  { background: linear-gradient(150deg, #ecfdf5, #f6fffb); }
.kartu-jingga { background: linear-gradient(150deg, #fff7ed, #fffbf5); }
html.dark .kartu-hijau  { background: linear-gradient(150deg, rgba(16, 185, 129, .20), rgba(16, 185, 129, .05)); }
html.dark .kartu-jingga { background: linear-gradient(150deg, rgba(245, 158, 11, .20), rgba(245, 158, 11, .05)); }

/* --- Tombol utama: gradasi + cahaya --- */
button.bg-brand-700,
a.bg-brand-700,
input.bg-brand-700 {
  background-image: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 55%, #38bdf8 140%);
  box-shadow: var(--glow-accent);
  transition: transform .18s ease, box-shadow .25s ease, filter .25s ease;
}
button.bg-brand-700:hover,
a.bg-brand-700:hover,
input.bg-brand-700:hover {
  transform: translateY(-1px);
  filter: saturate(1.12) brightness(1.04);
  box-shadow: 0 14px 30px -10px rgba(29, 78, 216, .7);
}
button.bg-brand-700:active,
a.bg-brand-700:active {
  transform: translateY(0) scale(.985);
}

/* --- Sidebar: item aktif dengan lampu tepi --- */
.sidebar-link.active {
  box-shadow: inset 0 0 22px -8px rgba(56, 189, 248, .55);
}

/* --- Baris tabel & interaksi kecil --- */
tbody tr {
  transition: background-color .18s ease;
}
a, button {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

/* --- Scrollbar mengikuti tema --- */
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
* { scrollbar-color: var(--border-strong) transparent; }

::selection {
  background: rgba(59, 130, 246, .28);
  color: var(--text);
}

/* --- Animasi halus ketika tema ditukar --- */
html.tema-anim,
html.tema-anim * ,
html.tema-anim *::before,
html.tema-anim *::after {
  transition: background-color .35s ease, border-color .35s ease,
              color .35s ease, fill .35s ease, box-shadow .35s ease !important;
}

/* ==========================================================================
   3. PEMETAAN MODE GELAP
   Meng-override utility Tailwind yang sudah tertanam di seluruh template.
   Dibungkus @media screen supaya hasil cetak tetap terang.
   ========================================================================== */
@media screen {

  /* ---------- Permukaan ---------- */
  .dark .bg-white,
  .dark .bg-slate-50,
  .dark .bg-gray-50 {
    background-color: var(--surface);
  }
  .dark .bg-slate-100,
  .dark .bg-gray-100 {
    background-color: var(--surface-2);
  }
  .dark .bg-slate-200,
  .dark .bg-gray-200 {
    background-color: var(--surface-3);
  }
  .dark .bg-slate-300,
  .dark .bg-gray-300 {
    background-color: #33415c;
  }
  .dark .bg-slate-800,
  .dark .bg-slate-900 {
    background-color: #1e293b;
  }

  /* thead / area sekunder di dalam kartu */
  .dark thead.bg-slate-50,
  .dark .bg-slate-50\/70,
  .dark .bg-slate-50.rounded-xl,
  .dark .bg-slate-50.rounded-2xl {
    background-color: var(--surface-2);
  }

  /* permukaan transparan (topbar, tab bar) */
  .dark .bg-white\/95,
  .dark .bg-white\/90,
  .dark .bg-white\/80,
  .dark .bg-white\/70,
  .dark .bg-white\/60 {
    background-color: var(--surface-soft);
  }
  .dark .bg-slate-900\/95 { background-color: rgba(2, 6, 18, .95); }
  .dark .bg-slate-900\/50,
  .dark .bg-slate-900\/45,
  .dark .bg-black\/50 { background-color: rgba(2, 6, 18, .68); }

  /* gradasi latar tab bar bawah */
  .dark .bg-gradient-to-t.from-slate-100\/95 {
    background-image: linear-gradient(to top,
      var(--bg-solid) 0%, rgba(7, 11, 22, .72) 55%, transparent 100%);
  }

  /* ---------- Teks ---------- */
  .dark .text-slate-900, .dark .text-gray-900,
  .dark .text-slate-800, .dark .text-gray-800 { color: var(--text); }

  .dark .text-slate-700, .dark .text-gray-700,
  .dark .text-slate-600, .dark .text-gray-600 { color: var(--text-2); }

  .dark .text-slate-500, .dark .text-gray-500 { color: var(--text-3); }
  .dark .text-slate-400, .dark .text-gray-400 { color: var(--text-muted); }
  .dark .text-slate-300, .dark .text-gray-300 { color: var(--text-faint); }

  /* ---------- Aksen teks ---------- */
  .dark .text-brand-700, .dark .text-brand-600,
  .dark .text-blue-700,  .dark .text-blue-600, .dark .text-blue-500 { color: var(--accent-text); }
  .dark .text-brand-400, .dark .text-sky-600, .dark .text-sky-500   { color: #7dd3fc; }

  .dark .text-red-500, .dark .text-red-600, .dark .text-red-700,
  .dark .text-rose-500, .dark .text-rose-600, .dark .text-rose-700 { color: var(--bad); }

  .dark .text-green-600, .dark .text-green-700, .dark .text-green-800,
  .dark .text-emerald-600, .dark .text-emerald-700, .dark .text-emerald-800 { color: var(--ok); }

  .dark .text-amber-600, .dark .text-amber-700, .dark .text-amber-800,
  .dark .text-yellow-600, .dark .text-yellow-700, .dark .text-orange-600 { color: var(--warn); }

  .dark .text-violet-600, .dark .text-violet-700,
  .dark .text-purple-600, .dark .text-purple-700,
  .dark .text-indigo-600, .dark .text-indigo-700 { color: #c4b5fd; }

  .dark .text-teal-600, .dark .text-teal-700, .dark .text-cyan-600 { color: #5eead4; }
  .dark .text-pink-600, .dark .text-pink-700, .dark .text-fuchsia-600 { color: #f9a8d4; }

  /* ---------- Chip / badge warna lembut ---------- */
  .dark .bg-brand-50, .dark .bg-brand-100,
  .dark .bg-blue-50,  .dark .bg-blue-100 { background-color: rgba(59, 130, 246, .17); }

  .dark .bg-red-50,   .dark .bg-red-100,
  .dark .bg-rose-50,  .dark .bg-rose-100 { background-color: rgba(244, 63, 94, .16); }

  .dark .bg-amber-50,  .dark .bg-amber-100,
  .dark .bg-yellow-50, .dark .bg-yellow-100,
  .dark .bg-orange-50, .dark .bg-orange-100 { background-color: rgba(245, 158, 11, .16); }

  .dark .bg-green-50,   .dark .bg-green-100,
  .dark .bg-emerald-50, .dark .bg-emerald-100 { background-color: rgba(16, 185, 129, .16); }

  .dark .bg-violet-50, .dark .bg-violet-100,
  .dark .bg-purple-50, .dark .bg-purple-100,
  .dark .bg-indigo-50, .dark .bg-indigo-100 { background-color: rgba(139, 92, 246, .18); }

  .dark .bg-sky-50,  .dark .bg-sky-100,
  .dark .bg-cyan-50, .dark .bg-cyan-100,
  .dark .bg-teal-50, .dark .bg-teal-100 { background-color: rgba(56, 189, 248, .16); }

  .dark .bg-pink-50, .dark .bg-pink-100 { background-color: rgba(236, 72, 153, .16); }

  /* ---------- Garis tepi ---------- */
  .dark .border-slate-50,  .dark .border-slate-100, .dark .border-slate-200,
  .dark .border-gray-100,  .dark .border-gray-200,
  .dark .border-slate-900\/\[\.06\], .dark .border-slate-900\/\[\.08\] { border-color: var(--border); }

  .dark .border-slate-300, .dark .border-gray-300,
  .dark .border-slate-700, .dark .border-slate-800 { border-color: var(--border-strong); }

  .dark .border-blue-200,  .dark .border-brand-100 { border-color: rgba(59, 130, 246, .28); }
  .dark .border-red-200,   .dark .border-rose-100  { border-color: rgba(244, 63, 94, .28); }
  .dark .border-amber-200, .dark .border-yellow-200{ border-color: rgba(245, 158, 11, .28); }
  .dark .border-green-200, .dark .border-emerald-100 { border-color: rgba(16, 185, 129, .28); }

  .dark .divide-slate-50  > :not([hidden]) ~ :not([hidden]),
  .dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
  .dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]),
  .dark .divide-gray-100  > :not([hidden]) ~ :not([hidden]) { border-color: var(--border); }

  .dark .ring-white { --tw-ring-color: var(--surface); }

  /* ---------- Status hover / active / focus ---------- */
  .dark .hover\:bg-slate-50:hover,
  .dark .hover\:bg-gray-50:hover,
  .dark .hover\:bg-slate-50\/70:hover,
  .dark .hover\:bg-slate-100:hover,
  .dark .hover\:bg-gray-100:hover,
  .dark .active\:bg-slate-50:active,
  .dark .focus\:bg-white:focus { background-color: var(--surface-2); }

  .dark .hover\:bg-slate-200:hover,
  .dark .hover\:bg-slate-300:hover,
  .dark .hover\:bg-slate-900:hover { background-color: var(--surface-3); }

  .dark .hover\:bg-blue-50:hover,  .dark .hover\:bg-brand-50:hover { background-color: rgba(59, 130, 246, .2); }
  .dark .hover\:bg-red-50:hover,   .dark .hover\:bg-rose-50:hover  { background-color: rgba(244, 63, 94, .2); }
  .dark .hover\:bg-amber-50:hover, .dark .hover\:bg-yellow-50:hover{ background-color: rgba(245, 158, 11, .2); }
  .dark .hover\:bg-green-50:hover, .dark .hover\:bg-emerald-50:hover { background-color: rgba(16, 185, 129, .2); }

  .dark .hover\:text-slate-600:hover,
  .dark .hover\:text-gray-500:hover { color: var(--text-2); }
  .dark .hover\:text-brand-700:hover,
  .dark .hover\:text-blue-600:hover { color: var(--accent-text); }
  .dark .hover\:text-red-600:hover  { color: var(--bad); }
  .dark .hover\:text-amber-600:hover{ color: var(--warn); }

  /* ---------- Varian peer-checked (pilihan radio bergaya kartu) ---------- */
  .dark .peer:checked ~ .peer-checked\:bg-white   { background-color: var(--surface-3); }
  .dark .peer:checked ~ .peer-checked\:bg-slate-900 { background-color: var(--accent); }
  .dark .peer:checked ~ .peer-checked\:bg-green-50 { background-color: rgba(16, 185, 129, .18); }
  .dark .peer:checked ~ .peer-checked\:bg-red-50   { background-color: rgba(244, 63, 94, .18); }
  .dark .peer:checked ~ .peer-checked\:text-slate-900 { color: var(--text); }
  .dark .peer:checked ~ .peer-checked\:text-green-700 { color: var(--ok); }
  .dark .peer:checked ~ .peer-checked\:text-red-700   { color: var(--bad); }
  .dark .peer:checked ~ .peer-checked\:border-slate-900 { border-color: var(--accent); }

  /* ---------- Varian md: (banner flash desktop) ---------- */
  @media (min-width: 768px) {
    .dark .md\:bg-blue-50   { background-color: rgba(59, 130, 246, .15); }
    .dark .md\:bg-green-50  { background-color: rgba(16, 185, 129, .15); }
    .dark .md\:bg-red-50    { background-color: rgba(244, 63, 94, .15); }
    .dark .md\:bg-amber-50  { background-color: rgba(245, 158, 11, .15); }
    .dark .md\:text-blue-700  { color: var(--accent-text); }
    .dark .md\:text-green-700 { color: var(--ok); }
    .dark .md\:text-red-700   { color: var(--bad); }
    .dark .md\:text-amber-700 { color: var(--warn); }
    .dark .md\:border-blue-200  { border-color: rgba(59, 130, 246, .3); }
    .dark .md\:border-green-200 { border-color: rgba(16, 185, 129, .3); }
    .dark .md\:border-red-200   { border-color: rgba(244, 63, 94, .3); }
    .dark .md\:border-amber-200 { border-color: rgba(245, 158, 11, .3); }
  }

  /* ---------- Sheet mobile (menu bawah) ---------- */
  .dark .mobile-menu .sidebar-link { color: var(--text); }
  .dark .mobile-menu .sidebar-link i { color: var(--text-muted); }
  .dark .mobile-menu .sidebar-link.active { background: rgba(59, 130, 246, .18); color: var(--accent-text); }
  .dark .mobile-menu .sidebar-link.active i { color: var(--accent-text); }
  .dark .mobile-menu .sidebar-link:hover:not(.active) { background: var(--surface-2); }
  .dark .mobile-menu p { color: var(--text-muted) !important; }

  /* ---------- Halaman login ---------- */
  .dark .desktop-form-panel { background: var(--surface) !important; }
  .dark .wave-divider path  { fill: var(--surface); }
  .dark .form-sheet { box-shadow: 0 -20px 60px -15px rgba(0, 0, 0, .75); }
  .dark .login-bg {
    background-color: #04070f;
    background-image:
      radial-gradient(at 0% 0%,   hsla(224, 76%, 22%, 1) 0, transparent 55%),
      radial-gradient(at 100% 0%, hsla(199, 89%, 28%, 1) 0, transparent 55%),
      radial-gradient(at 50% 100%, hsla(255, 60%, 20%, 1) 0, transparent 60%);
    background-size: 180% 180%, 180% 180%, 180% 180%;
  }
  .dark .input-wrap:focus-within .field-icon { color: var(--accent-text) !important; }
}

/* ==========================================================================
   4. KONTROL FORM
   ========================================================================== */
input, select, textarea {
  transition: background-color .25s ease, border-color .2s ease, color .25s ease, box-shadow .2s ease;
}

input:not([type='checkbox']):not([type='radio']):not([type='range']):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .18);
}

@media screen {
  .dark input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']),
  .dark select,
  .dark textarea {
    background-color: var(--surface-2);
    color: var(--text);
    border-color: var(--border);
  }
  .dark input::placeholder,
  .dark textarea::placeholder { color: var(--text-muted); }

  .dark input[type='file'] { color: var(--text-2); }
  .dark input[type='file']::file-selector-button {
    background-color: var(--surface-3);
    color: var(--text-2);
    border: 0;
  }
  .dark select option { background-color: var(--surface-2); color: var(--text); }
  .dark input[type='checkbox'], .dark input[type='radio'] { accent-color: var(--accent-soft); }
}

/* ==========================================================================
   5. PEMILIH TEMA
   ========================================================================== */
.tema-opsi {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .5rem .75rem;
  border-radius: .75rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
}
.tema-opsi:hover { background: var(--surface-2); }
.tema-opsi[aria-checked='true'] {
  background: rgba(59, 130, 246, .12);
  color: var(--accent-text);
}
.tema-opsi[aria-checked='true'] .tema-cek { opacity: 1; }
.tema-cek { margin-left: auto; opacity: 0; font-size: .7rem; }

/* Segmented control (sheet mobile & halaman profil) */
.tema-segmen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .25rem;
  padding: .25rem;
  border-radius: 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.tema-segmen .tema-opsi {
  flex-direction: column;
  gap: .25rem;
  justify-content: center;
  padding: .625rem .25rem;
  font-size: .6875rem;
  border-radius: .8125rem;
  text-align: center;
}
.tema-segmen .tema-opsi i { font-size: .9375rem; }
.tema-segmen .tema-opsi[aria-checked='true'] {
  background: var(--surface);
  color: var(--accent-text);
  box-shadow: 0 2px 8px -2px rgba(16, 24, 40, .18);
}
.tema-segmen .tema-cek { display: none; }

/* Tombol ikon di topbar */
.tema-tombol {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  color: var(--text-3);
}
.tema-tombol:hover {
  background: var(--surface-2);
  color: var(--accent-text);
}
.tema-tombol i { transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.tema-tombol:hover i { transform: rotate(25deg) scale(1.08); }

/* ==========================================================================
   6. CETAK & AKSESIBILITAS
   ========================================================================== */
@media print {
  html, body { background: #fff !important; color: #000 !important; }
  body::before { display: none !important; }
  .no-print, .tema-tombol, .tema-segmen { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  .brand-gradient,
  .hero-glow,
  .hero-alive::after {
    animation: none !important;
  }
  html.tema-anim, html.tema-anim * { transition: none !important; }
}