/* Ефекти «цифровізації» при наведенні. Хости розмічає fx.js (клас .fx-host). */
.fx-host{position:relative}
.fx-layer{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden}

/* 1. Рамка-приціл: кутові дужки з'їжджаються до країв */
.fx-c{position:absolute;width:16px;height:16px;border:0 solid var(--acc);opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .2s}
.fx-c.tl{top:8px;left:8px;border-top-width:2px;border-left-width:2px;transform:translate(-14px,-14px)}
.fx-c.tr{top:8px;right:8px;border-top-width:2px;border-right-width:2px;transform:translate(14px,-14px)}
.fx-c.bl{bottom:8px;left:8px;border-bottom-width:2px;border-left-width:2px;transform:translate(-14px,14px)}
.fx-c.br{bottom:8px;right:8px;border-bottom-width:2px;border-right-width:2px;transform:translate(14px,14px)}
.fx-host:hover .fx-c{opacity:1;transform:none}

/* 2. Скан-лінія з шлейфом */
.fx-scan{position:absolute;left:0;right:0;top:-30%;height:30%;opacity:0;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--acc) 14%,transparent) 85%,var(--acc) 99%,transparent)}
.fx-host:hover .fx-scan{animation:fx-scan 1.1s cubic-bezier(.4,0,.2,1) 1 forwards}
@keyframes fx-scan{0%{top:-30%;opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}

/* 3. Піксельна сітка навколо курсора */
.fx-grid{position:absolute;inset:0;opacity:0;transition:opacity .25s;
  background-image:linear-gradient(color-mix(in srgb,var(--acc) 35%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--acc) 35%,transparent) 1px,transparent 1px);
  background-size:7px 7px;
  -webkit-mask-image:radial-gradient(130px circle at var(--mx,50%) var(--my,50%),#000 0%,transparent 70%);
          mask-image:radial-gradient(130px circle at var(--mx,50%) var(--my,50%),#000 0%,transparent 70%)}
.fx-host:hover .fx-grid{opacity:.55}

/* 6. Рядок техданих, що друкується */
.fx-read{position:absolute;left:10px;top:42px;font:600 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;color:var(--acc);
  background:color-mix(in srgb,var(--bg) 78%,transparent);padding:5px 7px;opacity:0;transition:opacity .15s;white-space:nowrap;max-width:calc(100% - 20px);overflow:hidden}
.fx-host:hover .fx-read{opacity:1}
.fx-read::after{content:'▌';animation:fx-blink .7s steps(1) infinite}
@keyframes fx-blink{50%{opacity:0}}

/* Легкий «фокус» картинки */
.fx-host img{transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .4s}
.fx-host:hover img{transform:scale(1.035);filter:contrast(1.06) saturate(1.08)}

/* 5. Відблиск на кнопках */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%)}
.btn:hover::after{transition:transform .6s cubic-bezier(.4,0,.2,1);transform:translateX(120%)}
.btn-acc:hover{box-shadow:inset 0 -2px 0 rgba(0,0,0,.18),0 0 0 1px var(--acc),4px 4px 0 0 color-mix(in srgb,var(--acc) 35%,transparent)}
.btn-ghost:hover{border-color:var(--acc);color:var(--acc)}

/* 4. «Розшифровка» тексту */
.fx-scr{color:var(--acc)}

@media (prefers-reduced-motion: reduce){
  .fx-scan,.fx-read::after{animation:none!important}
  .fx-c,.fx-host img,.btn::after{transition:none!important}
}