/* ============================================================
   SEEMOTIONS — ORGANIC ORANGE PULSE V1.58
   SM_ORGANIC_LOADING_CONTRACT_LOCK_V158

   PRODUCT LOCK — READ BEFORE EDITING
   ----------------------------------
   This is the ONE canonical loading-motion owner for Seemotions outside
   Studio. Organic Orange Pulse V1.58 was explicitly selected in product
   review. Do not introduce a second shimmer, sweep, skeleton animation,
   pulse keyframe, or component-local loading motion.

   Future AI / engineer:
   1. Keep the exact motion DNA below: pulseBase + randomDrift.
   2. To support a new async UI, map its REAL busy/loading/processing state
      into an existing semantic loading selector or data-sm-loading='true'.
   3. disabled, orange/accent, error, unavailable and empty states are NOT
      evidence of loading.
   4. Do not create a replacement loading CSS file. Extend this owner.
   5. Studio is intentionally excluded from this global visual contract.
   6. CTA orange material is a separate contract; do not couple it to loading.
   7. Any intentional motion redesign must update this file, the lock verifier,
      and docs/ui/organic-loading-contract-v158.md in the same change.

   Performance contract:
   - transform + opacity only for moving layers
   - no animated blur/filter/backdrop-filter
   - contain:paint on animated loading surfaces
   - reduced-motion must remain supported
   - animation is active only during real async work

   Motion DNA selected by product review:
   - pulseBase: slow surface breathing
   - randomDrift: large radial orange glow drifting inside the surface
   ============================================================ */

:root{
  --sm-loading-surface:#1a1a1a;
  --sm-loading-orange:#7A6BE5;
  --sm-loading-orange-border:rgba(122,107,229,.05);
  --sm-loading-orange-glow:rgba(122,107,229,.18);
  --sm-loading-orange-sweep:rgba(122,107,229,.08);
  --sm-loading-line:rgba(122,107,229,.12);
  --sm-loading-status-bg:rgba(18,19,22,.94);
  --sm-loading-status-text:rgba(255,255,255,.78)
}

html[data-theme='day']{
  --sm-loading-surface:#ece9e7;
  --sm-loading-orange-border:rgba(122,107,229,.07);
  --sm-loading-orange-glow:rgba(122,107,229,.13);
  --sm-loading-orange-sweep:rgba(122,107,229,.055);
  --sm-loading-line:rgba(122,107,229,.10);
  --sm-loading-status-bg:rgba(248,249,250,.96);
  --sm-loading-status-text:rgba(20,20,24,.72)
}

@keyframes pulseBase{0%{opacity:.5}100%{opacity:1}}
@keyframes randomDrift{
  0%{transform:translate3d(0,0,0) scale(.8);opacity:.3}
  50%{transform:translate3d(5%,5%,0) scale(1.1);opacity:1}
  100%{transform:translate3d(-5%,-5%,0) scale(.9);opacity:.6}
}

.anim-organic-pulse{
  animation:pulseBase 2s infinite alternate ease-in-out!important;
  will-change:opacity
}

/* Canonical real-loading surfaces. */
html:not([data-workspace-mode='studio']) :is(
  .sm-fluid-shimmer[data-sm-loading='true'],
  .sm-media-loading:not(.sm-media-refreshing):not([data-sm-media-snapshot='true']),
  .sm-video-frame-loading:not(.sm-media-refreshing),
  .sm-project-library-loading,
  .sm-viewer-loading,
  .sm-billing-loading,
  .sm-profile-loading,
  .sm-v5-asset.is-uploading,
  .sm-loading-surface[data-sm-loading='true'],
  .sm-loading-control[data-sm-loading='true'],
  .sm-loading-inline[data-sm-loading='true'],
  .ops-loading>div,
  .finance-loading>div,
  .media-loading,
  .ops-inline-loading,
  .ops-icon-btn:has(.spin),
  #previewOverlay .preview-empty[data-state='loading'],
  #genGrid .gtile:is(.queued,.pending,.processing,.generating,.starting,.finalizing,.is-processing) .gtile-thumb,
  #genGrid .gtile:is([data-status='queued'],[data-status='pending'],[data-status='processing'],[data-status='generating'],[data-status='starting'],[data-status='finalizing']) .gtile-thumb,
  #smV5Mount #smV5AssetTags .sm-v5-asset.sm-v161-media-pending
){
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  contain:paint;
  background:
    linear-gradient(135deg,transparent 20%,var(--sm-loading-orange-sweep) 50%,transparent 80%),
    var(--sm-loading-surface)!important;
  border-color:var(--sm-loading-orange-border)!important;
  box-shadow:inset 0 0 0 1px var(--sm-loading-orange-border)!important;
  filter:none!important;
  animation:pulseBase 2s infinite alternate ease-in-out!important;
  opacity:1!important;
  will-change:opacity
}

html:not([data-workspace-mode='studio']) :is(
  .sm-fluid-shimmer[data-sm-loading='true'],
  .sm-media-loading:not(.sm-media-refreshing):not([data-sm-media-snapshot='true']),
  .sm-video-frame-loading:not(.sm-media-refreshing),
  .sm-project-library-loading,
  .sm-viewer-loading,
  .sm-billing-loading,
  .sm-profile-loading,
  .sm-v5-asset.is-uploading,
  .sm-loading-surface[data-sm-loading='true'],
  .sm-loading-control[data-sm-loading='true'],
  .sm-loading-inline[data-sm-loading='true'],
  .ops-loading>div,
  .finance-loading>div,
  .media-loading,
  .ops-inline-loading,
  .ops-icon-btn:has(.spin),
  #previewOverlay .preview-empty[data-state='loading'],
  #genGrid .gtile:is(.queued,.pending,.processing,.generating,.starting,.finalizing,.is-processing) .gtile-thumb,
  #genGrid .gtile:is([data-status='queued'],[data-status='pending'],[data-status='processing'],[data-status='generating'],[data-status='starting'],[data-status='finalizing']) .gtile-thumb,
  #smV5Mount #smV5AssetTags .sm-v5-asset.sm-v161-media-pending
)::before{
  content:''!important;
  position:absolute!important;
  top:-50%!important;
  left:-50%!important;
  width:200%!important;
  height:200%!important;
  z-index:2!important;
  margin:0!important;
  border:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  background:radial-gradient(circle at center,var(--sm-loading-orange-glow) 0%,transparent 50%)!important;
  box-shadow:none!important;
  filter:none!important;
  transform:translate3d(0,0,0) scale(.8);
  animation:randomDrift 3.7s infinite alternate ease-in-out!important;
  will-change:transform,opacity
}

html:not([data-workspace-mode='studio']) :is(
  .sm-fluid-shimmer[data-sm-loading='true'],
  .sm-media-loading,
  .sm-video-frame-loading,
  .sm-project-library-loading,
  .sm-viewer-loading,
  .sm-billing-loading,
  .sm-profile-loading,
  .sm-v5-asset.is-uploading,
  .sm-loading-surface[data-sm-loading='true'],
  .sm-loading-control[data-sm-loading='true'],
  .sm-loading-inline[data-sm-loading='true'],
  .ops-loading>div,
  .finance-loading>div,
  .media-loading,
  .ops-inline-loading,
  #previewOverlay .preview-empty[data-state='loading'],
  #genGrid .gtile:is(.queued,.pending,.processing,.generating,.starting,.finalizing,.is-processing) .gtile-thumb,
  #smV5Mount #smV5AssetTags .sm-v5-asset.sm-v161-media-pending
)::after{
  content:none!important;
  display:none!important;
  animation:none!important;
  filter:none!important;
  box-shadow:none!important;
  background:none!important;
  transform:none!important
}

/* Labels/icons stay readable above the ambient glow. */
html:not([data-workspace-mode='studio']) .sm-loading-control[data-sm-loading='true']>*{
  position:relative;
  z-index:3
}

/* Small placeholders use the same breathing rhythm; no second motion language. */
html:not([data-workspace-mode='studio']) :is(
  .queue-line,
  .sm-loading-line,
  .sm-profile-credit-card.is-loading>span
){
  background:var(--sm-loading-line)!important;
  background-image:none!important;
  box-shadow:none!important;
  animation:pulseBase 1.9s infinite alternate ease-in-out!important;
  will-change:opacity
}
html:not([data-workspace-mode='studio']) :is(.queue-line,.sm-loading-line,.sm-profile-credit-card.is-loading>span):nth-child(even){
  animation-duration:2.2s!important
}

/* Small circular profile placeholder: pulse only; no oversized pseudo glow. */
html:not([data-workspace-mode='studio']) .sm-profile-avatar.is-loading{
  background:var(--sm-loading-surface)!important;
  background-image:none!important;
  box-shadow:inset 0 0 0 1px var(--sm-loading-orange-border)!important;
  animation:pulseBase 2s infinite alternate ease-in-out!important;
  opacity:1!important;
  will-change:opacity
}

/* Keep already-decoded media visible while refreshing. */
html:not([data-workspace-mode='studio']) :is(
  #genGrid .gtile-thumb,
  .sm-project-library-card-media,
  .sm-element-manager-card-media,
  .sm-ref-v1-card-media
).sm-media-refreshing>:is(img,video),
html:not([data-workspace-mode='studio']) :is(
  #genGrid .gtile-thumb,
  .sm-project-library-card-media,
  .sm-element-manager-card-media,
  .sm-ref-v1-card-media
)[data-sm-media-snapshot='true'].sm-media-loading>:is(img,video){
  opacity:1!important;
  visibility:visible!important
}

html:not([data-workspace-mode='studio']) :is(
  .sm-media-refreshing,
  [data-sm-media-snapshot='true'].sm-media-loading,
  .sm-media-ready,
  .sm-fluid-shimmer[data-sm-loading='false']
){
  animation:none!important;
  opacity:1!important;
  will-change:auto!important
}

html:not([data-workspace-mode='studio']) :is(
  .sm-media-refreshing,
  [data-sm-media-snapshot='true'].sm-media-loading,
  .sm-media-ready,
  .sm-fluid-shimmer[data-sm-loading='false']
)::before,
html:not([data-workspace-mode='studio']) :is(
  .sm-media-refreshing,
  [data-sm-media-snapshot='true'].sm-media-loading,
  .sm-media-ready,
  .sm-fluid-shimmer[data-sm-loading='false']
)::after{
  content:none!important;
  display:none!important;
  animation:none!important
}

/* Error/unavailable is static, never fake loading. */
html:not([data-workspace-mode='studio']) #previewOverlay .preview-empty[data-state='unavailable'],
html:not([data-workspace-mode='studio']) #smV5Mount #smV5AssetTags .sm-v5-asset.sm-media-unavailable{
  background:var(--sm-loading-surface)!important;
  animation:none!important;
  opacity:1!important;
  will-change:auto!important
}
html:not([data-workspace-mode='studio']) #previewOverlay .preview-empty[data-state='unavailable']::before,
html:not([data-workspace-mode='studio']) #previewOverlay .preview-empty[data-state='unavailable']::after,
html:not([data-workspace-mode='studio']) #smV5Mount #smV5AssetTags .sm-v5-asset.sm-media-unavailable::before,
html:not([data-workspace-mode='studio']) #smV5Mount #smV5AssetTags .sm-v5-asset.sm-media-unavailable::after{
  content:none!important;
  display:none!important;
  animation:none!important
}

/* Output loading stays visual-only; local spinners/progress bars are retired. */
html:not([data-workspace-mode='studio']) #genGrid .gtile:is(.generating,.processing,.pending,.queued,.starting,.finalizing,.is-processing) .gtile-status,
html:not([data-workspace-mode='studio']) #genGrid .gtile:is([data-status='processing'],[data-status='queued'],[data-status='pending'],[data-status='generating'],[data-status='starting'],[data-status='finalizing']) .gtile-status{
  border:1px solid var(--sm-loading-orange-border)!important;
  background:var(--sm-loading-status-bg)!important;
  color:var(--sm-loading-status-text)!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  animation:none!important;
  opacity:1!important
}

html:not([data-workspace-mode='studio']) #genGrid .gtile:is(.generating,.processing,.pending,.queued,.starting,.finalizing,.is-processing) :is(.gtile-glyph,.gtile-progress,.gtile-progress-bar,progress,[class*='spinner'],[class*='loader']),
html:not([data-workspace-mode='studio']) #genGrid .gtile:is([data-status='processing'],[data-status='queued'],[data-status='pending'],[data-status='generating'],[data-status='starting'],[data-status='finalizing']) :is(.gtile-glyph,.gtile-progress,.gtile-progress-bar,progress,[class*='spinner'],[class*='loader']){
  display:none!important;
  visibility:hidden!important;
  animation:none!important
}
html:not([data-workspace-mode='studio']) #genGrid .gtile-status .gs-dot{animation:none!important;box-shadow:none!important}

/* Local spinner glyphs are suppressed; their parent surface owns the loading state. */
html:not([data-workspace-mode='studio']) .media-loading>i,
html:not([data-workspace-mode='studio']) .ops-icon-btn:has(.spin) .spin{
  animation:none!important;
  border:0!important;
  background:none!important;
  transform:none!important
}
html:not([data-workspace-mode='studio']) .media-loading>i{display:none!important}
html:not([data-workspace-mode='studio']) :is(.ops-loading>div,.finance-loading>div){
  background-size:auto!important;
  background-position:initial!important
}

@media (prefers-reduced-motion:reduce){
  html:not([data-workspace-mode='studio']) :is(
    .anim-organic-pulse,
    .sm-fluid-shimmer[data-sm-loading='true'],
    .sm-media-loading:not(.sm-media-refreshing):not([data-sm-media-snapshot='true']),
    .sm-video-frame-loading:not(.sm-media-refreshing),
    .sm-project-library-loading,
    .sm-viewer-loading,
    .sm-billing-loading,
    .sm-profile-loading,
    .sm-v5-asset.is-uploading,
    .sm-loading-surface[data-sm-loading='true'],
    .sm-loading-control[data-sm-loading='true'],
    .sm-loading-inline[data-sm-loading='true'],
    .ops-loading>div,
    .finance-loading>div,
    .media-loading,
    .ops-inline-loading,
    .queue-line,
    .sm-loading-line,
    .sm-profile-avatar.is-loading,
    .sm-profile-credit-card.is-loading>span,
    #previewOverlay .preview-empty[data-state='loading'],
    #genGrid .gtile-thumb,
    #smV5Mount #smV5AssetTags .sm-v5-asset.sm-v161-media-pending
  ){
    animation:none!important;
    opacity:.72!important;
    will-change:auto!important
  }

  html:not([data-workspace-mode='studio']) :is(
    .sm-fluid-shimmer[data-sm-loading='true'],
    .sm-media-loading,
    .sm-video-frame-loading,
    .sm-project-library-loading,
    .sm-viewer-loading,
    .sm-billing-loading,
    .sm-profile-loading,
    .sm-v5-asset.is-uploading,
    .sm-loading-surface[data-sm-loading='true'],
    .sm-loading-control[data-sm-loading='true'],
    .sm-loading-inline[data-sm-loading='true'],
    .ops-loading>div,
    .finance-loading>div,
    .media-loading,
    .ops-inline-loading,
    #previewOverlay .preview-empty[data-state='loading'],
    #genGrid .gtile-thumb,
    #smV5Mount #smV5AssetTags .sm-v5-asset.sm-v161-media-pending
  )::before{
    animation:none!important;
    transform:none!important;
    opacity:.55!important;
    will-change:auto!important
  }
}