/*!
 * Twitch Bots UI — эффекты: гроза вокруг Зевса, серверы на фоне текстов, появление при прокрутке.
 * Общий файл для сайта и панели. Работает вместе с tb-fx.js.
 * Всё отключается при prefers-reduced-motion и ставится на паузу вне экрана.
 */

/* ============================================================ ГРОЗА */
.tb-storm-host{position:relative;isolation:isolate}
.tb-storm-host>picture,.tb-storm-host>img{position:relative;z-index:2}
.tb-storm{position:absolute;inset:-14% -12% -6%;pointer-events:none;z-index:1}
.tb-storm__cloud{position:absolute;border-radius:50%;filter:blur(22px);opacity:.6;will-change:transform;
  background:radial-gradient(closest-side,rgba(140,123,255,.55),rgba(109,89,255,.18) 60%,rgba(109,89,255,0));
  animation:tb-cloud-drift 22s ease-in-out infinite alternate}
.tb-storm__cloud--1{width:58%;height:34%;left:-4%;top:6%}
.tb-storm__cloud--2{width:52%;height:30%;right:-6%;top:0;animation-duration:26s;animation-delay:-8s}
.tb-storm__cloud--3{width:70%;height:30%;left:14%;bottom:4%;animation-duration:30s;animation-delay:-14s;opacity:.45}
html[data-theme="light"] .tb-storm__cloud{background:radial-gradient(closest-side,rgba(91,69,224,.30),rgba(91,69,224,.08) 60%,rgba(91,69,224,0))}
@keyframes tb-cloud-drift{0%{transform:translate3d(-4%,0,0) scale(1)}50%{transform:translate3d(3%,-3%,0) scale(1.06)}100%{transform:translate3d(6%,2%,0) scale(.98)}}

.tb-storm__flash{position:absolute;left:10%;right:10%;top:-4%;height:70%;border-radius:50%;opacity:0;
  background:radial-gradient(closest-side,rgba(255,236,160,.75),rgba(255,210,63,.25) 45%,rgba(255,210,63,0) 72%)}
.tb-storm__flash.is-on{animation:tb-flash .9s ease-out}
@keyframes tb-flash{0%{opacity:0}6%{opacity:1}16%{opacity:.25}26%{opacity:.85}100%{opacity:0}}

.tb-storm__bolts{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tb-storm__bolts path{fill:none;stroke:#FFF3B8;stroke-width:4.2;stroke-linejoin:miter;stroke-linecap:round;
  filter:drop-shadow(0 0 6px #FFD23F) drop-shadow(0 0 18px rgba(255,210,63,.75));opacity:0}
.tb-storm__bolts path.tb-branch{stroke-width:2}
.tb-storm__bolts path.is-on{animation:tb-bolt .85s ease-out forwards}
@keyframes tb-bolt{0%{opacity:0;stroke-dashoffset:var(--l)}8%{opacity:1;stroke-dashoffset:0}20%{opacity:.25}30%{opacity:1}100%{opacity:0;stroke-dashoffset:0}}
html[data-theme="light"] .tb-storm__bolts path{stroke:#FFD23F;filter:drop-shadow(0 0 4px rgba(91,69,224,.7)) drop-shadow(0 0 14px rgba(255,190,0,.8))}

.tb-storm__spark{position:absolute;width:5px;height:5px;border-radius:50%;background:#FFE58A;box-shadow:0 0 10px #FFD23F;opacity:0;
  animation:tb-spark 5.5s linear infinite}
@keyframes tb-spark{0%{opacity:0;transform:translate3d(0,0,0) scale(.6)}15%{opacity:.9}100%{opacity:0;transform:translate3d(var(--dx,10px),-120px,0) scale(.2)}}

/* реакция Зевса на удар молнии */
.tb-storm-host img{transition:filter .35s ease}
.tb-storm-host.is-strike img{filter:brightness(1.18) drop-shadow(0 0 26px rgba(255,210,63,.55)) drop-shadow(0 18px 40px rgba(10,6,40,.35))}
/* статичные молнии рядом (tb-bolt) — живое мерцание */
.tb-fx .tb-bolt,.tb-fx .tb-hero__bolt{animation:tb-bolt-pulse 5s ease-in-out infinite}
.tb-fx .tb-hero__bolt--2{animation-delay:-2.3s}
@keyframes tb-bolt-pulse{0%,100%{opacity:.9;filter:drop-shadow(0 0 0 rgba(255,210,63,0))}48%{opacity:.9}50%{opacity:1;filter:drop-shadow(0 0 16px rgba(255,210,63,.9))}53%{opacity:.7}56%{opacity:1}}

/* ======================================== СЕРВЕРЫ НА ФОНЕ ТЕКСТОВ */
.tb-servers-host{position:relative;isolation:isolate}
.tb-servers-host>*:not(.tb-servers){position:relative;z-index:1}
.tb-servers{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.tb-rack{position:absolute;top:6%;bottom:6%;width:92px;display:flex;flex-direction:column;gap:6px;padding:10px 8px;border-radius:10px;
  border:1px solid color-mix(in srgb,var(--tb-violet) 22%,transparent);background:color-mix(in srgb,var(--tb-surface) 55%,transparent);opacity:.55}
.tb-rack__u{height:16px;flex-shrink:0;border-radius:4px;display:flex;align-items:center;gap:5px;padding:0 6px;
  background:color-mix(in srgb,var(--tb-surface-2) 80%,transparent);border:1px solid color-mix(in srgb,var(--tb-line) 60%,transparent)}
.tb-rack__u::after{content:"";flex:1;height:2px;margin-left:4px;border-radius:2px;background:color-mix(in srgb,var(--tb-line) 90%,transparent)}
.tb-led{width:5px;height:5px;border-radius:50%;background:#3DDC97;box-shadow:0 0 6px #3DDC97;animation:tb-led 1.6s steps(2,end) infinite}
.tb-led--y{background:#FFD23F;box-shadow:0 0 6px #FFD23F}
.tb-led--v{background:#8C7BFF;box-shadow:0 0 6px #8C7BFF}
@keyframes tb-led{0%{opacity:1}50%{opacity:.25}}
.tb-wire{position:absolute;width:2px;border-radius:2px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--tb-violet) 35%,transparent),transparent);opacity:.7}
.tb-wire::after{content:"";position:absolute;left:-3px;width:8px;height:22px;border-radius:6px;
  background:linear-gradient(180deg,transparent,#FFD23F,transparent);box-shadow:0 0 10px #FFD23F;animation:tb-packet var(--t,4s) linear infinite;animation-delay:var(--d,0s)}
@keyframes tb-packet{0%{top:-24px;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
html[data-theme="light"] .tb-rack{opacity:.5}
@media (max-width:1100px){.tb-rack{width:64px}.tb-rack__u::after{display:none}}
@media (max-width:760px){.tb-servers{opacity:.45}.tb-rack{width:40px;padding:6px 4px}.tb-rack__u{height:10px;padding:0 3px}}

/* ============================================= ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ */
.tb-fx .tb-reveal{opacity:0;transform:translate3d(0,22px,0)}
.tb-fx .tb-reveal.is-in{opacity:1;transform:none;transition:opacity .7s var(--tb-ease),transform .7s var(--tb-ease);transition-delay:var(--tb-rd,0s)}
/* лёгкий «живой» отклик карточек */
.tb-fx .tb-card--link:hover,.tb-fx .tb-pcard:hover{box-shadow:0 14px 38px rgba(109,89,255,.22)}
.tb-fx .tb-btn--primary{position:relative;overflow:hidden}
.tb-fx .tb-btn--primary::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:tb-shine 6s ease-in-out infinite}
@keyframes tb-shine{0%,80%{left:-60%}92%,100%{left:130%}}

/* паузa вне экрана */
.tb-fx-paused *,.tb-fx-paused *::before,.tb-fx-paused *::after{animation-play-state:paused!important}

@media (prefers-reduced-motion:reduce){
  .tb-storm,.tb-servers{display:none!important}
  .tb-fx .tb-reveal{opacity:1!important;transform:none!important}
  .tb-fx .tb-btn--primary::after{display:none}
}