/* ══════════════════════════════════════════════════════════════
   RENDER PROGRESS MODAL — werenders branded.
   Reuses: .logo from theme.css, wrSpinner.create() from wr-spinner.js.
   State driven by [data-state] on #mod-render-modal:
   'rendering' | 'done' | 'failed'.
   ══════════════════════════════════════════════════════════════ */

.studio-render-modal{
  max-width:520px;
  padding:0;
  overflow:hidden;
  border-radius:var(--radius-lg);
}

.studio-render-head{
  padding:18px 22px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
}
.studio-render-head .logo{
  font-size:18px;
  cursor:default;
}

.studio-render-modal .modal-body{
  padding:32px 28px 20px;
}
.studio-render-progress{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  padding:0;
}

/* Visual area — wrSpinner canvas OR done/failed icon */
.studio-render-visual{
  width:80px;
  height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.studio-render-visual .wr-spinner{ display:block; }
.studio-render-visual .ico-done,
.studio-render-visual .ico-failed{
  width:64px;
  height:64px;
  animation:wr-pop-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.studio-render-visual .ico-failed{
  animation:wr-pop-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both,
            wr-shake-once 0.5s ease 0.4s;
}
@keyframes wr-pop-in{
  0%   { transform:scale(0.3); opacity:0; }
  60%  { transform:scale(1.12); opacity:1; }
  100% { transform:scale(1); opacity:1; }
}
@keyframes wr-shake-once{
  0%, 100% { transform:translateX(0); }
  25%      { transform:translateX(-5px); }
  75%      { transform:translateX(5px); }
}

.studio-render-title{
  font:600 16px/1.3 'Poppins', inherit;
  color:var(--heading);
  margin:0;
  text-align:center;
}
.studio-render-status{
  font:500 13px/1.4 'Poppins', inherit;
  color:var(--muted);
  text-align:center;
  margin:-10px 0 0;
  min-height:18px;
}

.studio-render-meter{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:4px;
}
.studio-render-bar{
  width:100%;
  height:8px;
  background:var(--border);
  border-radius:999px;
  overflow:hidden;
  position:relative;
}
.studio-render-bar-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 70%, var(--success)));
  border-radius:999px;
  /* 2.5s linear so big server jumps glide visibly (not snap) */
  transition:width 2.5s linear, background .3s ease;
  position:relative;
  overflow:hidden;
}
[data-state="done"] .studio-render-bar-fill{
  transition:width .5s cubic-bezier(0.16, 1, 0.3, 1), background .3s ease;
  background:linear-gradient(90deg, var(--success), var(--success));
}
[data-state="failed"] .studio-render-bar-fill{
  transition:width .4s ease, background .3s ease;
  background:var(--danger);
}
[data-state="rendering"] .studio-render-bar-fill::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
  animation:wr-render-shimmer 1.8s linear infinite;
}
@keyframes wr-render-shimmer{
  0%   { transform:translateX(-100%); }
  100% { transform:translateX(100%); }
}

.studio-render-meter-info{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.studio-render-pct{
  font:600 12px/1 'Poppins', inherit;
  color:var(--heading);
  font-variant-numeric:tabular-nums;
}
.studio-render-elapsed{
  font:500 12px/1 'Poppins', inherit;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* Note — JS owns this. Computes ETA from elapsed + current pct. */
.studio-render-note{
  font:500 12px/1.4 'Poppins', inherit;
  color:var(--muted);
  margin:6px 0 0;
  text-align:center;
  min-height:18px;
}

.studio-render-modal .modal-foot{
  padding:16px 22px;
  border-top:1px solid var(--border);
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.studio-render-modal .modal-foot .btn{
  padding:9px 16px;
  font-size:13px;
}