/* 0.9.50.140 — public media loading uses the exact Product Console / Foundation skeleton visual recipe.
   The shimmer exists only while real media is waiting. Server-rendered text remains immediately visible. */

/* Exact Console Alpha 81 skeleton recipe, namespaced for public media surfaces. */
.ori-media-skeleton__layer,
.ori-video-player .ori-start-video__media.is-loading-media::before,
.ori-project-browser[data-ori-live-preview]:not(.is-loaded):not(.has-preview-fallback) .ori-project-browser__viewport::before{
 position:absolute;
 display:block;
 overflow:hidden;
 border-radius:8px;
 background:color-mix(in srgb,#F5F5F6,transparent 91%);
}
.ori-media-skeleton__layer::after,
.ori-video-player .ori-start-video__media.is-loading-media::after,
.ori-project-browser[data-ori-live-preview]:not(.is-loaded):not(.has-preview-fallback) .ori-project-browser__viewport::after{
 content:"";
 position:absolute;
 inset:0;
 transform:translateX(-110%);
 background:linear-gradient(90deg,transparent,color-mix(in srgb,#F5F5F6,transparent 86%),transparent);
 animation:opf-skeleton-shimmer 1.35s ease-in-out infinite;
}
@keyframes opf-skeleton-shimmer{to{transform:translateX(110%)}}

/* Media wrappers reserve their final geometry. The skeleton overlays only the media pixels,
   then disappears as soon as the real asset is decoded/loaded. */
.ori-has-media-skeleton{position:relative!important;overflow:hidden}
.ori-media-skeleton__layer{z-index:2;inset:0;border-radius:inherit;pointer-events:none;opacity:1;transition:opacity .14s ease}
.ori-has-media-skeleton.is-media-ready>.ori-media-skeleton__layer{opacity:0;visibility:hidden}

/* Keep actual media above the surface background but below public controls/labels. */
.ori-has-media-skeleton>img,
.ori-has-media-skeleton>picture,
.ori-has-media-skeleton>picture>img{position:relative;z-index:1}
.ori-start-video__poster.ori-has-media-skeleton>.ori-media-skeleton__layer{z-index:1}
.ori-start-video__poster.ori-has-media-skeleton>.ori-start-video__play,
.ori-start-video__poster.ori-has-media-skeleton>.ori-start-video__caption{z-index:3}
.ori-start-video__poster.ori-has-media-skeleton>.ori-video__topline{z-index:10}

/* Shared public video media host. */
.ori-video-player .ori-start-video__media{position:relative;overflow:hidden}
.ori-video-player .ori-start-video__media.is-loading-media::before{content:"";z-index:0;inset:0;border-radius:0}
.ori-video-player .ori-start-video__media.is-loading-media::after{z-index:0;pointer-events:none}
.ori-video-player .ori-start-video__media.is-media-ready::before,
.ori-video-player .ori-start-video__media.is-media-ready::after{display:none!important}
.ori-video-player .ori-start-video__media>video,
.ori-video-player .ori-start-video__media>iframe{position:relative;z-index:1}

/* Deferred live-preview iframe: same exact shimmer until the preview itself confirms load. */
.ori-project-browser[data-ori-live-preview] .ori-project-browser__viewport{position:relative;overflow:hidden}
.ori-project-browser[data-ori-live-preview]:not(.is-loaded):not(.has-preview-fallback) .ori-project-browser__viewport::before{content:"";z-index:1;inset:0;border-radius:0;pointer-events:none}
.ori-project-browser[data-ori-live-preview]:not(.is-loaded):not(.has-preview-fallback) .ori-project-browser__viewport::after{z-index:2;pointer-events:none}
.ori-project-browser[data-ori-live-preview].is-loaded .ori-project-browser__viewport::before,
.ori-project-browser[data-ori-live-preview].is-loaded .ori-project-browser__viewport::after,
.ori-project-browser[data-ori-live-preview].has-preview-fallback .ori-project-browser__viewport::before,
.ori-project-browser[data-ori-live-preview].has-preview-fallback .ori-project-browser__viewport::after{display:none!important}

/* Dedicated media canvases keep the normal theme surface behind the temporary skeleton. */
.ori-project-browser__viewport,
.ori-start-showcase__media,
.ori-work-card--image-only>a,
.ori-blog-stage__image,
.ori-blog-related-card__media{background:var(--ori-surface-1)}

@media(prefers-reduced-motion:reduce){
 .ori-media-skeleton__layer::after,
 .ori-video-player .ori-start-video__media.is-loading-media::after,
 .ori-project-browser[data-ori-live-preview] .ori-project-browser__viewport::after{animation:none;display:none}
 .ori-media-skeleton__layer{transition:none}
}