/* FX-слой — sergeiai.pro (тёмно-премиум палитра). Подключать ПОСЛЕ style.css. */
:root{
  --fx-glow:rgba(120,214,182,.17);   /* свечение под курсором (изумруд/бирюза) */
  --mq-ink:rgba(255,255,255,.80);     /* текст бегущей строки на тёмном */
}

/* курсор-свечение: область под мышью светлее (сильнее на тёмных секциях) */
.fx-spotlight{position:fixed;inset:0;z-index:4;pointer-events:none;mix-blend-mode:screen;opacity:0;
  transition:opacity .5s ease;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,40%),var(--fx-glow),transparent 62%)}
.fx-spotlight.on{opacity:1}

/* звёздное поле внутри тёмных блоков */
.fx-stars{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero>.inner{position:relative;z-index:1}
.hero>.grain{z-index:0}
.trust-in{position:relative;z-index:1}

/* бегущая строка */
.marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:inline-flex;align-items:center;white-space:nowrap;will-change:transform;
  animation:fxmq 36s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee .mi{display:inline-flex;align-items:center;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--mq-ink)}
.marquee .mi::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);margin:0 30px;flex:0 0 auto}
@keyframes fxmq{to{transform:translateX(-50%)}}

/* мигающий курсор (терминал/код) */
.caret{display:inline-block;width:8px;height:1.02em;vertical-align:-2px;background:currentColor;margin-left:4px;
  animation:fxblink 1.06s steps(1) infinite}
@keyframes fxblink{50%{opacity:0}}

/* блик по основной кнопке */
.btn-pri{position:relative;overflow:hidden}
.btn-pri::after{content:'';position:absolute;top:-20%;left:-130%;width:55%;height:140%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.30),transparent);
  transform:skewX(-18deg);pointer-events:none}
.btn-pri:hover::after{animation:fxsheen .9s ease}
@keyframes fxsheen{to{left:140%}}

/* prefers-reduced-motion НЕ глушим (Windows Server включает его по умолчанию). Курсор-свечение - только мышь. */
@media(hover:none){.fx-spotlight{display:none}}

/* терминал-строка с мигающим курсором в демо-боте */
.cline{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;color:#5fcfa3;
  margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);letter-spacing:.01em}

/* лёгкое мерцание заголовка hero (бирюза/мята) */
.hero h1{background:linear-gradient(110deg,#fff 20%,#dff5ec 42%,#fff 64%);background-size:240% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:fxshimmer 6.5s linear infinite}
.hero h1 em{background-size:240% auto;animation:fxshimmer 6.5s linear infinite}
@keyframes fxshimmer{to{background-position:-240% center}}


/* ===== фишки 27.07 (разбор конкурента; классы опциональны, включаются точечно) ===== */
.fx-float{animation:fxfloat 6s ease-in-out infinite}
.fx-float:nth-child(2){animation-delay:-2s}
.fx-float:nth-child(3){animation-delay:-4s}
@keyframes fxfloat{50%{transform:translateY(-8px)}}
.fx-sheen{position:relative;overflow:hidden}
.fx-sheen::before{content:'';position:absolute;top:-20%;left:-130%;width:55%;height:140%;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);pointer-events:none;animation:fxsheenloop 5s ease infinite}
@keyframes fxsheenloop{0%{left:-130%}22%{left:140%}100%{left:140%}}
.fx-rays{position:absolute;left:50%;top:50%;width:240vmax;height:240vmax;z-index:0;pointer-events:none;
  transform:translate(-50%,-50%);opacity:.05;
  background:repeating-conic-gradient(from 0deg,currentColor 0deg 9deg,transparent 9deg 24deg);
  animation:fxrays 90s linear infinite}
@keyframes fxrays{to{transform:translate(-50%,-50%) rotate(360deg)}}
.fx-serr{height:14px;background-size:16px 14px;background-repeat:repeat-x}
