/* =========================================================
   YADVIGA — runic hover
   Работает с уже существующей разметкой:
   .rune-glow-overlay > .rune-glyph
   и классом .is-rune-hover на кнопке
   ========================================================= */

/* если старый CSS где-то показывает старые руны/слои — это прибьёт конфликты */
.btn[data-rune]::after,
.btn[data-rune]::before {
  display: none !important;
}

/* палитра */
:root {
  --rune-gold: #f3d99d;
  --rune-gold-deep: #d8a84a;
  --rune-fire: #ffbf5a;
  --rune-hot: #fff1c8;
  --rune-ash: rgba(170, 150, 118, 0.34);
  --rune-smoke: rgba(212, 197, 171, 0.20);
}

/* эффект только на обычных CTA-кнопках */
.btn:not(.icon-btn):not(.burger):not(.mini-cart-close),
a.btn:not(.icon-btn):not(.burger),
button.btn:not(.icon-btn):not(.burger) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* мелкие служебные кнопки/иконки не трогаем */
.icon-btn,
.burger,
.mini-cart-close,
.mini-cart-controls button,
.v11-cart-controls button,
.qty button {
  overflow: visible !important;
}

/* русский текст кнопки исчезает */
.btn.is-rune-hover:not(.icon-btn):not(.burger) {
  color: transparent !important;
  text-shadow: none !important;
}

.btn.is-rune-hover:not(.icon-btn):not(.burger) > *:not(.rune-glow-overlay) {
  opacity: 0;
  transition: opacity .18s ease;
}

/* слой рун */
.rune-glow-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .14em;
  padding: 0 18px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;

  /* важно: именно рунический вид */
  font-family:
    "Segoe UI Symbol",
    "Noto Sans Runic",
    "Noto Sans Symbols 2",
    "Arial Unicode MS",
    serif;
  font-size: 0.9em;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--rune-gold);

  text-shadow:
    0 0 4px rgba(255, 238, 190, 0.75),
    0 0 12px rgba(243, 217, 157, 0.66),
    0 0 26px rgba(216, 168, 74, 0.36);
}

/* золотой луч, проходящий по рунам */
.rune-glow-overlay::before {
  content: "";
  position: absolute;
  inset: -15% -30%;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    linear-gradient(
      100deg,
      transparent 20%,
      rgba(255, 235, 178, 0.05) 34%,
      rgba(255, 238, 196, 0.55) 45%,
      rgba(255, 251, 232, 0.96) 49%,
      rgba(255, 198, 91, 0.58) 53%,
      transparent 66%
    );
  transform: translateX(-140%) skewX(-18deg);
}

/* лёгкий дым/пепел */
.rune-glow-overlay::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 54%;
  width: 88%;
  height: 72%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  filter: blur(1px);

  background:
    radial-gradient(circle at 28% 62%, rgba(255, 224, 158, 0.35) 0 1.5px, transparent 3px),
    radial-gradient(circle at 44% 58%, rgba(205, 183, 140, 0.28) 0 1.5px, transparent 3px),
    radial-gradient(circle at 58% 52%, rgba(170, 154, 126, 0.26) 0 1.5px, transparent 3px),
    radial-gradient(circle at 72% 60%, rgba(214, 195, 156, 0.22) 0 1.5px, transparent 3px),
    radial-gradient(ellipse at 50% 68%, rgba(200, 183, 145, 0.12), transparent 62%);
}

/* когда hover активен */
.btn.is-rune-hover .rune-glow-overlay {
  opacity: 1;
}

.btn.is-rune-hover .rune-glow-overlay::before {
  animation: runeRaySweep 1.35s ease forwards;
}

.btn.is-rune-hover .rune-glow-overlay::after {
  animation: runeAshDrift 1.65s ease forwards;
}

/* каждая руна отдельно */
.rune-glyph {
  display: inline-block;
  opacity: 0;
  filter: blur(9px) brightness(1.8);
  transform: translateY(0) scale(.92);
  clip-path: inset(0 100% 0 0);

  animation: runeGlyphReveal 1s cubic-bezier(.18,.78,.18,1) forwards;
  animation-delay: calc(var(--i, 0) * 130ms);
}

/* проявление одной руны */
@keyframes runeGlyphReveal {
  0% {
    opacity: 0;
    filter: blur(10px) brightness(1.9);
    clip-path: inset(0 100% 0 0);
    transform: scale(.88);
    text-shadow:
      0 0 6px rgba(255, 235, 185, 0.18),
      0 0 12px rgba(243, 217, 157, 0.10);
  }

  28% {
    opacity: .5;
    filter: blur(5px) brightness(1.8);
  }

  58% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    filter: blur(1.6px) brightness(1.45);
    text-shadow:
      0 0 5px rgba(255, 246, 216, 1),
      0 0 16px rgba(243, 217, 157, 0.95),
      0 0 32px rgba(255, 191, 90, 0.60),
      0 0 54px rgba(216, 168, 74, 0.34);
  }

  78% {
    opacity: 1;
    filter: blur(.4px) brightness(1.12);
  }

  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    filter: blur(0) brightness(1);
    transform: scale(1);
    text-shadow:
      0 0 3px rgba(255, 240, 205, 0.72),
      0 0 10px rgba(243, 217, 157, 0.54),
      0 0 20px rgba(216, 168, 74, 0.24);
  }
}

/* золотой проходящий луч */
@keyframes runeRaySweep {
  0% {
    opacity: 0;
    transform: translateX(-140%) skewX(-18deg);
  }

  22% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(140%) skewX(-18deg);
  }
}

/* пепел/дым */
@keyframes runeAshDrift {
  0%, 56% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.92);
  }

  68% {
    opacity: .45;
    transform: translate(-50%, -58%) scale(1);
  }

  100% {
    opacity: 0;
    filter: blur(7px);
    transform: translate(-50%, -88%) scale(1.18);
  }
}

/* слова снизу: огонь / вода / род */
.water-whisper {
  position: fixed;
  right: 28px;
  bottom: 92px;
  z-index: 9998;
  pointer-events: none;

  color: var(--rune-gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  opacity: 0;
  transform: translateY(10px) scale(.96);
  filter: blur(5px);

  text-shadow:
    0 0 4px rgba(255, 245, 220, 0.9),
    0 0 14px rgba(243, 217, 157, 0.78),
    0 0 28px rgba(255, 191, 90, 0.42);
}

.water-whisper.show {
  animation: whisperBurn 1.75s ease forwards;
}

.water-whisper.show::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 56%;
  width: 120%;
  height: 82%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  filter: blur(2px);

  background:
    radial-gradient(circle at 34% 58%, rgba(255, 221, 150, 0.55) 0 2px, transparent 4px),
    radial-gradient(circle at 48% 48%, rgba(215, 183, 121, 0.48) 0 2px, transparent 4px),
    radial-gradient(circle at 64% 55%, rgba(166, 148, 118, 0.34) 0 2px, transparent 4px),
    radial-gradient(ellipse at 50% 62%, rgba(198, 176, 132, 0.16), transparent 65%);

  animation: whisperAsh 1.75s ease forwards;
}

@keyframes whisperBurn {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(.96);
    filter: blur(7px) brightness(1.6);
  }

  24% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(1.2px) brightness(1.45);
  }

  46% {
    opacity: 1;
    filter: blur(0) brightness(1.12);
  }

  72% {
    opacity: .65;
    color: #caa66a;
    transform: translateY(-8px) scale(1.02);
    filter: blur(1.2px) brightness(.94);
  }

  100% {
    opacity: 0;
    color: rgba(170, 154, 124, 0.16);
    transform: translateY(-22px) scale(1.06);
    filter: blur(7px) brightness(.68);
  }
}

@keyframes whisperAsh {
  0%, 44% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.88);
  }

  64% {
    opacity: .68;
    transform: translate(-50%, -60%) scale(1);
  }

  100% {
    opacity: 0;
    filter: blur(9px);
    transform: translate(-50%, -94%) scale(1.3);
  }
}

/* мобильная адаптация */
@media (max-width: 520px) {
  .rune-glow-overlay {
    font-size: 0.78em;
    gap: .1em;
    padding: 0 14px;
  }

  .water-whisper {
    right: 18px;
    bottom: 74px;
    font-size: 17px;
  }
}

/* уважение reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rune-glyph,
  .rune-glow-overlay::before,
  .rune-glow-overlay::after,
  .water-whisper,
  .water-whisper::after {
    animation: none !important;
    transition: none !important;
  }

  .btn.is-rune-hover .rune-glow-overlay {
    opacity: 1;
  }

  .rune-glyph {
    opacity: 1;
    clip-path: none;
    filter: none;
    transform: none;
  }
}
/* =========================================================
   YADVIGA — правильная руническая анимация CTA
   Вставить В САМЫЙ КОНЕЦ v16-magic-runes.css
   ========================================================= */

:root {
  --rune-gold: #f3d99d;
  --rune-gold-deep: #d8a84a;
  --rune-fire: #ffbf5a;
  --rune-hot: #fff1c8;
  --rune-ash: rgba(170, 150, 118, 0.34);
}

/* убираем старые конфликтующие псевдослои */
.btn[data-rune]::before,
.btn[data-rune]::after {
  display: none !important;
}

/* эффект только на больших кнопках, не на круглых иконках */
.btn:not(.icon-btn):not(.burger):not(.mini-cart-close):not(.small) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* не трогаем мелкие кнопки */
.icon-btn,
.burger,
.hotspot,
.chip-v6,
.mini-cart-close,
.mini-cart-controls button,
.v11-cart-controls button,
.qty button {
  overflow: visible !important;
}

/* русский текст гаснет только на больших CTA */
.btn.is-rune-hover:not(.icon-btn):not(.burger):not(.small) {
  color: transparent !important;
  text-shadow: none !important;
}

.btn.is-rune-hover:not(.icon-btn):not(.burger):not(.small) > *:not(.rune-glow-overlay) {
  opacity: 0 !important;
}

/* слой рун */
.rune-glow-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.16em !important;

  padding: 0 18px !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  overflow: hidden !important;

  opacity: 0;
  color: var(--rune-gold);

  font-family:
    "Segoe UI Symbol",
    "Noto Sans Runic",
    "Noto Sans Symbols 2",
    "Arial Unicode MS",
    serif;

  font-size: 0.92em;
  font-weight: 700;
  letter-spacing: 0.08em;

  text-shadow:
    0 0 3px rgba(255, 244, 210, 0.88),
    0 0 12px rgba(243, 217, 157, 0.72),
    0 0 28px rgba(216, 168, 74, 0.42);
}

/* общий золотой луч */
.rune-glow-overlay::before {
  content: "";
  position: absolute;
  inset: -20% -35%;
  z-index: -1;

  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;

  background:
    linear-gradient(
      100deg,
      transparent 18%,
      rgba(255, 235, 178, 0.04) 35%,
      rgba(255, 238, 196, 0.58) 45%,
      rgba(255, 251, 232, 0.98) 50%,
      rgba(255, 198, 91, 0.56) 54%,
      transparent 68%
    );

  transform: translateX(-145%) skewX(-18deg);
}

/* дым / пепел */
.rune-glow-overlay::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 58%;
  width: 90%;
  height: 80%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;

  background:
    radial-gradient(circle at 24% 62%, rgba(255, 224, 158, 0.42) 0 1.5px, transparent 3px),
    radial-gradient(circle at 38% 55%, rgba(205, 183, 140, 0.32) 0 1.5px, transparent 3px),
    radial-gradient(circle at 54% 60%, rgba(170, 154, 126, 0.28) 0 1.5px, transparent 3px),
    radial-gradient(circle at 70% 54%, rgba(214, 195, 156, 0.24) 0 1.5px, transparent 3px),
    radial-gradient(ellipse at 50% 70%, rgba(200, 183, 145, 0.14), transparent 65%);

  filter: blur(1px);
}

/* hover включает слой */
.btn.is-rune-hover:not(.icon-btn):not(.burger):not(.small) .rune-glow-overlay {
  opacity: 1 !important;
}

.btn.is-rune-hover:not(.icon-btn):not(.burger):not(.small) .rune-glow-overlay::before {
  animation: yadvigaRuneRay 1.45s ease forwards;
}

.btn.is-rune-hover:not(.icon-btn):not(.burger):not(.small) .rune-glow-overlay::after {
  animation: yadvigaRuneAsh 1.9s ease forwards;
}

/* каждая руна отдельно */
.rune-glyph {
  display: inline-block !important;

  opacity: 0;
  color: var(--rune-gold);

  filter: blur(10px) brightness(1.85);
  transform: scale(0.82);
  clip-path: inset(0 100% 0 0);

  text-shadow:
    0 0 4px rgba(255, 238, 190, 0.12),
    0 0 12px rgba(243, 217, 157, 0.08);

  animation: none;
}

/* главное: каждая руна проявляется с задержкой */
.btn.is-rune-hover .rune-glyph {
  animation: yadvigaRuneGlyph 1.15s cubic-bezier(.18,.78,.18,1) forwards;
  animation-delay: calc(var(--i, 0) * 150ms);
}

@keyframes yadvigaRuneGlyph {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    filter: blur(11px) brightness(1.9);
    transform: scale(0.78);
  }

  22% {
    opacity: 0.35;
    filter: blur(7px) brightness(1.85);
  }

  48% {
    opacity: 0.9;
    clip-path: inset(0 0 0 0);
    filter: blur(2.5px) brightness(1.62);
    transform: scale(1.04);
    text-shadow:
      0 0 5px rgba(255, 246, 216, 1),
      0 0 18px rgba(243, 217, 157, 0.95),
      0 0 36px rgba(255, 191, 90, 0.65),
      0 0 58px rgba(216, 168, 74, 0.36);
  }

  72% {
    opacity: 1;
    filter: blur(0.6px) brightness(1.2);
    transform: scale(1);
  }

  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    filter: blur(0) brightness(1);
    transform: scale(1);
    text-shadow:
      0 0 3px rgba(255, 240, 205, 0.78),
      0 0 10px rgba(243, 217, 157, 0.58),
      0 0 22px rgba(216, 168, 74, 0.28);
  }
}

@keyframes yadvigaRuneRay {
  0% {
    opacity: 0;
    transform: translateX(-145%) skewX(-18deg);
  }

  24% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(145%) skewX(-18deg);
  }
}

@keyframes yadvigaRuneAsh {
  0%, 58% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
    filter: blur(1px);
  }

  72% {
    opacity: 0.48;
    transform: translate(-50%, -62%) scale(1);
    filter: blur(2px);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -92%) scale(1.22);
    filter: blur(9px);
  }
}

/* нижнее слово: золотое сгорание */
.water-whisper {
  color: var(--rune-gold) !important;
  text-shadow:
    0 0 4px rgba(255, 245, 220, 0.9),
    0 0 14px rgba(243, 217, 157, 0.78),
    0 0 28px rgba(255, 191, 90, 0.42) !important;
}

.water-whisper.show {
  animation: yadvigaWhisperBurn 1.75s ease forwards !important;
}

.water-whisper.show::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 56%;
  width: 120%;
  height: 82%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  filter: blur(2px);

  background:
    radial-gradient(circle at 34% 58%, rgba(255, 221, 150, 0.55) 0 2px, transparent 4px),
    radial-gradient(circle at 48% 48%, rgba(215, 183, 121, 0.48) 0 2px, transparent 4px),
    radial-gradient(circle at 64% 55%, rgba(166, 148, 118, 0.34) 0 2px, transparent 4px),
    radial-gradient(ellipse at 50% 62%, rgba(198, 176, 132, 0.16), transparent 65%);

  animation: yadvigaWhisperAsh 1.75s ease forwards;
}

@keyframes yadvigaWhisperBurn {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(.96);
    filter: blur(7px) brightness(1.6);
  }

  24% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(1.2px) brightness(1.45);
  }

  46% {
    opacity: 1;
    filter: blur(0) brightness(1.12);
  }

  72% {
    opacity: .65;
    color: #caa66a;
    transform: translateY(-8px) scale(1.02);
    filter: blur(1.2px) brightness(.94);
  }

  100% {
    opacity: 0;
    color: rgba(170, 154, 124, 0.16);
    transform: translateY(-22px) scale(1.06);
    filter: blur(7px) brightness(.68);
  }
}

@keyframes yadvigaWhisperAsh {
  0%, 44% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.88);
  }

  64% {
    opacity: .68;
    transform: translate(-50%, -60%) scale(1);
  }

  100% {
    opacity: 0;
    filter: blur(9px);
    transform: translate(-50%, -94%) scale(1.3);
  }
}

@media (max-width: 520px) {
  .rune-glow-overlay {
    font-size: 0.78em !important;
    gap: 0.1em !important;
  }
}
/* =========================================================
   YADVIGA — мягкое проявление рун по одному символу
   Вставить В САМЫЙ КОНЕЦ v16-magic-runes.css
   ========================================================= */

.rune-glow-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.22em !important;

  padding: 0 22px !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  overflow: hidden !important;

  opacity: 0;

  font-family:
    "Segoe UI Symbol",
    "Noto Sans Runic",
    "Noto Sans Symbols 2",
    "Arial Unicode MS",
    serif;

  font-size: 1.12em !important;
  font-weight: 700;
  letter-spacing: 0.08em;

  color: #f3d99d;
}

.btn.is-rune-hover:not(.icon-btn):not(.burger):not(.small) .rune-glow-overlay {
  opacity: 1 !important;
}

/* русский текст гасим */
.btn.is-rune-hover:not(.icon-btn):not(.burger):not(.small) {
  color: transparent !important;
  text-shadow: none !important;
}

.btn.is-rune-hover:not(.icon-btn):not(.burger):not(.small) > *:not(.rune-glow-overlay) {
  opacity: 0 !important;
}

/* проходящий огненный луч */
.rune-glow-overlay::before {
  content: "";
  position: absolute;
  inset: -25% -40%;
  z-index: -1;

  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;

  background:
    linear-gradient(
      100deg,
      transparent 18%,
      rgba(255, 232, 165, 0.03) 34%,
      rgba(255, 238, 190, 0.35) 43%,
      rgba(255, 251, 230, 0.92) 49%,
      rgba(255, 191, 90, 0.42) 54%,
      transparent 68%
    );

  transform: translateX(-145%) skewX(-18deg);
}

.btn.is-rune-hover .rune-glow-overlay::before {
  animation: yadvigaRuneLightSweep 1.65s ease forwards;
}

/* дым/пепел после появления */
.rune-glow-overlay::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 60%;
  width: 88%;
  height: 85%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;

  background:
    radial-gradient(circle at 24% 62%, rgba(255, 222, 150, 0.34) 0 1.5px, transparent 3px),
    radial-gradient(circle at 38% 56%, rgba(210, 185, 135, 0.28) 0 1.5px, transparent 3px),
    radial-gradient(circle at 54% 62%, rgba(170, 150, 118, 0.24) 0 1.5px, transparent 3px),
    radial-gradient(circle at 70% 55%, rgba(215, 190, 145, 0.20) 0 1.5px, transparent 3px),
    radial-gradient(ellipse at 50% 72%, rgba(200, 180, 140, 0.10), transparent 68%);

  filter: blur(1px);
}

.btn.is-rune-hover .rune-glow-overlay::after {
  animation: yadvigaRuneSmoke 2.15s ease forwards;
}

/* главное: отдельная руна */
.rune-glyph {
  display: inline-block !important;

  opacity: 0;
  color: #f3d99d;

  /*
    ВАЖНО:
    blur теперь маленький. Иначе появляются серые квадраты.
  */
  filter: blur(2px) brightness(1.25);
  transform: scale(0.72);

  /*
    Символ раскрывается как будто линия проявляется слева направо.
  */
  clip-path: inset(0 100% 0 0);

  text-shadow:
    0 0 2px rgba(255, 244, 210, 0.2),
    0 0 7px rgba(243, 217, 157, 0.16);

  animation: none !important;
}

/* каждая руна загорается отдельно */
.btn.is-rune-hover .rune-glyph {
  animation: yadvigaRuneGlyphSoft 1.28s cubic-bezier(.18,.78,.18,1) forwards !important;
  animation-delay: calc(var(--i, 0) * 115ms) !important;
}

@keyframes yadvigaRuneGlyphSoft {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    filter: blur(2.8px) brightness(1.1);
    transform: scale(0.72);
    text-shadow:
      0 0 2px rgba(255, 238, 190, 0.08),
      0 0 6px rgba(243, 217, 157, 0.06);
  }

  20% {
    opacity: 0.28;
    filter: blur(2.2px) brightness(1.35);
  }

  42% {
    opacity: 0.85;
    clip-path: inset(0 0 0 0);
    filter: blur(1px) brightness(1.75);
    transform: scale(1.13);
    color: #fff1c8;
    text-shadow:
      0 0 4px rgba(255, 250, 225, 1),
      0 0 13px rgba(243, 217, 157, 0.95),
      0 0 28px rgba(255, 191, 90, 0.62),
      0 0 48px rgba(216, 168, 74, 0.34);
  }

  62% {
    opacity: 1;
    filter: blur(0.25px) brightness(1.22);
    transform: scale(1.02);
    color: #f7dda0;
  }

  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    filter: blur(0) brightness(1);
    transform: scale(1);
    color: #f3d99d;
    text-shadow:
      0 0 2px rgba(255, 244, 210, 0.78),
      0 0 8px rgba(243, 217, 157, 0.58),
      0 0 18px rgba(216, 168, 74, 0.30);
  }
}

@keyframes yadvigaRuneLightSweep {
  0% {
    opacity: 0;
    transform: translateX(-145%) skewX(-18deg);
  }

  24% {
    opacity: 0.85;
  }

  100% {
    opacity: 0;
    transform: translateX(145%) skewX(-18deg);
  }
}

@keyframes yadvigaRuneSmoke {
  0%, 58% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92);
    filter: blur(1px);
  }

  72% {
    opacity: 0.38;
    transform: translate(-50%, -64%) scale(1);
    filter: blur(2px);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -96%) scale(1.18);
    filter: blur(8px);
  }
}

/* На маленьких экранах делаем спокойнее */
@media (max-width: 520px) {
  .rune-glow-overlay {
    font-size: 0.9em !important;
    gap: 0.15em !important;
    padding: 0 14px !important;
  }
}
/* =========================================================
   YADVIGA — clean rune reveal v2
   Мягкое появление каждой руны без серых прямоугольников
   ========================================================= */

/* Убираем слишком яркий общий луч */
.rune-glow-overlay::before {
  display: none !important;
}

/* Убираем старый дым, если он мешает */
.rune-glow-overlay::after {
  display: none !important;
}

/* Слой рун */
.rune-glow-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 0.24em !important;
  padding: 0 20px !important;

  opacity: 0;
  pointer-events: none !important;
  overflow: hidden !important;
  white-space: nowrap !important;

  font-family:
    "Segoe UI Symbol",
    "Noto Sans Runic",
    "Noto Sans Symbols 2",
    "Arial Unicode MS",
    serif;

  font-size: 1.08em !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #f3d99d;
}

/* Включаем слой только на hover */
.btn.is-rune-hover:not(.icon-btn):not(.burger):not(.small) .rune-glow-overlay {
  opacity: 1 !important;
}

/* Русский текст гасим */
.btn.is-rune-hover:not(.icon-btn):not(.burger):not(.small) {
  color: transparent !important;
  text-shadow: none !important;
}

.btn.is-rune-hover:not(.icon-btn):not(.burger):not(.small) > *:not(.rune-glow-overlay) {
  opacity: 0 !important;
}

/* Каждая руна */
.rune-glyph {
  position: relative;
  display: inline-block !important;

  opacity: 0;
  color: #f3d99d;

  /*
    Важно: без clip-path и без сильного blur.
    Поэтому больше не будет серых прямоугольников.
  */
  clip-path: none !important;
  filter: brightness(0.7) blur(0.8px);
  transform: scale(0.72);

  text-shadow:
    0 0 2px rgba(255, 238, 190, 0.12),
    0 0 6px rgba(243, 217, 157, 0.08);

  animation: none !important;
}

/* Локальная искра у каждой руны */
.rune-glyph::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.4em;
  height: 1.4em;
  transform: translate(-50%, -50%) scale(0.5);

  border-radius: 50%;
  opacity: 0;
  pointer-events: none;

  background:
    radial-gradient(circle,
      rgba(255, 245, 205, 0.82) 0%,
      rgba(255, 205, 100, 0.42) 24%,
      rgba(216, 168, 74, 0.12) 48%,
      transparent 70%
    );

  filter: blur(2px);
  z-index: -1;
}

/* Запуск поочерёдного появления */
.btn.is-rune-hover .rune-glyph {
  animation: yadvigaRuneCleanIn 1.1s cubic-bezier(.18,.78,.18,1) forwards !important;
  animation-delay: calc(var(--i, 0) * 105ms) !important;
}

.btn.is-rune-hover .rune-glyph::after {
  animation: yadvigaRuneSpark 1.1s ease forwards !important;
  animation-delay: calc(var(--i, 0) * 105ms) !important;
}

/* Чистое проявление руны */
@keyframes yadvigaRuneCleanIn {
  0% {
    opacity: 0;
    filter: brightness(0.45) blur(1.6px);
    transform: scale(0.62);
    color: rgba(243, 217, 157, 0.2);
  }

  28% {
    opacity: 0.35;
    filter: brightness(1.25) blur(0.9px);
    transform: scale(0.88);
    color: rgba(255, 232, 170, 0.62);
  }

  52% {
    opacity: 1;
    filter: brightness(1.85) blur(0.2px);
    transform: scale(1.12);
    color: #fff1c8;
    text-shadow:
      0 0 4px rgba(255, 250, 225, 1),
      0 0 12px rgba(243, 217, 157, 0.95),
      0 0 26px rgba(255, 191, 90, 0.56),
      0 0 42px rgba(216, 168, 74, 0.32);
  }

  74% {
    opacity: 1;
    filter: brightness(1.18) blur(0);
    transform: scale(1.02);
    color: #f7dda0;
  }

  100% {
    opacity: 1;
    filter: brightness(1) blur(0);
    transform: scale(1);
    color: #f3d99d;
    text-shadow:
      0 0 2px rgba(255, 244, 210, 0.68),
      0 0 8px rgba(243, 217, 157, 0.48),
      0 0 16px rgba(216, 168, 74, 0.24);
  }
}

/* Вспышка вокруг каждой руны */
@keyframes yadvigaRuneSpark {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.45);
  }

  36% {
    opacity: 0.75;
    transform: translate(-50%, -50%) scale(0.95);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.55);
  }
}

/* Лёгкое общее тление строки после появления */
.btn.is-rune-hover .rune-glow-overlay {
  animation: yadvigaRuneLineGlow 2.2s ease forwards !important;
}

@keyframes yadvigaRuneLineGlow {
  0% {
    filter: brightness(0.8);
  }

  52% {
    filter: brightness(1.15);
  }

  100% {
    filter: brightness(1);
  }
}

/* Нижний шёпот — золотой, без голубого */
.water-whisper {
  color: #f3d99d !important;
  text-shadow:
    0 0 4px rgba(255, 245, 220, 0.9),
    0 0 14px rgba(243, 217, 157, 0.78),
    0 0 28px rgba(255, 191, 90, 0.42) !important;
}
/* v21 rune lock: фиксируем удачный вариант — чуть шире и плавнее */
.rune-glow-overlay{
  gap:0.26em!important;
  font-size:1.1em!important;
}
.btn.is-rune-hover .rune-glyph{
  animation-delay:calc(var(--i, 0) * 95ms)!important;
}


/* v22 rune scope restore: эффект снова не только на крупные CTA */
.rune-cta{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate;
}

/* Не превращаем служебные управляющие кнопки в рунические */
.icon-btn:not(.rune-cta),
.burger:not(.rune-cta),
.mini-cart-close,
.mini-cart-controls button,
.v11-cart-controls button,
.cart-controls button,
.qty button{
  overflow:visible!important;
}

/* Показываем рунический слой на любой декоративной кнопке, куда JS добавил .rune-cta */
.rune-cta.is-rune-hover .rune-glow-overlay{
  opacity:1!important;
}

/* Гасим исходный текст/иконку только у рунической кнопки */
.rune-cta.is-rune-hover > *:not(.rune-glow-overlay){
  opacity:0!important;
  transition:opacity .16s ease;
}

/* Для фильтров и hotspot чуть меньше руны, чтобы не ломать ширину */
.chip-v6.rune-cta .rune-glow-overlay,
.hotspot.rune-cta .rune-glow-overlay,
.btn.small.rune-cta .rune-glow-overlay{
  font-size:.92em!important;
  gap:.18em!important;
}

/* Анимация остаётся той же удачной: по одному символу, без большого луча */
.rune-cta.is-rune-hover .rune-glyph{
  animation:yadvigaRuneCleanIn 1.1s cubic-bezier(.18,.78,.18,1) forwards!important;
  animation-delay:calc(var(--i, 0) * 95ms)!important;
}
.rune-cta.is-rune-hover .rune-glyph::after{
  animation:yadvigaRuneSpark 1.1s ease forwards!important;
  animation-delay:calc(var(--i, 0) * 95ms)!important;
}