@font-face {
  font-family: Comfortaa;
  src: url('/assets/comfortaa-500.ttf') format('truetype');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

/* Approved “Живая нить”: a warm filament with a slow travelling highlight. */
.hero-line.hero-filament {
  --filament-core: #ffe6b5;
  --filament-white: #fffaf0;
  --filament-warm: #ffb13f;
  --filament-amber: #ef730a;
  position: relative;
  isolation: isolate;
  width: max-content;
  max-width: 100%;
  overflow: visible;
  font-family: Comfortaa, Manrope, Arial, sans-serif;
  font-weight: 500;
  letter-spacing: -.065em;
  color: var(--filament-core);
  -webkit-text-stroke: 0;
  background: none;
  filter: none;
  text-shadow: none;
}

.hero-filament > span {
  display: block;
  font: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
}

.hero-filament__base {
  text-shadow: 0 0 2px #fff5e3, 0 0 8px #ffb849b3, 0 0 22px #ff870e70;
}

.hero-filament__glow,
.hero-filament__sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation-play-state: paused;
}

/* Effect copies are drawn from data-text so page text holds the word once. */
.hero-filament__glow::before,
.hero-filament__sweep::before {
  content: attr(data-text);
}

.hero-filament__glow {
  z-index: -1;
  color: #ffd69c;
  text-shadow: 0 0 8px #fff0b5, 0 0 20px var(--filament-warm),
    0 0 42px var(--filament-amber), 0 0 65px #ef730a80;
  animation: filament-breathe 6s ease-in-out infinite paused;
}

.hero-filament__sweep {
  color: transparent;
  background: linear-gradient(105deg, transparent 40%, var(--filament-white) 47%,
    #fff 50%, var(--filament-white) 53%, transparent 60%) 140% 50% / 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: filament-sheen 6s ease-in-out infinite paused;
}

.hero-filament[data-filament-active] > span {
  animation-play-state: running;
}

@keyframes filament-breathe {
  0%, 100% { opacity: .3; }
  50% { opacity: .85; }
}

@keyframes filament-sheen {
  0%, 12% { background-position: 140% 50%; }
  70%, 100% { background-position: -40% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-filament__glow { animation: none; opacity: .45; }
  .hero-filament .hero-filament__sweep { display: none; animation: none; }
}

@media (forced-colors: active) {
  .hero-line.hero-filament { color: CanvasText; }
  .hero-filament__base { text-shadow: none; }
  .hero-filament .hero-filament__glow,
  .hero-filament .hero-filament__sweep { display: none; }
}