:root { --char: #4a2a1c; --flame: #ff8a3d; --cream: #f7f0ea; --ink: #221510; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .flame-glow { animation: none !important; }
}
body { font-family: 'Segoe UI', ui-sans-serif, system-ui, sans-serif; }
.font-display { font-family: Georgia, 'Times New Roman', ui-serif, serif; }
#scroll-progress { transform-origin: left; transform: scaleX(0); transition: transform 0.1s linear; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--flame); outline-offset: 3px; }
#back-to-top { opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity 0.25s ease, transform 0.25s ease; }
#back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

.flame-glow {
  width: 60px;
  height: 60px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% 60%, #ffb066, #ff8a3d 55%, #e56f22 80%);
  animation: flicker 2.4s ease-in-out infinite;
  box-shadow: 0 0 30px 6px rgba(255, 138, 61, 0.45);
}
@keyframes flicker {
  0%, 100% { transform: scale(1) rotate(-2deg); opacity: 1; }
  50% { transform: scale(1.08) rotate(2deg); opacity: 0.9; }
}