/* ==========================================================================
   interaction_polish.css — premium global interaction layer for probiwaem.ru
   Paired with interaction_polish.js. All effects GPU-friendly (transform /
   opacity / filter) and gated on prefers-reduced-motion + capability queries.

   Eight features:
     1) 3D card tilt        (cards on hover, pointer:fine + width>=900)
     2) Magnetic buttons    (primary CTAs follow cursor when near)
     3) Scroll progress bar (top of viewport, 2px, --grad-hot)
     4) Cursor glow follow  (subtle radial blob, mix-blend:screen)
     5) Click ripple        (Material-like, on click position)
     6) Smooth anchor scroll (covered by html { scroll-behavior } in style.css)
     7) Image lazy-fade-in  (img[loading=lazy] / [data-img-fade])
     8) Section bg parallax (subtle translateY via --pbp-bg-y)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1) 3D card tilt — applies via [data-card-tilt] (JS opt-in) OR matching
      legacy card classes. Light-reflection layer via ::before.
   -------------------------------------------------------------------------- */

[data-card-tilt],
.lk-card[data-pbp-tilt],
.feat-card[data-pbp-tilt],
.stat-card[data-pbp-tilt],
.ev-card[data-pbp-tilt],
.curated-card[data-pbp-tilt],
.pb-shorts-teaser-card[data-pbp-tilt] {
    transform-style: preserve-3d;
    will-change: transform;
    transition:
        transform 420ms cubic-bezier(.2, .8, .2, 1),
        box-shadow 420ms cubic-bezier(.2, .8, .2, 1);
    transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateZ(0);
}

/* While JS is driving the tilt, kill the easing so each rAF frame snaps. */
[data-card-tilt].pbp-tilting,
[data-pbp-tilt].pbp-tilting {
    transition: none;
}

/* Reflection / sheen layer — only on cards that opted in.
   We intentionally use ::before so existing ::after halos stay intact. */
[data-pbp-tilt-reflect] {
    position: relative;
    overflow: hidden;
}
[data-pbp-tilt-reflect]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.075) 0%,
        rgba(255, 255, 255, 0.025) 35%,
        transparent 60%
    );
    opacity: 0;
    transition: opacity 280ms ease-out;
    mix-blend-mode: screen;
    z-index: 1;
    border-radius: inherit;
}
[data-pbp-tilt-reflect].pbp-tilting::before {
    opacity: 1;
}

/* Make sure card contents float above the reflection */
[data-pbp-tilt-reflect] > * {
    position: relative;
    z-index: 2;
}


/* --------------------------------------------------------------------------
   2) Magnetic buttons — global CTAs (NOT the hero submit / cta-btn,
      those keep their existing motion.css magnetic vars).
   We use a separate var namespace (--pbp-mag-x / --pbp-mag-y) to coexist.
   -------------------------------------------------------------------------- */

[data-pbp-mag] {
    transform: translate3d(var(--pbp-mag-x, 0px), var(--pbp-mag-y, 0px), 0);
    transition: transform 180ms cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
    position: relative;
    isolation: isolate;
}
[data-pbp-mag].pbp-mag-active {
    transition: transform 80ms linear;
}
[data-pbp-mag] > .pbp-mag-inner {
    display: inline-flex;
    align-items: center;
    gap: inherit;
    transform: translate3d(
        calc(var(--pbp-mag-x, 0px) * 1.5),
        calc(var(--pbp-mag-y, 0px) * 1.5),
        0
    );
    transition: transform 180ms cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
}
[data-pbp-mag].pbp-mag-active > .pbp-mag-inner {
    transition: transform 80ms linear;
}

/* Magnetic glow halo */
[data-pbp-mag]::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(
        160px circle at var(--pbp-glow-x, 50%) var(--pbp-glow-y, 50%),
        rgba(255, 201, 74, 0.32),
        rgba(255, 93, 143, 0.14) 45%,
        transparent 72%
    );
    opacity: 0;
    transition: opacity 220ms ease-out;
}
[data-pbp-mag].pbp-mag-active::before {
    opacity: 1;
}

/* Theme adapts — accent fallback for non-default palettes. */
[data-theme="ocean"] [data-pbp-mag]::before {
    background: radial-gradient(
        160px circle at var(--pbp-glow-x, 50%) var(--pbp-glow-y, 50%),
        rgba(56, 197, 255, 0.32),
        rgba(110, 137, 255, 0.14) 45%,
        transparent 72%
    );
}
[data-theme="sunset"] [data-pbp-mag]::before {
    background: radial-gradient(
        160px circle at var(--pbp-glow-x, 50%) var(--pbp-glow-y, 50%),
        rgba(255, 138, 61, 0.34),
        rgba(255, 90, 142, 0.16) 45%,
        transparent 72%
    );
}


/* --------------------------------------------------------------------------
   3) Scroll progress indicator — fixed 2px bar at top of viewport.
   z-index 9990 (above content, below cabinet panel 9998/9999).
   -------------------------------------------------------------------------- */

#pbp-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 9990;
    pointer-events: none;
    background: transparent;
    /* Avoid covering border radius effects */
    contain: layout style paint;
}
#pbp-scroll-progress::before {
    content: "";
    display: block;
    height: 100%;
    width: var(--pbp-scroll-pct, 0%);
    background: var(--grad-hot, linear-gradient(92deg, #ffc94a, #ff5d8f, #8b9cff));
    transition: width 110ms linear;
    box-shadow:
        0 0 8px var(--accent, #ffc94a),
        0 0 16px rgba(255, 201, 74, 0.45);
    border-radius: 0 2px 2px 0;
}

@media (max-width: 480px) {
    #pbp-scroll-progress { display: none; }
}


/* --------------------------------------------------------------------------
   4) Cursor glow — soft radial blob following mouse. Hide on coarse pointers.
   -------------------------------------------------------------------------- */

#pbp-cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 420px;
    height: 420px;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: opacity 320ms ease-out;
    background: radial-gradient(
        circle,
        rgba(255, 201, 74, 0.085) 0%,
        rgba(255, 93, 143, 0.045) 38%,
        transparent 70%
    );
    mix-blend-mode: screen;
    transform: translate3d(var(--pbp-cursor-x, -9999px), var(--pbp-cursor-y, -9999px), 0)
               translate(-50%, -50%);
    will-change: transform, opacity;
    border-radius: 50%;
    filter: blur(2px);
}
body.pbp-cursor-active #pbp-cursor-glow {
    opacity: 1;
}

[data-theme="ocean"] #pbp-cursor-glow {
    background: radial-gradient(
        circle,
        rgba(56, 197, 255, 0.10) 0%,
        rgba(110, 137, 255, 0.05) 40%,
        transparent 72%
    );
}
[data-theme="sunset"] #pbp-cursor-glow {
    background: radial-gradient(
        circle,
        rgba(255, 138, 61, 0.10) 0%,
        rgba(255, 90, 142, 0.05) 40%,
        transparent 72%
    );
}
[data-theme="mint"] #pbp-cursor-glow {
    background: radial-gradient(
        circle,
        rgba(124, 240, 192, 0.10) 0%,
        rgba(139, 156, 255, 0.05) 40%,
        transparent 72%
    );
}

@media (hover: none), (pointer: coarse) {
    #pbp-cursor-glow { display: none !important; }
}


/* --------------------------------------------------------------------------
   5) Click ripple — expanding circle from click point.
   Parent button gets pbp-ripple-host class to force overflow:hidden.
   -------------------------------------------------------------------------- */

.pbp-ripple-host {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.pbp-ripple {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: currentColor;
    opacity: 0.38;
    width: 12px;
    height: 12px;
    transform: translate(-50%, -50%) scale(0);
    animation: pbp-ripple-go 620ms cubic-bezier(.25, .8, .25, 1) forwards;
    z-index: 0;
    mix-blend-mode: screen;
}
@keyframes pbp-ripple-go {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.45;
    }
    60% {
        opacity: 0.22;
    }
    100% {
        transform: translate(-50%, -50%) scale(24);
        opacity: 0;
    }
}


/* --------------------------------------------------------------------------
   6) Smooth scroll for anchor links — handled in style.css (scroll-behavior:
   smooth on html and body). We add an extra guard for browsers that strip
   it, plus reduced-motion override below.
   -------------------------------------------------------------------------- */

html {
    /* Already exists in style.css but harmless to reaffirm */
    scroll-padding-top: 80px;
}


/* --------------------------------------------------------------------------
   7) Image lazy-fade-in — covers all lazy images and explicit opt-in.
   -------------------------------------------------------------------------- */

/* v0.25.94 FIX: было `img[loading="lazy"]` — слишком широкий selector. Каждая
   картинка на сайте получала opacity:0 по умолчанию, а класс .pbp-img-loaded
   добавлялся только если JS успевал поймать `load` event. Если картинка уже
   в кеше или загрузилась до JS — оставалась невидимой навсегда. Юзер: «картинки
   перестали грузиться». Теперь fade-in применяется ТОЛЬКО к img с явным
   `[data-img-fade]` — opt-in, а не opt-out. Остальные lazy-картинки работают
   нативно. */
img[data-img-fade] {
    opacity: 0;
    transition: opacity 420ms ease;
}
img[data-img-fade].pbp-img-loaded {
    opacity: 1;
}


/* --------------------------------------------------------------------------
   8) Section background parallax — subtle background-position translate
   driven by --pbp-bg-y CSS variable set by JS.
   -------------------------------------------------------------------------- */

[data-parallax-bg] {
    background-position-y: calc(50% + var(--pbp-bg-y, 0px));
    will-change: background-position;
    transition: background-position 80ms linear;
}


/* --------------------------------------------------------------------------
   Reduced-motion kill switch — disables every effect for the safety win.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    [data-card-tilt],
    [data-pbp-tilt] {
        transform: none !important;
        transition: none !important;
    }
    [data-pbp-tilt-reflect]::before { opacity: 0 !important; }

    [data-pbp-mag],
    [data-pbp-mag] > .pbp-mag-inner {
        transform: none !important;
        transition: none !important;
    }
    [data-pbp-mag]::before { opacity: 0 !important; }

    #pbp-scroll-progress { display: none !important; }
    #pbp-cursor-glow     { display: none !important; }

    .pbp-ripple { animation: none !important; display: none !important; }

    img[data-img-fade] {
        opacity: 1 !important;
        transition: none !important;
    }

    [data-parallax-bg] {
        background-position: 50% 50% !important;
        transition: none !important;
    }
}


/* --------------------------------------------------------------------------
   Touch-device guards — disable 3D tilt, cursor glow, magnetic on coarse
   pointers and narrow viewports. Ripple + scroll progress + image fade stay.
   -------------------------------------------------------------------------- */

@media (hover: none), (pointer: coarse) {
    [data-card-tilt],
    [data-pbp-tilt] {
        transform: none !important;
        transition: none !important;
    }
    [data-pbp-tilt-reflect]::before { display: none; }

    [data-pbp-mag],
    [data-pbp-mag] > .pbp-mag-inner {
        transform: none !important;
        transition: none !important;
    }
    [data-pbp-mag]::before { display: none; }
}

@media (max-width: 899px) {
    [data-card-tilt],
    [data-pbp-tilt] {
        transform: none !important;
    }
    [data-pbp-tilt-reflect]::before { display: none; }
}


/* --------------------------------------------------------------------------
   Polish: focus-visible on magnetic + ripple hosts (a11y win).
   -------------------------------------------------------------------------- */

[data-pbp-mag]:focus-visible,
.pbp-ripple-host:focus-visible {
    outline: 2px solid var(--accent, #ffc94a);
    outline-offset: 3px;
}