/**
 * Tiger Sticky — frontend styles.
 *
 *  - `.tiger-sticky--top|--bottom` enables `position: sticky`.
 *  - `.tiger-sticky--on-{desktop|tablet|mobile}` gates which breakpoints stick.
 *  - `.tiger-sticky--stuck` (added by JS) carries the "while pinned" look.
 *  - `.tiger-sticky--hidden` slides the element away while stuck (header style).
 *  - `--tiger-sticky-adminbar` is set by JS to the WP admin-bar height when
 *    the user opts in; it stacks with the user-defined top offset.
 */

.tiger-sticky {
    --tiger-sticky-dur: 300ms;
    --tiger-sticky-scale: 1;
    --tiger-sticky-hide-y: 0;
    --tiger-sticky-adminbar: 0px;
    transition:
        background-color var(--tiger-sticky-dur) ease,
        backdrop-filter  var(--tiger-sticky-dur) ease,
        box-shadow       var(--tiger-sticky-dur) ease,
        padding          var(--tiger-sticky-dur) ease,
        transform        var(--tiger-sticky-dur) ease,
        opacity          var(--tiger-sticky-dur) ease;
    will-change: transform;
}

/* Position bindings — SINGLE source of truth for top/bottom.
   The PHP offset controls write CSS vars (`--tiger-sticky-user-top` /
   `--tiger-sticky-user-bottom`) rather than `top`/`bottom` directly, so this
   one rule composes the user offset with the admin-bar var (set by the JS when
   the WP admin bar is present + the option is on). No competing `top` rule, so
   the user offset AND the admin-bar offset always both apply — no specificity
   war, no never-set variable.

   Specificity note: these use the doubled `.tiger-sticky.tiger-sticky--top`
   form (0,2,0) on purpose. Tiger Parallax (`.tiger-parallax--bg`,
   `.tiger-parallax--has-deco`) and Elementor (`.e-con`) each set `position`
   with single-class specificity (0,1,0). When Parallax is enabled on the SAME
   element, its stylesheet loads after this one and would otherwise win the
   cascade, forcing `position: relative` and silently killing the sticky. The
   extra class guarantees sticky wins regardless of stylesheet load order.
   `position: sticky` still establishes a containing block, so an absolutely
   positioned Parallax decoration/background layer anchors correctly. */
.tiger-sticky.tiger-sticky--top    { position: sticky; top:    calc(var(--tiger-sticky-user-top, 0px) + var(--tiger-sticky-adminbar, 0px)); }
.tiger-sticky.tiger-sticky--bottom { position: sticky; bottom: calc(var(--tiger-sticky-user-bottom, 0px)); }

.tiger-sticky.tiger-sticky--stuck {
    transform: translateY(var(--tiger-sticky-hide-y)) scale(var(--tiger-sticky-scale));
}

/* Breakpoint gating — `revert` returns to author/UA defaults rather than
   forcing `static`, so any user-defined positioning still wins. */
@media (min-width: 1025px) {
    .tiger-sticky:not(.tiger-sticky--on-desktop) { position: revert; top: revert; bottom: revert; }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .tiger-sticky:not(.tiger-sticky--on-tablet)  { position: revert; top: revert; bottom: revert; }
}
@media (max-width: 767px) {
    .tiger-sticky:not(.tiger-sticky--on-mobile)  { position: revert; top: revert; bottom: revert; }
}

/* Enter animations. Animate opacity/translate during entry, then hand back to
   the composed stuck transform so a configured Scale survives. */
@keyframes tiger-sticky-fade        { from { opacity: 0; }                              to { opacity: 1; } }
@keyframes tiger-sticky-slide-down  { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; } }
@keyframes tiger-sticky-slide-up    { from { opacity: 0; transform: translateY(100%); }  to { opacity: 1; } }

.tiger-sticky--anim-fade.tiger-sticky--stuck       { animation: tiger-sticky-fade       var(--tiger-sticky-dur) ease; }
.tiger-sticky--anim-slide-down.tiger-sticky--stuck { animation: tiger-sticky-slide-down var(--tiger-sticky-dur) ease; }
.tiger-sticky--anim-slide-up.tiger-sticky--stuck   { animation: tiger-sticky-slide-up   var(--tiger-sticky-dur) ease; }

/* Hide-on-scroll-down: drive the shared var so it composes with scale. */
.tiger-sticky.tiger-sticky--hidden {
    --tiger-sticky-hide-y: -110%;
    opacity: 0;
    pointer-events: none;
}
.tiger-sticky--bottom.tiger-sticky--hidden {
    --tiger-sticky-hide-y: 110%;
}

@media (prefers-reduced-motion: reduce) {
    .tiger-sticky { transition: none !important; }
    .tiger-sticky--anim-fade.tiger-sticky--stuck,
    .tiger-sticky--anim-slide-down.tiger-sticky--stuck,
    .tiger-sticky--anim-slide-up.tiger-sticky--stuck { animation: none !important; }
}