/* ══════════════════════════════════════════════════════════════════════
   project_new_premium.css — animated constellation background for the
   Create New Project wizard (/projects/new -> agent_new.html). Scoped
   under `.th-create` (a body class only this page sets), loaded LAST.

   Deliberately minimal: this ONLY adds the living background layer
   (mirrors home.css/projects.css — aurora, drifting orbs, a constellation
   canvas driven by home.js). No card/panel wrapping — the wizard content
   sits directly over the background, same as it always has. The sidebar
   and app-header already carry their own translucent + blurred surface
   site-wide (base.css/dashboard.css), which is the only "glass" on this
   page. It does NOT touch the stepper's design, buttons, colors, fonts,
   spacing, or anything else already styled by project_new_wizard.css /
   agent_new.css.
   ══════════════════════════════════════════════════════════════════════ */

/* This page carries its own living background — retire base.html's mesh. */
.th-create .mesh-bg { display: none !important; }

/* ─────────────────────────────────────────────
   LIVING BACKGROUND (mirrors home.css .th-bg)
   ───────────────────────────────────────────── */
.th-create .th-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(1100px 640px at 80% -12%, rgba(59, 130, 246, .13), transparent 60%),
    radial-gradient(820px 560px at 2% 4%, rgba(147, 197, 253, .07), transparent 55%),
    linear-gradient(180deg, #08080e 0%, #070710 45%, #06060c 100%);
}
.th-create .th-bg-aurora {
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 82vh;
  background:
    conic-gradient(from 120deg at 50% 40%,
      rgba(96, 165, 250, 0) 0deg, rgba(96, 165, 250, .13) 70deg,
      rgba(59, 130, 246, .05) 150deg, rgba(147, 197, 253, .12) 240deg,
      rgba(96, 165, 250, 0) 360deg);
  filter: blur(72px);
  opacity: .5;
  animation: tcAurora 28s linear infinite;
}
@keyframes tcAurora { from { transform: rotate(0) scale(1.1); } to { transform: rotate(360deg) scale(1.1); } }
.th-create .th-bg-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .8; }
.th-create .th-bg-orb-1 { width: 500px; height: 500px; top: -14%; left: -8%;  background: rgba(96, 165, 250, .09); animation: tcOrb1 24s ease-in-out infinite; }
.th-create .th-bg-orb-2 { width: 440px; height: 440px; top: 26%; right: -12%; background: rgba(59, 130, 246, .07); animation: tcOrb2 30s ease-in-out infinite; }
.th-create .th-bg-orb-3 { width: 400px; height: 400px; bottom: -18%; left: 42%; background: rgba(147, 197, 253, .05); animation: tcOrb3 22s ease-in-out infinite; }
@keyframes tcOrb1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(55px,45px)} }
@keyframes tcOrb2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-45px,38px)} }
@keyframes tcOrb3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(38px,-36px)} }
.th-create .th-bg-constellation { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.th-create .th-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(147, 197, 253, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(147, 197, 253, .05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
  opacity: .5;
}
.th-create .th-bg-noise {
  position: absolute; inset: 0; opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.th-create .th-bg-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(130% 100% at 50% 0%, transparent 55%, rgba(4, 4, 9, .5) 100%);
}

/* Keep the whole working surface painted above the fixed background. */
.th-create .anp-layout { position: relative; z-index: 1; }

/* Match the top navbar + sidebar transparency used on /projects (dash-pro
   in projects.css) so the two pages read as one consistent shell. */
.th-create .app-header {
  background: rgba(8, 9, 16, .55);
  backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid rgba(147, 197, 253, .10);
}
.th-create .anp-sidebar,
.th-create .sidebar {
  background: linear-gradient(180deg, rgba(11, 12, 21, .72), rgba(8, 8, 14, .6));
  backdrop-filter: blur(22px) saturate(1.1);
  border-right: 1px solid rgba(147, 197, 253, .10);
}

@media (prefers-reduced-motion: reduce) {
  .th-create .th-bg-aurora,
  .th-create .th-bg-orb { animation: none !important; }
}