/* Images remain ordinary, readable content without playback or this plugin. */
.wp-block-siteframe-tools-slider { border-radius: var(--wp--custom--siteframe--radius--panel,20px); }
.wp-block-siteframe-tools-slider > .wp-block-image { margin: 0 0 16px; }
.wp-block-siteframe-tools-slider > .wp-block-image img { width: 100%; height: auto; border-radius: inherit; }
.wp-block-siteframe-tools-slider[data-ready] { position: relative; }
.wp-block-siteframe-tools-slider[data-ready] > .wp-block-image { margin: 0; aspect-ratio: 16 / 9; border-radius: inherit; overflow: hidden; }
.wp-block-siteframe-tools-slider[data-ready] > .wp-block-image[hidden] { display: none; }
.wp-block-siteframe-tools-slider[data-ready] > .wp-block-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.siteframe-tools-slider-controls { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; padding-block: 16px; }
.siteframe-tools-slider-controls button { min-width: 44px; min-height: 44px; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--wp--preset--color--surface,#eee); color: var(--wp--preset--color--contrast,#222); font: inherit; cursor: pointer; transition: background-color .2s,color .2s; }
.siteframe-tools-slider-controls button:hover { background: var(--wp--preset--color--contrast,#222); color: var(--wp--preset--color--base,#fff); }
.siteframe-tools-slider-controls button:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.siteframe-tools-slider-controls output { min-width: 4em; text-align: center; }
.editor-styles-wrapper .wp-block-siteframe-tools-slider { padding: 20px; background: var(--wp--preset--color--surface,#eee); }
@media (max-width:600px) { .wp-block-siteframe-tools-slider[data-ready] > .wp-block-image { aspect-ratio: 4 / 3; } }
@media (prefers-reduced-motion: reduce) { .siteframe-tools-slider-controls button { transition: none; } }

.wp-block-siteframe-tools-slider[data-ready] > .wp-block-image:not([hidden]) img { animation: siteframe-tools-slide-in .35s ease-out; }
@keyframes siteframe-tools-slide-in { from { opacity: .45; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wp-block-siteframe-tools-slider[data-ready] > .wp-block-image:not([hidden]) img { animation: none; } }