/* ============================================================
   ВАЛЕРА · 2000s-ВСРАТЫЙ-ХАОС
   Всё scoped под body.valera-chaos — без этого класса НЕ применяется.
   Меняем ТОЛЬКО внешку (цвет/шрифт/рамка/фон/тень/анимация/мелкий transform).
   НЕ трогаем position / z-index / display / структуру лэйаута.
   ============================================================ */

/* ---------- @keyframes: мигание, бег, пульс ---------- */
@keyframes valera-blink-border{
  0%,49%  { border-color:#ff00ff; box-shadow:0 0 0 2px #aaff00, 0 0 18px #ff00ff; }
  50%,100%{ border-color:#aaff00; box-shadow:0 0 0 2px #00e5ff, 0 0 18px #aaff00; }
}
@keyframes valera-rainbow{
  0%  { color:#ff0000; } 16%{ color:#ff9900; } 33%{ color:#ffee00; }
  50% { color:#00ff66; } 66%{ color:#00e5ff; } 83%{ color:#cc00ff; }
  100%{ color:#ff0000; }
}
@keyframes valera-bg-flash{
  0%  { filter:hue-rotate(0deg) saturate(1.6); }
  100%{ filter:hue-rotate(360deg) saturate(1.6); }
}
@keyframes valera-marquee{
  0%  { transform:translateX(100%); }
  100%{ transform:translateX(-100%); }
}
@keyframes valera-blink{
  0%,49%  { opacity:1; }
  50%,100%{ opacity:.25; }
}
@keyframes valera-zhmi{
  0%,100%{ transform:scale(1)    rotate(-1deg); }
  50%    { transform:scale(1.06) rotate(1deg);  }
}
@keyframes valera-wobble{
  0%,100%{ transform:rotate(-1.2deg); }
  50%    { transform:rotate(1.2deg);  }
}

/* ---------- ГЛОБАЛЬНО: шрифты и кислота ---------- */
body.valera-chaos{
  font-family:'Comic Sans MS','Marker Felt','Chalkboard SE',cursive !important;
  font-style:italic;
  cursor:crosshair;
}
body.valera-chaos *{
  font-family:'Comic Sans MS','Marker Felt','Chalkboard SE',cursive !important;
  letter-spacing:0 !important;
}

/* ---------- ФОН: радужный тайл + мигание ---------- */
body.valera-chaos .bg{
  background:
    repeating-linear-gradient(45deg,
      rgba(255,0,255,.22) 0 14px,
      rgba(170,255,0,.22) 14px 28px,
      rgba(0,229,255,.22) 28px 42px),
    conic-gradient(from 0deg,
      #ff0000,#ff9900,#ffee00,#00ff66,#00e5ff,#cc00ff,#ff0000) !important;
  background-blend-mode:screen !important;
  animation:valera-bg-flash 6s linear infinite !important;
  image-rendering:pixelated;
}

/* ---------- ЗАГОЛОВКИ: WordArt-радуга ---------- */
body.valera-chaos .title{
  font-family:'Comic Sans MS','Impact','Marker Felt',cursive !important;
  font-style:italic;
  color:#ffee00 !important;
  -webkit-text-stroke:2px #cc00ff;
  text-shadow:
    3px 3px 0 #ff00ff, -2px -2px 0 #00e5ff,
    0 0 22px #aaff00, 5px 5px 14px rgba(0,0,0,.7) !important;
  animation:valera-rainbow 2.2s linear infinite, valera-wobble 1.6s ease-in-out infinite !important;
  transform:rotate(-2deg);
}
body.valera-chaos .sheet-title{
  color:#aaff00 !important;
  text-shadow:2px 2px 0 #ff00ff, 0 0 14px #00e5ff !important;
  animation:valera-blink 1s steps(1) infinite !important;
}

/* ---------- МЕНЮ-ЛЕЙБЛЫ: радужный мигающий текст ---------- */
body.valera-chaos .menu li .lbl{
  color:#ff00ff !important;
  font-weight:bold;
  text-shadow:1px 1px 0 #ffee00, 0 0 10px #aaff00 !important;
  animation:valera-rainbow 3s linear infinite !important;
}
body.valera-chaos .menu li.sel .lbl{
  color:#fff !important;
  text-shadow:2px 2px 0 #ff00ff, 0 0 16px #aaff00 !important;
}
body.valera-chaos .menu li .sub{ color:#00e5ff !important; }
body.valera-chaos .menu li{
  border:2px ridge #aaff00 !important;
  background:rgba(204,0,255,.12) !important;
}

/* ---------- ВЫПУКЛЫЕ КНОПКИ 2000-х ---------- */
body.valera-chaos .tab,
body.valera-chaos .back,
body.valera-chaos .save,
body.valera-chaos .studio-cta,
body.valera-chaos .agent-card,
body.valera-chaos .card{
  border-style:outset !important;
  border-width:4px !important;
  border-color:#aaff00 #00e5ff #cc00ff #ffee00 !important;
  background:linear-gradient(180deg,#ffee00 0%,#aaff00 45%,#00b3a4 100%) !important;
  color:#3a006b !important;
  font-weight:bold;
  text-shadow:1px 1px 0 #fff !important;
  box-shadow:3px 3px 0 #cc00ff, inset 1px 1px 0 #fff !important;
  border-radius:0 !important;
  animation:valera-blink-border 1.1s steps(1) infinite !important;
}
body.valera-chaos .tab:active,
body.valera-chaos .back:active,
body.valera-chaos .save:active,
body.valera-chaos .studio-cta:active,
body.valera-chaos .agent-card:active,
body.valera-chaos .card:active{
  border-style:inset !important;
  transform:translate(2px,2px) scale(.99) !important;
}
body.valera-chaos .tab.on{
  background:linear-gradient(180deg,#ff00ff 0%,#cc00ff 100%) !important;
  color:#ffee00 !important;
  text-shadow:1px 1px 0 #000 !important;
}

/* выбранные карточки — ещё кислотнее */
body.valera-chaos .agent-card.sel,
body.valera-chaos .card.on{
  background:linear-gradient(180deg,#00ff66 0%,#00e5ff 100%) !important;
  border-color:#ff00ff !important;
}
body.valera-chaos .agent-card .cn,
body.valera-chaos .card .body .cttl{
  color:#cc00ff !important;
  text-shadow:1px 1px 0 #ffee00 !important;
}
body.valera-chaos .agent-card .cq{
  color:#7a00b3 !important;
  font-style:italic;
  animation:valera-zhmi 0.9s ease-in-out infinite !important;
}

/* ---------- ТОПБАР / ШТОРКА: кислотные рамки и фон ---------- */
body.valera-chaos .topbar{
  background:linear-gradient(90deg,#cc00ff,#aaff00,#00e5ff) !important;
  border-bottom:4px ridge #ffee00 !important;
  animation:valera-blink-border 1.4s steps(1) infinite !important;
}
body.valera-chaos .sheet{
  background:repeating-linear-gradient(0deg,
    #1a0033 0 8px, #2a0044 8px 16px) !important;
  border-top:5px ridge #aaff00 !important;
  box-shadow:0 0 0 3px #ff00ff, 0 -8px 30px rgba(170,255,0,.4) !important;
}

/* ---------- БЕГУЩАЯ СТРОКА (marquee) ---------- */
/* На .menu-foot вешаем бегущую плашку «РАСПРОДАЖА» через ::before.
   Контейнер уже overflow-нейтрален; режем по horizontal через clip. */
body.valera-chaos .menu-foot{
  overflow:visible;   /* меню остаётся внизу (база absolute bottom) — фон-мир виден */
}
body.valera-chaos .menu-foot::before{
  content:'★ ТОЛЬКО СЕГОДНЯ · СКИДКИ -90% · КРУТИ БАРАБАН · ЖМИ!!! · ★ ';
  position:fixed;     /* нижний тикер во всю ширину, под меню */
  left:0; right:0; bottom:0;
  white-space:nowrap;
  font-weight:bold;
  font-size:13px;
  color:#ffee00;
  text-shadow:1px 1px 0 #ff00ff;
  background:#000;
  animation:valera-marquee 9s linear infinite !important;
  pointer-events:none;
  z-index:5;
}

/* ---------- «ЖМИ!»-пульс на главной кнопке оффера ---------- */
body.valera-chaos .studio-cta,
body.valera-chaos .save{
  animation:valera-blink-border 1.1s steps(1) infinite,
            valera-zhmi 0.7s ease-in-out infinite !important;
}

/* ============================================================
   ОТМЕНА АНИМАЦИЙ ДЛЯ prefers-reduced-motion
   Мигание/бег/пульс выключаем — оставляем статичный кислотный хаос.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  body.valera-chaos .bg,
  body.valera-chaos .title,
  body.valera-chaos .sheet-title,
  body.valera-chaos .menu li .lbl,
  body.valera-chaos .tab,
  body.valera-chaos .back,
  body.valera-chaos .save,
  body.valera-chaos .studio-cta,
  body.valera-chaos .agent-card,
  body.valera-chaos .card,
  body.valera-chaos .agent-card .cq,
  body.valera-chaos .topbar,
  body.valera-chaos .menu-foot::before{
    animation:none !important;
  }
  /* статичный хаос: фиксируем читаемые кислотные цвета вместо радуги */
  body.valera-chaos .title{ color:#ffee00 !important; transform:rotate(-2deg); }
  body.valera-chaos .menu li .lbl{ color:#ff00ff !important; }
  body.valera-chaos .sheet-title{ opacity:1 !important; }
  body.valera-chaos .agent-card .cq{ transform:none !important; }
  /* бегущую строку прижимаем на место — без бега, просто плашка */
  body.valera-chaos .menu-foot::before{
    transform:translateX(0) !important;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}