/**
 * Cloth Simulation Block — pd-blk-cl-* layout.
 * v2.0.0 — image-as-cloth. The WebGL canvas IS the image draped as fabric;
 * the stage just gives it a dark frame + rounded corners. No 2D overlay.
 */
.pd-blk-cl { position: relative; width: 100%; }
.pd-blk-cl-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: inherit;
    background: #15100a;
    isolation: isolate;
    cursor: grab;
}
.pd-blk-cl-stage:active { cursor: grabbing; }
.pd-blk-cl-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
    touch-action: none; /* keep pointermove rolling on touch */
}
.pd-blk-cl-hint {
    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
    padding: 4px 10px;
    z-index: 3;
    font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', 'IBM Plex Mono', Menlo, Consolas, monospace;
    font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(220, 226, 245, 0.74);
    background: rgba(10, 10, 20, 0.62);
    backdrop-filter: blur(6px) saturate(140%);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    border: 1px solid rgba(140, 170, 220, 0.18);
    border-radius: 3px;
    opacity: 0; transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.pd-blk-cl-stage:hover .pd-blk-cl-hint { opacity: 1; }
[data-gjs-type="pd-cloth"] { min-height: 180px; }
@media (prefers-reduced-motion: reduce) { .pd-blk-cl-hint { transition: none; } }
@media (hover: none)                    { .pd-blk-cl-hint { opacity: 0.85; } }