/**
 * Effects Generators — demo mode
 *
 * The locked preview that stands in for the canvas: the tool's preview
 * image blurred, with a members-only card centred on it. Mirrors the Scene
 * Editor's locked mockups (.si2d-locked) rule for rule, so the two editors
 * read as one product. The card itself is styled by si-core's popup CSS
 * (.si-pro-modal__panel and friends); only its placement is set here.
 *
 * The tool's first canvas stays inside the stage, empty, so the tool's
 * own CSS sizes the stage exactly as it would size the live preview; the
 * blurred image and the card are laid over it.
 */

/* The frame: exactly the size of the tool's canvas, and nothing drawn
   inside it escapes. overflow + clip-path together, because some browsers
   let a blurred, transformed child bleed past overflow:hidden alone. */
.si-fx-locked {
    position: relative;
    display: block;
    max-width: 100%;
    line-height: 0;
    overflow: hidden;
    clip-path: inset(0);
    background: #0d0d10;
    isolation: isolate;
}

/* The size guide. Some tools hide their canvas until an image has loaded;
   with no engine that never happens, so it's always shown here. Nothing
   draws on it. */
.si-fx-locked > canvas {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* No size caps here on purpose. Tools that size their canvas in CSS
       already cap it; tools that size it in code (the 3D Logo Animator)
       sit in a shrink-to-fit box where a percentage cap collapses the
       canvas to nothing. The demo script fits those to their container
       instead, the way their engine would. */
}

.si-fx-locked .si-fx-locked__card {
    line-height: normal;
}

/* The blurred preview. Oversized by 48px on every side so the blur's
   soft edge falls outside the frame and gets clipped: the picture runs
   crisp to the frame's edge instead of fading out into the page. */
.si-fx-locked__media {
    position: absolute;
    top: -48px;
    left: -48px;
    width: calc(100% + 96px);
    height: calc(100% + 96px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
    filter: blur(14px);
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.si-fx-locked__media--empty {
    background: linear-gradient(160deg, #1a1a20, #0d0d10);
    filter: none;
}

.si-fx-locked .si-fx-locked__card {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(380px, 88%);
    margin: 0;
    max-height: none;
    box-sizing: border-box;
    z-index: 1;
    animation: none;
}

.si-fx-locked .si-pro-modal__cta {
    display: block;
    white-space: normal;
    text-align: center;
    box-sizing: border-box;
    max-width: 100%;
}

.si-fx-locked .si-pro-modal__alt {
    display: block;
    margin-top: 10px;
}

/* Phones: the card shrinks to title and buttons, pinned to the bottom of
   the preview — the same as the Scene Editor at this width. */
@media (max-width: 600px) {
    .si-fx-locked .si-fx-locked__card {
        top: auto;
        bottom: 12px;
        transform: translateX(-50%);
        width: calc(100% - 32px);
        padding: 12px 14px;
        text-align: center;
    }
    .si-fx-locked .si-pro-modal__eyebrow,
    .si-fx-locked .si-pro-modal__text {
        display: none;
    }
    .si-fx-locked .si-pro-modal__title {
        font-size: 15px;
        line-height: 1.3;
        margin: 0 0 10px;
    }
    .si-fx-locked .si-pro-modal__cta {
        padding: 10px 12px;
        font-size: 12px;
    }
    .si-fx-locked .si-pro-modal__alt {
        display: inline-block;
        margin: 8px 8px 0;
        font-size: 12px;
    }
}

/* The controls still read as something to try. */
[data-si-fx-mode="demo"] input,
[data-si-fx-mode="demo"] select,
[data-si-fx-mode="demo"] label,
[data-si-fx-mode="demo"] [role="slider"] {
    cursor: pointer;
}

/* The tools start with the preview area hidden (style="display:none") and an
   "Upload an image to begin" placeholder showing; the engine swaps the two
   once its sample image loads. With no engine the demo makes that swap
   itself: anything wrapping the locked preview is shown, and the empty-state
   placeholder hidden. :has() covers current browsers instantly; the demo
   script does the same for older ones. */
[data-si-fx-mode="demo"] :has(> .si-fx-locked),
[data-si-fx-mode="demo"] :has(.si-fx-locked)[style*="display:none"],
[data-si-fx-mode="demo"] :has(.si-fx-locked)[style*="display: none"] {
    display: block !important;
}

[data-si-fx-mode="demo"] #emptyState,
[data-si-fx-mode="demo"] .canvas-wrap > .empty {
    display: none !important;
}

/* The before/after divider, its labels and handles sit beside the canvas
   in the tool's markup and would draw over the card. Without the engine
   they do nothing, so in demo mode only the locked preview is shown. */
[data-si-fx-mode="demo"] :has(> .si-fx-locked) > :not(.si-fx-locked) {
    display: none !important;
}

/* Touching a control (or the locked Upload / Export) pulses the card
   once instead of opening a second popup over it. A glow on the card's
   edge only — no scaling or movement, so the card never shifts from where
   it sits, whatever the theme does with transforms. */
@keyframes si-fx-nudge {
    0%   { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 0 rgba(37, 56, 255, 0); }
    35%  { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(37, 56, 255, 0.95), 0 0 36px rgba(37, 56, 255, 0.45); }
    100% { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 0 rgba(37, 56, 255, 0); }
}

.si-fx-locked .si-fx-locked__card.si-fx-nudge {
    animation: si-fx-nudge 0.7s ease-out 1;
}