/*
 * ae-processing.css — Advanced Edit processing / export loader (2026-10-20).
 * Visual layer only: every id the scripts drive (#progress-percent, #progress-desc,
 * #progress-bar-fill, #progress-icon, #ae-export-ring, #loading-*) is kept and
 * still updated by ae_export_progress.js / advanced_editor.js. ae_processing_fx.js
 * only mirrors the % into --p and injects the decorative nodes below.
 */
:root {
  --aepx-accent: #d2bbff;
  --aepx-accent-2: #a78bfa;
  --aepx-hot: #ffe566;
  --aepx-track: rgba(255, 255, 255, .08);
  --aepx-ink: #f4f0ff;
  --aepx-ink-2: #b9aed0;
}

/* ---------- backdrop ---------- */
#progress-modal,
#loading-overlay {
  background: radial-gradient(120% 80% at 50% 40%, rgba(46, 20, 92, .55), rgba(5, 3, 10, .92) 70%) !important;
}

/* ---------- ring: conic progress instead of the spinning canvas arcs ---------- */
#ae-export-ring canvas { display: none !important; }
.aepx-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  --p: 0;
  background:
    conic-gradient(var(--aepx-accent) calc(var(--p) * 1%), var(--aepx-track) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  transition: --p .35s ease;
}
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
.aepx-orbit {
  position: absolute;
  inset: 0;
  animation: aepx-spin 3.2s linear infinite;
}
.aepx-orbit::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--aepx-hot);
  box-shadow: 0 0 14px 3px rgba(255, 229, 102, .55);
}
/* waveform behind the % */
.aepx-wave {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 64px;
  transform: translate(-50%, -50%);
  opacity: .22;
  pointer-events: none;
}
.aepx-wave i {
  display: block;
  width: 5px;
  height: 18px;
  border-radius: 3px;
  background: var(--aepx-accent);
  animation: aepx-bar 1.05s ease-in-out infinite;
}
.aepx-wave i:nth-child(2n) { animation-delay: -.18s; }
.aepx-wave i:nth-child(3n) { animation-delay: -.42s; }
.aepx-wave i:nth-child(5n) { animation-delay: -.64s; }
.aepx-wave i:nth-child(7n) { animation-delay: -.86s; }
#progress-percent {
  position: relative;
  z-index: 1;
  color: var(--aepx-ink) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
#progress-title { position: relative; z-index: 1; color: var(--aepx-ink-2) !important; }

/* ---------- mini timeline: clips slide under a fixed playhead ---------- */
.aepx-strip {
  position: relative;
  width: min(360px, 80vw);
  height: 58px;
  margin: 0 auto 1.1rem;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, .04);
}
.aepx-track {
  position: absolute;
  left: 0;
  height: 12px;
  display: flex;
  gap: 6px;
  width: max-content;
  animation: aepx-slide 6s linear infinite;
}
.aepx-track:nth-child(1) { top: 8px; }
.aepx-track:nth-child(2) { top: 23px; animation-duration: 8s; }
.aepx-track:nth-child(3) { top: 38px; animation-duration: 5s; }
.aepx-track b {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: rgba(167, 139, 250, .55);
}
.aepx-track:nth-child(2) b { background: rgba(210, 187, 255, .32); }
.aepx-track:nth-child(3) b { background: rgba(103, 232, 249, .38); }
.aepx-head {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--aepx-hot);
  box-shadow: 0 0 10px rgba(255, 229, 102, .7);
}
.aepx-head::before {
  content: "";
  position: absolute;
  top: 0;
  left: -5px;
  border: 6px solid transparent;
  border-top-color: var(--aepx-hot);
  border-bottom: 0;
}
/* the ring already shows progress: hide the strip only in the success/error state */
#progress-icon[style*="block"] ~ .aepx-strip { display: none; }

/* ---------- bar: flat accent + travelling sheen ---------- */
#progress-bar-fill,
#loading-progress-bar {
  position: relative;
  background: var(--aepx-accent) !important;
  overflow: hidden;
}
#progress-bar-fill::after,
#loading-progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
  transform: translateX(-100%);
  animation: aepx-sheen 1.4s ease-in-out infinite;
}
#progress-desc { color: var(--aepx-ink-2) !important; }

/* ---------- generic loading overlay ---------- */
#loading-overlay > .animate-spin { display: none !important; }
#loading-overlay .aepx-strip { margin-bottom: 1rem; }
#loading-percent { color: var(--aepx-ink) !important; }

@keyframes aepx-spin { to { transform: rotate(360deg); } }
@keyframes aepx-bar { 0%, 100% { height: 14px; } 50% { height: 60px; } }
@keyframes aepx-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes aepx-sheen { to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  .aepx-orbit, .aepx-wave i, .aepx-track,
  #progress-bar-fill::after, #loading-progress-bar::after { animation: none !important; }
}