/* WfcFX — field-эффекты (свечение / наклон / shimmer / ripple), навешиваются JS через wfc-fx.js */

.wfc-fx {
    position: relative;
}

/* magic-glow: свечение, следующее за курсором. Цвет по умолчанию — тёплое золото
   (лучше читается на тёмном фоне сайта, чем плоский белый); можно переопределить через
   attach(el, 'magic-glow', {color: '...'}) — ставит --fx-glow-color на элементе. */
.wfc-fx--glow {
    isolation: isolate;
}
.wfc-fx--glow::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: radial-gradient(
        170px circle at var(--fx-x, 50%) var(--fx-y, 50%),
        var(--fx-glow-color, rgba(255, 209, 128, 0.4)),
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.wfc-fx--glow:hover::before {
    opacity: 1;
}

/* holo-tilt: 3D-наклон по курсору + радужный foil-блик поверх (как на голографических
   картах) — без этого слоя лёгкий rotateX/Y на плоском фоне почти не читается. */
.wfc-fx--tilt {
    transform: perspective(700px) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg));
    transition: transform 0.15s ease-out;
    transform-style: preserve-3d;
    will-change: transform;
    isolation: isolate;
}
.wfc-fx--tilt::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: linear-gradient(
        115deg,
        transparent 25%,
        rgba(255, 80, 160, 0.35) 38%,
        rgba(255, 225, 80, 0.35) 46%,
        rgba(80, 220, 255, 0.35) 54%,
        rgba(140, 90, 255, 0.35) 62%,
        transparent 75%
    );
    background-size: 250% 250%;
    background-position: var(--fx-x, 50%) var(--fx-y, 50%);
    mix-blend-mode: color-dodge;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.wfc-fx--tilt:hover::before {
    opacity: 0.85;
}

/* holo-foil: наклон + пастельный радужный слой, искажённый двухслойным SVG-шумом
   (feTurbulence x2 + feOffset, управляемый курсором, + feDisplacementMap — см.
   createHoloFilter в wfc-fx.js) — неровное "жидкое" преломление, едущее вслед за курсором,
   без анимации по таймеру. Градиент — repeating с коротким периодом (~14% при
   background-size 260%) — на элементе виден почти двузначный десяток повторов спектра,
   как на реальном холографическом чехле, а не один плавный переход.
   overflow:hidden на самом элементе — чистая обрезка результата по форме кнопки СНАРУЖИ
   фильтра; псевдоэлемент нарочно намного больше кнопки (inset: -60%) и залит СПЛОШНЫМ
   градиентом без прозрачных стопов — иначе смещение штормит именно альфа-край, а не
   рисунок (это и был баг с "рябью только по контуру"). */
.wfc-fx--foil {
    transform: perspective(700px) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg));
    transition: transform 0.15s ease-out;
    transform-style: preserve-3d;
    will-change: transform;
    isolation: isolate;
    overflow: hidden;
}
.wfc-fx--foil::before {
    content: '';
    position: absolute;
    inset: -60%;
    z-index: 1;
    /* 8 повторов спектра (период 12.5%). Разрывы между циклами теперь МЯГКИЕ — цвет плавно
       гаснет в прозрачность и так же плавно проявляется обратно (было: резкий transparent-стоп
       сразу после последнего цвета — выглядело "рублено"). Стоп в конце (12.5%) специально
       совпадает по цвету/альфе со стопом в начале (0%) — иначе на стыке повторов был бы
       заметный шов. */
    background: repeating-linear-gradient(140deg,
        rgba(255, 121, 232, 0.75) 0%,
        rgba(255, 222, 106, 0.75) 2.08%,
        rgba(98, 209, 178, 0.75) 4.17%,
        rgba(111, 184, 239, 0.75) 6.25%,
        rgba(160, 80, 255, 0.75) 8.33%,
        rgba(160, 80, 255, 0) 9.37%,
        transparent 10.42%,
        rgba(255, 121, 232, 0) 11.46%,
        rgba(255, 121, 232, 0.75) 12.5%
    );
    background-size: 260% 260%;
    background-position: var(--fx-x, 50%) var(--fx-y, 50%);
    mix-blend-mode: color-dodge;
    filter: var(--fx-holo-filter, none);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.wfc-fx--foil:hover::before {
    opacity: 0.85;
}

/* holo-chrome: "gradient map" как в фотошопе — цвет берётся прямо из яркости шума
   (feComponentTransfer в createHoloChromeFilter, wfc-fx.js), а не из смещения готового
   CSS-градиента. Поэтому здесь НЕТ repeating-linear-gradient и НЕТ mask-image — сам
   ::before ничего не красит, всё изображение целиком синтезирует SVG-фильтр. Смещение
   больше не используется (нет feDisplacementMap), поэтому не нужен ни oversized inset,
   ни overflow:hidden для обрезки рваных краёв — обычные границы элемента. */
.wfc-fx--chrome {
    transform: perspective(700px) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg));
    transition: transform 0.15s ease-out;
    transform-style: preserve-3d;
    will-change: transform;
    isolation: isolate;
}
.wfc-fx--chrome::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: #fff;
    filter: var(--fx-holo-filter, none);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.wfc-fx--chrome:hover::before {
    opacity: 0.85;
}

/* shimmer-sweep: полоса блика, проходящая по поверхности при hover */
.wfc-fx--shimmer {
    overflow: hidden;
}
.wfc-fx--shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        75deg,
        transparent,
        rgba(255, 255, 255, 0.45),
        rgba(184, 79, 255, 0.2),
        transparent
    );
    transform: skewX(-20deg);
    pointer-events: none;
    transition: left 0.6s ease;
}
.wfc-fx--shimmer:hover::after {
    left: 130%;
}

/* click-ripple: волна от точки клика */
.wfc-fx--ripple {
    overflow: hidden;
}
.wfc-fx--ripple::after {
    content: '';
    position: absolute;
    top: var(--fx-ripple-y, 50%);
    left: var(--fx-ripple-x, 50%);
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    opacity: 0;
}
.wfc-fx--ripple.wfc-fx--rippling::after {
    animation: wfc-fx-ripple 0.6s ease-out;
}

@keyframes wfc-fx-ripple {
    0% {
        opacity: 0.6;
        transform: scale(0);
    }
    100% {
        opacity: 0;
        transform: scale(24);
    }
}