@keyframes tspoonRiseIn {
    from {
        opacity: 0;
        transform: translateY(26px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@keyframes tspoonFloaty {
    0% {
        transform: translateY(0) rotate(var(--r));
    }
    50% {
        transform: translateY(-7px) rotate(var(--r));
    }
    100% {
        transform: translateY(0) rotate(var(--r));
    }
}

/* Native Group provides the positioning context for native Image blocks. */
.wp-block-group.tspoonlab-floating-media {
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 64px 4% 24px;
    overflow: visible;
}

.tspoonlab-floating-media
    > .wp-block-image:not(:is(.is-style-tspoon-floating, .is-style-tspoon-floating-right)) {
    position: relative;
    z-index: 0;
    width: 100%;
    margin: 0;
}

.wp-block-image:is(.is-style-tspoon-floating, .is-style-tspoon-floating-right) {
    --r: -2deg;
    position: relative;
    z-index: 2;
    width: 60%;
    max-width: 100%;
    margin: 0;
    background: transparent;
    animation:
        tspoonRiseIn 0.6s ease-out both,
        tspoonFloaty 3.4s ease-in-out 0.6s infinite;
}

.tspoonlab-floating-media
    > .wp-block-image:is(.is-style-tspoon-floating, .is-style-tspoon-floating-right) {
    position: absolute;
    top: 8px;
    left: 0;
    margin: 0;
}

.wp-block-image.is-style-tspoon-floating-right {
    --r: 2deg;
    animation:
        tspoonRiseIn 0.6s ease-out 0.15s both,
        tspoonFloaty 3.8s ease-in-out 0.75s infinite;
}

.tspoonlab-floating-media > .wp-block-image.is-style-tspoon-floating-right {
    top: 36px;
    right: 0;
    left: auto;
    width: 54%;
}

.wp-block-image:is(.is-style-tspoon-floating, .is-style-tspoon-floating-right) img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 16px 16px rgba(20, 20, 18, 0.18));
}

.wp-block-image:is(.is-style-tspoon-floating, .is-style-tspoon-floating-right) figcaption {
    display: none;
}

.wp-block-image:is(.is-style-tspoon-floating, .is-style-tspoon-floating-right):is(
        :hover,
        :focus-within
    ) {
    animation-play-state: paused;
}

/* Keep image tools and selection outlines stable while editing. */
.editor-styles-wrapper
    .wp-block-image:is(.is-style-tspoon-floating, .is-style-tspoon-floating-right) {
    animation: none;
    transform: rotate(var(--r));
}

@media (max-width: 600px) {
    .wp-block-group.tspoonlab-floating-media {
        padding-top: 44px;
        padding-bottom: 16px;
    }
    .tspoonlab-floating-media > .wp-block-image.is-style-tspoon-floating {
        width: 58%;
    }
    .tspoonlab-floating-media > .wp-block-image.is-style-tspoon-floating-right {
        top: 26px;
        width: 52%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-image:is(.is-style-tspoon-floating, .is-style-tspoon-floating-right) {
        animation: none;
        transform: rotate(var(--r));
    }
}