/**
 * Tiger Parallax — frontend.
 *
 * The JS driver writes CSS variables on each parallax element every frame:
 *   --tp-tx / --tp-ty  (translate, px)
 *   --tp-sx / --tp-sy  (scale)
 *   --tp-rot           (rotate, deg)
 *   --tp-blur          (blur, px)
 *   --tp-opacity       (0–1)
 *
 * Background and decoration are separate layers (::before and a real
 * child node respectively) so element transforms don't drag them around.
 */

.tiger-parallax {
    --tp-tx: 0px;
    --tp-ty: 0px;
    --tp-sx: 1;
    --tp-sy: 1;
    --tp-rot: 0deg;
    --tp-blur: 0px;
    --tp-opacity: 1;

    /* Individual transform properties compose with Elementor's own `transform`. */
    translate: var(--tp-tx) var(--tp-ty);
    scale: var(--tp-sx) var(--tp-sy);
    rotate: var(--tp-rot);
    filter: blur(var(--tp-blur));
    opacity: var(--tp-opacity);

    will-change: transform, translate, scale, rotate, filter, opacity;
    backface-visibility: hidden;
}

/* Engines without individual transform-property support get the composed form. */
@supports not (translate: 0px) {
    .tiger-parallax {
        transform: translate3d(var(--tp-tx), var(--tp-ty), 0) scale(var(--tp-sx), var(--tp-sy)) rotate(var(--tp-rot));
    }
}

.tiger-parallax.tiger-parallax--reduced {
    --tp-tx: 0px; --tp-ty: 0px;
    --tp-sx: 1; --tp-sy: 1;
    --tp-rot: 0deg;
    --tp-blur: 0px;
    --tp-opacity: 1;
    translate: 0 0;
    scale: 1 1;
    rotate: 0deg;
    will-change: auto;
}

.tiger-parallax.tiger-parallax--idle { will-change: auto; }

/* ---------- Background scroll layer ---------- */
.tiger-parallax--bg {
    position: relative;
    overflow: hidden;
    --tp-bg-extra: 60px;
    --tp-bg-size: cover;
    --tp-bg-position: center center;
    --tp-bg-pos-x: 50%;
    --tp-bg-pos-y: 50%;
    --tp-bg-overlay: transparent;
    --tp-bg-y: 0px;
}
.tiger-parallax--bg::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--tp-bg-extra) * -1);
    bottom: calc(var(--tp-bg-extra) * -1);
    background-image: var(--tp-bg-image, none);
    background-size: var(--tp-bg-size);
    background-position: var(--tp-bg-position);
    background-repeat: no-repeat;
    transform: translate3d(0, var(--tp-bg-y), 0);
    will-change: transform;
    z-index: 0;
    pointer-events: none;
}
.tiger-parallax--bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--tp-bg-overlay);
    z-index: 0;
    pointer-events: none;
}
.tiger-parallax--bg > *:not(.tiger-parallax-deco) {
    position: relative;
    z-index: 1;
}
.tiger-parallax--bg.tiger-parallax--idle::before { will-change: auto; }
@media (prefers-reduced-motion: reduce) {
    .tiger-parallax--bg.tiger-parallax--reduced::before { transform: none; }
}

/* ---------- Decoration layer (image / icon / text) ----------
 * Inserted by JS as a child node `.tiger-parallax-deco`. Absolutely positioned
 * inside the element so the user's content layout is untouched. Stacking is
 * controlled by the parent class (front vs back).
 */
.tiger-parallax--has-deco {
    position: relative;
}
.tiger-parallax--has-deco.tiger-parallax--deco-front,
.tiger-parallax--has-deco.tiger-parallax--deco-back {
    overflow: visible; /* decoration can intentionally peek outside */
}
.tiger-parallax-deco {
    position: absolute;
    top: 50%;
    left: 50%;
    --tp-deco-tx: 0px;
    --tp-deco-ty: 0px;
    --tp-deco-rot-base: 0deg;
    --tp-deco-rot: 0deg;
    translate: var(--tp-deco-tx) var(--tp-deco-ty);
    rotate: calc(var(--tp-deco-rot-base) + var(--tp-deco-rot));
    will-change: translate, rotate;
    pointer-events: none;
    z-index: 3; /* in front of content (which is z-index 1-2) */
    line-height: 1;
    display: inline-block;
}
.tiger-parallax--deco-back .tiger-parallax-deco {
    z-index: 0;
}
@supports not (translate: 0px) {
    .tiger-parallax-deco {
        transform: translate3d(var(--tp-deco-tx), var(--tp-deco-ty), 0)
                   rotate(calc(var(--tp-deco-rot-base) + var(--tp-deco-rot)));
    }
}

.tiger-parallax-deco--image,
.tiger-parallax-deco--icon,
.tiger-parallax-deco--text {
    display: block;
}
.tiger-parallax-deco--image {
    width: 160px;
    height: auto;
    max-width: none;
}
.tiger-parallax-deco--icon {
    font-size: 64px;
    line-height: 1;
}
.tiger-parallax-deco--icon svg {
    width: 1em;
    height: 1em;
    display: block;
}
.tiger-parallax-deco--text {
    white-space: nowrap;
    user-select: none;
    /* Sensible visible default so the layer is obvious before the user
       configures Typography. The Typography group control overrides this. */
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
}

/* Shaped (curved) text rendered as an SVG <text> on a <path>. We force the
   <text> inside to inherit the Typography group control set on the wrapper
   so font / weight / size / spacing all keep working. */
.tiger-parallax-deco--text-shape {
    display: block;
    white-space: normal;
    overflow: visible;
}
.tiger-parallax-deco--text-shape text {
    font-family: inherit;
    font-size:   inherit;
    font-weight: inherit;
    font-style:  inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    fill: currentColor;
}
/* Don't let the parent `--text` rules (nowrap, line-height: 1) shrink the
   SVG box — the SVG controls its own size via viewBox + inline width/height. */
.tiger-parallax-deco--text-shape {
    white-space: normal;
    line-height: normal;
}

/* Reduce-motion: pin decoration in place but keep it visible. */
.tiger-parallax.tiger-parallax--reduced .tiger-parallax-deco {
    translate: 0 0;
    rotate: var(--tp-deco-rot-base);
}