/* ==========================================================================
   Візуальні ефекти Valascore
   Вмикаються класами на <body>: fx-spotlight, fx-thread, fx-motion
   (керуються з «Налаштування сайту → Головна → Ефекти»).
   Для тих, хто вимкнув анімації в системі, усе показується статично.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Золотий прожектор: сітка, що проявляється навколо курсора
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    .fx-spotlight::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background-image:
            linear-gradient(rgba(232, 196, 104, .12) 1px, transparent 1px),
            linear-gradient(90deg, rgba(232, 196, 104, .12) 1px, transparent 1px);
        background-size: 56px 56px;
        background-position: center top;
        -webkit-mask-image: radial-gradient(340px circle at var(--mx, -999px) var(--my, -999px), #000 0%, rgba(0, 0, 0, .35) 45%, transparent 75%);
                mask-image: radial-gradient(340px circle at var(--mx, -999px) var(--my, -999px), #000 0%, rgba(0, 0, 0, .35) 45%, transparent 75%);
        opacity: 0;
        transition: opacity .4s ease;
    }

    .fx-spotlight.fx-pointer-in::before { opacity: 1; }

    /* Тепле світіння під курсором */
    .fx-spotlight::after {
        content: '';
        position: fixed;
        z-index: -1;
        top: 0;
        left: 0;
        width: 560px;
        height: 560px;
        margin: -280px 0 0 -280px;
        border-radius: 50%;
        pointer-events: none;
        background: radial-gradient(circle, rgba(232, 196, 104, .07), transparent 65%);
        transform: translate3d(var(--mx, -999px), var(--my, -999px), 0);
        opacity: 0;
        transition: opacity .4s ease;
    }

    .fx-spotlight.fx-pointer-in::after { opacity: 1; }

    /* Рамка картки світиться там, куди наведено курсор */
    .fx-spotlight :is(.service, .card, .feature, .faq__item, .offer-bar, .contact, .case__media, .service-hero__art, .case-hero__cover, .partner-calc, .partner-final) {
        position: relative;
    }

    .fx-spotlight :is(.service, .card, .feature, .faq__item, .offer-bar, .contact, .case__media, .service-hero__art, .case-hero__cover, .partner-calc, .partner-final)::after {
        content: '';
        position: absolute;
        inset: -1px;
        z-index: 2;
        padding: 1px;
        border-radius: inherit;
        pointer-events: none;
        background: radial-gradient(240px circle at var(--x, 50%) var(--y, 50%), rgba(240, 209, 132, 1), rgba(232, 196, 104, .3) 40%, transparent 70%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
                mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
        opacity: 0;
        transition: opacity .3s ease;
    }

    .fx-spotlight :is(.service, .card, .feature, .faq__item, .offer-bar, .contact, .case__media, .service-hero__art, .case-hero__cover, .partner-calc, .partner-final).fx-lit::after { opacity: 1; }

    /* М'яке світло всередині картки */
    .fx-spotlight :is(.service:not(.service--featured), .card, .feature, .faq__item, .offer-bar).fx-lit {
        background-image: radial-gradient(420px circle at var(--x, 50%) var(--y, 50%), rgba(232, 196, 104, .08), transparent 60%);
    }

    /* На золотій картці — темна рамка */
    .fx-spotlight .service--featured::after {
        background: radial-gradient(240px circle at var(--x, 50%) var(--y, 50%), rgba(13, 14, 17, .7), rgba(13, 14, 17, .1) 40%, transparent 70%);
    }
}

/* --------------------------------------------------------------------------
   2. Золота нитка при скролі (головна)
   -------------------------------------------------------------------------- */
.fx-thread main { position: relative; }

.thread {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.thread__track { fill: none; stroke: rgba(232, 196, 104, .14); stroke-width: 1.5; }
.thread__line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(232, 196, 104, .55)); }
.thread__tick { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset .5s ease; }
.thread__node { fill: var(--bg); stroke: rgba(232, 196, 104, .35); stroke-width: 2; transition: fill .4s ease, stroke .4s ease; }
.thread__head { fill: var(--accent); filter: drop-shadow(0 0 8px rgba(232, 196, 104, .9)); }

.thread__group.is-active .thread__node { fill: var(--accent); stroke: var(--accent); }
.thread__group.is-active .thread__tick { stroke-dashoffset: 0; }

.thread__end.is-active .thread__node { animation: thread-pulse 1.8s ease-out infinite; }

@keyframes thread-pulse {
    0%   { stroke-width: 2;  stroke: var(--accent); }
    70%  { stroke-width: 14; stroke: rgba(232, 196, 104, 0); }
    100% { stroke-width: 2;  stroke: rgba(232, 196, 104, 0); }
}

/* --------------------------------------------------------------------------
   3. Поява заголовків по словах
   -------------------------------------------------------------------------- */
.fx-motion .fx-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(.45em);
    filter: blur(6px);
    animation: fx-word-in .7s cubic-bezier(.2, .7, .2, 1) forwards;
    animation-delay: calc(var(--i, 0) * 55ms + 80ms);
}

@keyframes fx-word-in {
    to { opacity: 1; transform: none; filter: none; }
}

/* Золоте слово проявляється з відблиском (градієнт на кожному слові окремо,
   бо background-clip: text не працює крізь inline-block дочірні елементи) */
.fx-motion .fx-split .accent .fx-word {
    background: linear-gradient(100deg, var(--accent) 0%, var(--accent) 40%, #FFF3CF 50%, var(--accent) 60%, var(--accent) 100%);
    background-size: 250% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    animation: fx-word-in .7s cubic-bezier(.2, .7, .2, 1) forwards, fx-shine 1.4s ease forwards;
    animation-delay: calc(var(--i, 0) * 55ms + 80ms), calc(var(--i, 0) * 55ms + 600ms);
}

@keyframes fx-shine {
    to { background-position: 0 0; }
}

/* Поки JS не розбив заголовок на слова — ховаємо, але не довше ніж на 1.2 с */
.js .fx-motion :is(.hero .h1, .page-hero .h1, .page-hero .h1-article):not(.fx-split) {
    animation: fx-fallback 0s linear 1.2s forwards;
    opacity: 0;
}

@keyframes fx-fallback {
    to { opacity: 1; }
}

/* --------------------------------------------------------------------------
   4. Магнітні кнопки
   -------------------------------------------------------------------------- */
.fx-magnetic {
    transform: translate3d(var(--bx, 0), var(--by, 0), 0);
    transition: transform .25s cubic-bezier(.2, .7, .2, 1), background-color .2s ease, border-color .2s ease;
}

.fx-magnetic.is-near { transition-duration: .08s, .2s, .2s; }
.fx-magnetic:hover { transform: translate3d(var(--bx, 0), var(--by, 0), 0); }

/* --------------------------------------------------------------------------
   Без анімацій для тих, хто їх вимкнув у системі
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .fx-motion .fx-word { opacity: 1; transform: none; filter: none; animation: none; }
    .fx-motion .fx-split .accent .fx-word { animation: none; background: none; color: var(--accent); }
    .js .fx-motion :is(.hero .h1, .page-hero .h1, .page-hero .h1-article):not(.fx-split) { opacity: 1; animation: none; }
    .thread__end.is-active .thread__node { animation: none; }
    .fx-magnetic { transform: none; }
}