/* ============================================================
   WML Parallax Container
   ============================================================ */

.wml-parallax-container {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* ── Background layer ─────────────────────────────────────── */
.wml-pc-bg {
    position: absolute;
    inset: -30% -5%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    pointer-events: none;
    z-index: 0;
    transform-origin: center center;
}

/* ── Multi-layer wrapper ──────────────────────────────────── */
.wml-pc-layers {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.wml-pc-layer {
    position: absolute;
    inset: -30% -5%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    transform-origin: center center;
}

/* ── Overlay ──────────────────────────────────────────────── */
.wml-pc-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

/* ── Tilt glare ───────────────────────────────────────────── */
.wml-pc-glare {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: inherit;
}

.wml-pc-glare.is-active {
    opacity: 1;
}

/* ── Content slot ─────────────────────────────────────────── */
.wml-pc-content {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
}

/* ── Editor badge ─────────────────────────────────────────── */
.wml-pc-editor-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 9999;
    background: rgba(99, 60, 255, 0.85);
    color: #fff;
    font-size: 11px;
    font-family: monospace;
    padding: 3px 8px;
    border-radius: 4px;
    pointer-events: none;
    letter-spacing: 0.03em;
}

/* ── Tilt type ────────────────────────────────────────────── */
.wml-pc-type-tilt {
    transform-style: preserve-3d;
    transform: perspective(800px) rotateX(0deg) rotateY(0deg) scale(1);
}

/* ── GPU hints (set via JS, but default here) ─────────────── */
.wml-pc-will-change .wml-pc-bg,
.wml-pc-will-change .wml-pc-layer {
    will-change: transform;
}

.wml-pc-will-change.wml-pc-type-translate,
.wml-pc-will-change.wml-pc-type-scale {
    will-change: transform;
}

/* ── Mobile disabled ──────────────────────────────────────── */
.wml-pc-mobile-off .wml-pc-bg,
.wml-pc-mobile-off .wml-pc-layer {
    transform: none !important;
    transition: none !important;
    inset: 0 !important;
}

.wml-pc-mobile-off.wml-pc-type-tilt,
.wml-pc-mobile-off.wml-pc-type-translate,
.wml-pc-mobile-off.wml-pc-type-scale {
    transform: none !important;
    transition: none !important;
}