/**
 * Page Designer — Tilt Block CSS  (pd-blk-tilt-*)
 *
 * Loaded INSIDE the GrapesJS canvas iframe AND on published pages. Provides
 * the visual layers that compose with the runtime's spring-physics tilt:
 *   - .pd-blk-tilt-glare       — pointer-tracked radial glare
 *   - .pd-blk-tilt-sheen       — conic-gradient sheen, rotates with tilt
 *   - .pd-blk-tilt-chroma      — iridescent RGB-split edge outline
 *
 * Runtime sets CSS custom properties on the root for live values:
 *   --pd-tilt-rx / --pd-tilt-ry          → tilt rotation around X/Y axes
 *   --pd-tilt-px / --pd-tilt-py          → glare position 0..1
 *   --pd-tilt-scale                       → live scale (1 → max)
 *   --pd-tilt-shadow-x / --pd-tilt-shadow-y → faux-float shadow offset
 *
 * Theme tokens are NOT used here — the visual is the FX itself, not chrome.
 *
 * NOTE: rules are gated to `[data-pd-tilt-on="1"]` so off-state is zero-cost.
 */

[data-pd-tilt-on="1"] {
    /* Establish 3D context so transforms compose. */
    transform-style: preserve-3d;
    perspective: var(--pd-tilt-persp, 900px);
    transform: rotateX(var(--pd-tilt-rx, 0deg)) rotateY(var(--pd-tilt-ry, 0deg)) scale(var(--pd-tilt-scale, 1));
    transition: box-shadow 0.18s ease;
    will-change: transform;
}

[data-pd-tilt-on="1"][data-pd-tilt-shadow="1"] {
    box-shadow:
        calc(var(--pd-tilt-shadow-x, 0px) * -1 + var(--pd-tilt-shadow-static-x, 0px))
        calc(var(--pd-tilt-shadow-y, 0px) * -1 + var(--pd-tilt-shadow-static-y, 24px))
        var(--pd-tilt-shadow-blur, 38px) var(--pd-tilt-shadow-spread, -10px)
        color-mix(in srgb, var(--pd-tilt-shadow-color, #000000) 35%, transparent);
}

/* Child depth — runtime reads data-pd-tilt-d and writes pre-computed transforms
   onto each child via inline style (handles arbitrarily-nested children).
   No CSS rule here — the runtime owns child transforms to compose with any
   pre-existing transform the user set on the child. */

/* Glare — radial highlight that tracks the pointer. */
[data-pd-tilt-on="1"][data-pd-tilt-glare="1"]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(
            circle at calc(var(--pd-tilt-px, 0.5) * 100%) calc(var(--pd-tilt-py, 0.5) * 100%),
            rgba(255, 255, 255, calc(var(--pd-tilt-glare-int, 0.38))) 0%,
            transparent 45%
        );
    mix-blend-mode: overlay;
    z-index: 1;
    opacity: var(--pd-tilt-hover-amt, 0);
    transition: opacity 0.22s ease;
}

/* Conic sheen — soft sweeping highlight that rotates with tilt angle. */
[data-pd-tilt-on="1"][data-pd-tilt-sheen="1"]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        conic-gradient(
            from calc(var(--pd-tilt-sheen-angle, 0deg)),
            transparent 0deg,
            rgba(255, 255, 255, 0.07) 60deg,
            rgba(255, 255, 255, 0.18) 90deg,
            rgba(255, 255, 255, 0.07) 120deg,
            transparent 180deg,
            transparent 360deg
        );
    mix-blend-mode: soft-light;
    z-index: 2;
    opacity: var(--pd-tilt-hover-amt, 0);
    transition: opacity 0.28s ease;
}

/* Iridescent chromatic edge — RGB-split outline visible only when tilted.
   Uses three stacked outline-style box-shadows offset slightly in each axis,
   each tinted toward a different primary, then a black outline to ground it. */
[data-pd-tilt-on="1"][data-pd-tilt-chroma="1"] {
    box-shadow:
        calc(var(--pd-tilt-ry, 0deg) / 1deg * var(--pd-tilt-chroma-split, 0.4px)) 0 0 var(--pd-tilt-chroma-thick, 0px) hsl(calc(341deg + var(--pd-tilt-chroma-hue, 0deg)) 100% 50% / var(--pd-tilt-chroma-a, 0.35)),
        calc(0px - var(--pd-tilt-ry, 0deg) / 1deg * var(--pd-tilt-chroma-split, 0.4px)) 0 0 var(--pd-tilt-chroma-thick, 0px) hsl(calc(188deg + var(--pd-tilt-chroma-hue, 0deg)) 100% 50% / var(--pd-tilt-chroma-a, 0.35)),
        0 calc(var(--pd-tilt-rx, 0deg) / 1deg * var(--pd-tilt-chroma-split, 0.4px)) 0 var(--pd-tilt-chroma-thick, 0px) hsl(calc(161deg + var(--pd-tilt-chroma-hue, 0deg)) 100% 66% / var(--pd-tilt-chroma-a, 0.28)),
        calc(var(--pd-tilt-shadow-x, 0px) * -1 + var(--pd-tilt-shadow-static-x, 0px))
        calc(var(--pd-tilt-shadow-y, 0px) * -1 + var(--pd-tilt-shadow-static-y, 24px))
        var(--pd-tilt-shadow-blur, 38px) var(--pd-tilt-shadow-spread, -10px)
        color-mix(in srgb, var(--pd-tilt-shadow-color, #000000) 35%, transparent);
}

/* Click haptic — runtime sets [data-pd-tilt-pressed="1"] briefly. */
[data-pd-tilt-on="1"][data-pd-tilt-pressed="1"] {
    transition: transform 0.06s linear, box-shadow 0.18s ease;
}

/* Blend nested blocks — when data-pd-tilt-blend-mode is anything except
   "off" (or absent), nested children blend with the tilt-styled element
   underneath them via the chosen CSS mix-blend-mode. Runtime sets
   --pd-tilt-blend-content-mode on the root. */
[data-pd-tilt-on="1"][data-pd-tilt-blend-mode]:not([data-pd-tilt-blend-mode=""]):not([data-pd-tilt-blend-mode="off"]) > * {
    mix-blend-mode: var(--pd-tilt-blend-content-mode, normal);
}