/* Effects shared by the Playground editor and the published site (SiteView). */

/* ── Block entrance effects ── */

/* Fade: the whole block fades in */
.site-block.fx-fade {
    opacity: 0;
    transition: opacity 2.8s ease, border-color .15s;
}

    .site-block.fx-fade.fx-in {
        opacity: 1;
    }

/* Slide and pop: the block background stays put and only its content moves,
   so no gap opens up behind a coloured block */
.site-block.fx-slide {
    overflow: hidden;
}

.site-block.fx-slide > :not(.block-controls),
.site-block.fx-pop > :not(.block-controls) {
    opacity: 0;
    transition: opacity 2.8s ease, transform 2.8s cubic-bezier(.2, .7, .3, 1);
}

.site-block.fx-slide > :not(.block-controls) {
    transform: translateY(36px);
}

.site-block.fx-pop > :not(.block-controls) {
    transform: scale(.9);
}

.site-block.fx-slide.fx-in > :not(.block-controls),
.site-block.fx-pop.fx-in > :not(.block-controls) {
    opacity: 1;
    transform: none;
}

/* Used to jump back to the hidden state without animating */
.site-block.fx-instant,
.site-block.fx-instant > * {
    transition: none !important;
}

/* ── Sticker movement (applied to the inner element so it doesn't clash with the sticker's rotation) ── */
.sfx-float {
    animation: sfx-float 4s ease-in-out infinite;
}

.sfx-wiggle {
    animation: sfx-wiggle 2.4s ease-in-out infinite;
}

.sfx-pulse {
    animation: sfx-pulse 2.8s ease-in-out infinite;
}

.sfx-spin {
    animation: sfx-spin 14s linear infinite;
}

@keyframes sfx-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes sfx-wiggle {
    0%, 100% { transform: rotate(-8deg); }
    50% { transform: rotate(8deg); }
}

@keyframes sfx-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

@keyframes sfx-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── Page effects (snow, hearts, confetti) ── */
.gas-fx-canvas {
    position: fixed;
    pointer-events: none;
    z-index: 999;
}

/* Above the editor's full screen preview */
body.preview-full .gas-fx-canvas {
    z-index: 2100;
}

/* Visitors who turned off animations in their device settings get a still page */
@media (prefers-reduced-motion: reduce) {
    .site-block.fx-fade,
    .site-block.fx-slide > :not(.block-controls),
    .site-block.fx-pop > :not(.block-controls) {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .sfx-float,
    .sfx-wiggle,
    .sfx-pulse,
    .sfx-spin {
        animation: none;
    }
}