/* Motion & light effects shared by the studio (body.studio) and the admin panel (body.admin): rolling
   labels (marquee.js), a slowly drifting background glow, a light sweep on primary buttons and soft hover
   lifts. All movement stops for people who ask their system for reduced motion. */

/* ---- Rolling labels ---- */
.mq-on{text-overflow:clip!important;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 16px),transparent 100%);
 mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 16px),transparent 100%)}
.mq-track{display:inline-flex;gap:36px;white-space:nowrap;will-change:transform;animation:mq-roll var(--mq-dur,12s) linear 1.4s infinite}
.mq-item{flex:none}
.mq-on:hover .mq-track{animation-play-state:paused}
.mq-on:dir(rtl) .mq-track{animation-name:mq-roll-rtl}
@keyframes mq-roll{to{transform:translateX(calc(-1 * var(--mq-shift,0px)))}}
@keyframes mq-roll-rtl{to{transform:translateX(var(--mq-shift,0px))}}

/* ---- Drifting background glow (behind everything, never catches clicks) ---- */
body.studio,body.admin{isolation:isolate}
body.studio::before,body.admin::before{content:"";position:fixed;inset:-15%;z-index:-1;pointer-events:none;
 background:radial-gradient(32% 28% at 18% 24%,rgba(var(--accent2-rgb),.09),transparent 70%),
  radial-gradient(30% 26% at 82% 72%,rgba(var(--accent-rgb),.07),transparent 70%),
  radial-gradient(24% 22% at 60% 12%,rgba(var(--violet-rgb),.05),transparent 70%);
 animation:fx-drift 34s ease-in-out infinite alternate}
@keyframes fx-drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(3%,-2%,0) scale(1.06)}100%{transform:translate3d(-3%,2%,0) scale(1.02)}}

/* ---- Brand mark: the gradient slowly flows ---- */
body.studio .nm-brand-mark,body.studio .brand-mark,body.admin .brand-mark{background-size:200% 200%!important;animation:fx-flow 9s ease-in-out infinite alternate}
@keyframes fx-flow{from{background-position:0% 50%}to{background-position:100% 50%}}

/* ---- Light sweep across primary buttons ---- */
body.studio .generate-btn,body.studio .btn.primary,body.admin .btn:not(.secondary):not(.ghost):not(.danger){position:relative;overflow:hidden;isolation:isolate}
body.studio .generate-btn:not(:disabled)::after,body.studio .btn.primary:not(:disabled)::after,body.admin .btn:not(.secondary):not(.ghost):not(.danger):not(:disabled)::after{
 content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:1;pointer-events:none;
 background:linear-gradient(100deg,transparent,rgba(var(--fg-rgb),.38),transparent);transform:skewX(-18deg);animation:fx-sweep 5.5s ease-in-out 1.5s infinite}
@keyframes fx-sweep{0%,62%{left:-60%}100%{left:130%}}
body.studio .generate-btn:not(:disabled):hover{box-shadow:0 14px 40px rgba(var(--glow-rgb),.45),0 0 0 4px rgba(var(--glow-rgb),.12),inset 0 1px 0 rgba(var(--fg-rgb),.35)}

/* ---- Press feedback ---- */
body.studio :is(.btn,.nm-crop-btn,.nm-route-btn,.sp-button,.category-chip,.nm-ref-add):active:not(:disabled),
body.admin :is(.btn,.nav-link,.id-chip):active:not(:disabled){transform:scale(.97)}

/* ---- Studio: cards lift and glow on hover; cards still generating breathe ---- */
body.studio .job{transition:border-color .25s,transform .25s,box-shadow .25s;animation:fx-rise .5s cubic-bezier(.2,.7,.2,1) both}
body.studio .job:hover{transform:translateY(-3px);border-color:rgba(var(--accent-rgb),.28);box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 0 1px rgba(var(--accent-rgb),.08)}
body.studio .job:has(.nm-job-placeholder:is(.queued,.submitting,.submitted,.running)){animation:fx-rise .5s cubic-bezier(.2,.7,.2,1) both,fx-breathe 2.6s ease-in-out .5s infinite}
@keyframes fx-breathe{50%{border-color:rgba(var(--accent-rgb),.45);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.15),0 0 28px rgba(var(--glow-rgb),.16)}}
body.studio .nm-job-stage img,body.studio .nm-job-stage video{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
body.studio .job:hover .nm-job-stage img,body.studio .job:hover .nm-job-stage video{transform:scale(1.035)}
body.studio .nm-model-card{transition:transform .3s,box-shadow .3s}
body.studio .nm-model-card:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(0,0,0,.4)}
body.studio .nm-model-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(var(--fg-rgb),.08) 50%,transparent 65%);background-size:250% 100%;background-position:120% 0;transition:background-position 1.1s ease}
body.studio .nm-model-card:hover::after{background-position:-20% 0}
body.studio .category-chip{transition:transform .18s,border-color .18s,background .18s}
body.studio .category-chip:hover{transform:translateY(-2px)}

/* ---- Admin: stats, nav and rows respond ---- */
body.admin .stat{transition:transform .25s,border-color .25s,box-shadow .25s}
body.admin .stat:hover{transform:translateY(-3px);border-color:rgba(var(--accent-rgb),.3);box-shadow:0 16px 34px rgba(0,0,0,.4)}
body.admin .nav-link{position:relative}
body.admin .nav-link.active::before{content:"";position:absolute;inset-inline-start:-1px;top:22%;bottom:22%;width:3px;border-radius:3px;background:var(--grad);animation:fx-grow .35s ease both}
@keyframes fx-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
body.admin .admin-panel:not(.hidden){animation:fx-rise .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes fx-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
body.admin .status.completed{animation:fx-glint 3.5s ease-in-out infinite}
@keyframes fx-glint{50%{box-shadow:0 0 0 3px rgba(var(--good-rgb),.08)}}
body.admin .table tbody tr{transition:background .2s}
@media(min-width:761px){body.admin .table tbody tr:hover{background:linear-gradient(90deg,rgba(var(--accent-rgb),.05),transparent 60%)}}

/* ---- Reduced motion: keep the look, drop the movement ---- */
@media (prefers-reduced-motion:reduce){
 .mq-track,body.studio::before,body.admin::before,body.studio .nm-brand-mark,body.studio .brand-mark,body.admin .brand-mark,
 body.studio .job,body.admin .admin-panel,body.admin .status,body.admin .nav-link.active::before{animation:none!important}
 body.studio .generate-btn::after,body.studio .btn.primary::after,body.admin .btn::after{display:none!important}
 body.studio .job:hover,body.studio .category-chip:hover,body.studio .nm-model-card:hover,body.admin .stat:hover{transform:none}
}
body.studio,body.admin{min-height:100vh}

/* The rolling copy is for show only: copying a label gives its text once. */
.mq-item[aria-hidden=true]{-webkit-user-select:none;user-select:none}

/* ---- Small delights (fun.js) ---- */
.nm-confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:300}
body.studio .job.nm-pop{animation:fx-pop-card .7s cubic-bezier(.2,1.4,.4,1)}
@keyframes fx-pop-card{0%{transform:scale(1)}35%{transform:scale(1.025)}100%{transform:scale(1)}}
.nm-ripple{position:absolute;border-radius:50%;background:rgba(var(--fg-rgb),.28);transform:scale(0);opacity:.9;pointer-events:none;z-index:2;animation:fx-ripple .65s ease-out forwards}
@keyframes fx-ripple{to{transform:scale(1);opacity:0}}
body.studio :is(.nm-kind-tab,.nm-route-btn){position:relative;overflow:hidden}
/* Generating cards: a slow swirl of the theme colours behind the progress card, and a shimmer. */
body.studio .nm-job-placeholder{background:linear-gradient(110deg,var(--panel) 30%,rgba(var(--fg-rgb),.07) 50%,var(--panel) 70%);background-size:220% 100%;overflow:hidden}
body.studio .nm-job-placeholder:is(.queued,.submitting,.submitted,.running)::before{content:"";position:absolute;inset:-45%;pointer-events:none;
 background:conic-gradient(from 0deg,transparent 0deg,rgba(var(--accent-rgb),.28) 60deg,transparent 130deg,rgba(var(--accent2-rgb),.26) 220deg,transparent 300deg);filter:blur(34px);animation:fx-swirl 10s linear infinite}
body.studio .nm-job-placeholder .gen-progress{position:relative;z-index:1}
@keyframes fx-swirl{to{transform:rotate(360deg)}}
body.studio .nm-tip{margin-top:8px;font-size:12px;line-height:1.45;color:var(--soft);opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s}
body.studio .nm-tip.show{opacity:1;transform:none}
/* Empty screens: the icon floats gently. */
body.studio .empty-state .empty-symbol{animation:fx-float 4s ease-in-out infinite}
@keyframes fx-float{50%{transform:translateY(-6px) rotate(6deg)}}
@media (prefers-reduced-motion:reduce){
 body.studio .job.nm-pop,body.studio .nm-job-placeholder::before,body.studio .empty-state .empty-symbol{animation:none!important}
 body.studio .nm-tip{transition:none}
}