/**
 * PromXAI Global Ambient Background — test376
 * Canonical first-layer canvas for every public route except Home.
 *
 * Home keeps its approved local owner in home-launchpad.css. All other public
 * pages use this exact palette/motion mirror so the site has one visual ambient
 * system without stacking two animated owners on the same route.
 *
 * Paint order:
 *   html base canvas -> html::before aurora -> html::after glass ribbon -> body
 */

/* test383 modal transparency guard: an embedded prompt document must never
 * paint a root canvas because the parent archive is the visible background. */
html.promxai-modal-document {
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
}

/* Dark — mirrors the approved test374 Home palette. */
html[data-theme="dark"]:not(.promxai-modal-document) {
  --px-global-canvas-base:
    radial-gradient(ellipse at 86% -2%,rgb(106 92 239 / .14),transparent 42%),
    radial-gradient(ellipse at 8% 14%,rgb(122 98 229 / .11),transparent 44%),
    radial-gradient(ellipse at 56% 88%,rgb(234 128 197 / .10),transparent 38%),
    linear-gradient(135deg,#091836 0%,#0b1f43 40%,#0d2550 72%,#091b3b 100%);
  --px-global-aurora-field:
    radial-gradient(ellipse at center,rgb(91 129 233 / .60) 0%,rgb(91 129 233 / .24) 31%,transparent 70%),
    radial-gradient(ellipse at center,rgb(162 101 244 / .82) 0%,rgb(162 101 244 / .33) 31%,transparent 71%),
    radial-gradient(ellipse at center,rgb(239 128 198 / .58) 0%,rgb(239 128 198 / .22) 33%,transparent 73%),
    radial-gradient(ellipse at center,rgb(86 97 209 / .42) 0%,rgb(86 97 209 / .16) 33%,transparent 73%);
  --px-global-ribbon-field:
    linear-gradient(135deg,transparent 8%,rgb(87 126 231 / .014) 21%,rgb(87 126 231 / .09) 34%,rgb(159 98 244 / .15) 46%,rgb(238 126 197 / .082) 55%,transparent 71%),
    linear-gradient(45deg,transparent 12%,rgb(238 126 197 / .020) 27%,rgb(238 126 197 / .086) 39%,rgb(103 94 219 / .060) 52%,transparent 68%);
  --px-global-aurora-opacity:.97;
  --px-global-ribbon-opacity:.36;
  --px-global-ribbon-blend:screen;
  --px-global-aurora-duration:6.3s;
  --px-global-ribbon-duration:4.8s;
  --px-global-page-glass-a:rgb(9 22 50 / .70);
  --px-global-page-glass-b:rgb(13 31 68 / .58);
  --px-global-page-glass-strong-a:rgb(8 20 47 / .80);
  --px-global-page-glass-strong-b:rgb(12 29 64 / .70);
  --px-global-page-glass-shadow:0 20px 58px rgb(0 6 27 / .18),inset 0 1px 0 rgb(255 255 255 / .045);
  position:relative;
  min-height:100%;
  background:var(--px-global-canvas-base)!important;
  background-size:100% 100%,100% 100%,100% 100%,100% 100%!important;
  background-position:center!important;
}

/* Light + no explicit theme — mirrors the approved Home light palette. */
html[data-theme="light"]:not(.promxai-modal-document),
html:not([data-theme]):not(.promxai-modal-document) {
  --px-global-canvas-base:
    radial-gradient(ellipse at 88% -2%,rgb(57 107 208 / .10),transparent 42%),
    radial-gradient(ellipse at 4% 14%,rgb(142 96 230 / .085),transparent 44%),
    linear-gradient(135deg,#ffffff 0%,#f7fbff 41%,#fbf8ff 73%,#ffffff 100%);
  --px-global-aurora-field:
    radial-gradient(ellipse at center,rgb(45 108 214 / .68) 0%,rgb(45 108 214 / .30) 31%,transparent 70%),
    radial-gradient(ellipse at center,rgb(145 92 230 / .60) 0%,rgb(145 92 230 / .24) 31%,transparent 71%),
    radial-gradient(ellipse at center,rgb(229 116 178 / .42) 0%,rgb(229 116 178 / .16) 33%,transparent 73%),
    radial-gradient(ellipse at center,rgb(238 192 84 / .30) 0%,rgb(238 192 84 / .11) 33%,transparent 73%);
  --px-global-ribbon-field:
    linear-gradient(135deg,transparent 8%,rgb(43 104 211 / .018) 21%,rgb(43 104 211 / .115) 34%,rgb(135 84 224 / .108) 46%,rgb(226 111 176 / .052) 55%,transparent 71%),
    linear-gradient(45deg,transparent 12%,rgb(229 113 176 / .014) 27%,rgb(229 113 176 / .068) 39%,rgb(238 192 84 / .082) 52%,transparent 68%);
  --px-global-aurora-opacity:.97;
  --px-global-ribbon-opacity:.34;
  --px-global-ribbon-blend:normal;
  --px-global-aurora-duration:6.3s;
  --px-global-ribbon-duration:4.8s;
  --px-global-page-glass-a:rgb(255 255 255 / .72);
  --px-global-page-glass-b:rgb(248 251 255 / .60);
  --px-global-page-glass-strong-a:rgb(255 255 255 / .84);
  --px-global-page-glass-strong-b:rgb(246 250 255 / .74);
  --px-global-page-glass-shadow:0 20px 52px rgb(48 72 108 / .10),inset 0 1px 0 rgb(255 255 255 / .82);
  position:relative;
  min-height:100%;
  background:var(--px-global-canvas-base)!important;
  background-size:100% 100%,100% 100%,100% 100%!important;
  background-position:center!important;
}

/* One global ambient owner: no negative z-index and no page-level duplicate. */
html:not(.promxai-modal-document)::before,
html:not(.promxai-modal-document)::after {
  content:"";
  position:fixed;
  pointer-events:none;
  transform-origin:50% 50%;
  backface-visibility:hidden;
}

/* Plane 1 — same four diagonal travelling color fields as Home. */
html:not(.promxai-modal-document)::before {
  z-index:0;
  inset:-18vh -18vw;
  background:var(--px-global-aurora-field);
  background-repeat:no-repeat;
  background-size:72% 76%,74% 78%,64% 68%,68% 72%;
  background-position:-20% -18%,92% -12%,40% -22%,-12% 76%;
  opacity:var(--px-global-aurora-opacity);
  will-change:transform,opacity,background-position;
  animation:px-global-corner-wave-flow var(--px-global-aurora-duration) cubic-bezier(.45,.03,.22,.98) infinite alternate;
}

/* Plane 2 — reverse-diagonal glass ribbon for depth. */
html:not(.promxai-modal-document)::after {
  z-index:0;
  inset:-22vh -22vw;
  background:var(--px-global-ribbon-field);
  background-size:185% 185%,178% 178%;
  background-position:-34% -22%,126% 112%;
  opacity:var(--px-global-ribbon-opacity);
  mix-blend-mode:var(--px-global-ribbon-blend);
  will-change:transform,opacity,background-position;
  animation:px-global-corner-ribbon-flow var(--px-global-ribbon-duration) ease-in-out infinite alternate-reverse;
}

/* Public document plane stays above the root canvas. This selector mirrors
 * the critical first-paint contract so no older page body owner can win. */
html[data-theme] body:not(.promxai-modal-embed),
html:not([data-theme]) body:not(.promxai-modal-embed) {
  position:relative;
  z-index:1;
  isolation:isolate;
  min-height:100vh;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
}

@keyframes px-global-corner-wave-flow {
  0% {
    background-position:-34% -30%,112% -20%,54% -34%,-24% 86%;
    transform:translate3d(-13vw,-11vh,0) rotate(-2.6deg) scale(1.035);
    opacity:calc(var(--px-global-aurora-opacity) * .90);
  }
  34% {
    background-position:10% 14%,72% 24%,88% 22%,18% 58%;
    transform:translate3d(-3vw,-2vh,0) rotate(.8deg) scale(1.075);
    opacity:var(--px-global-aurora-opacity);
  }
  67% {
    background-position:66% 70%,22% 72%,92% 76%,62% 20%;
    transform:translate3d(8vw,8vh,0) rotate(2.2deg) scale(1.055);
    opacity:calc(var(--px-global-aurora-opacity) * .97);
  }
  100% {
    background-position:122% 118%,-28% 108%,46% 126%,116% 42%;
    transform:translate3d(15vw,13vh,0) rotate(-.7deg) scale(1.085);
    opacity:var(--px-global-aurora-opacity);
  }
}

@keyframes px-global-corner-ribbon-flow {
  0% {
    background-position:-48% -34%,142% 126%;
    transform:translate3d(-19vw,-13vh,0) rotate(-6deg) scale(1.035);
    opacity:calc(var(--px-global-ribbon-opacity) * .58);
  }
  50% {
    background-position:44% 42%,56% 58%;
    transform:translate3d(1vw,1vh,0) rotate(.4deg) scale(1.09);
    opacity:var(--px-global-ribbon-opacity);
  }
  100% {
    background-position:144% 126%,-44% -30%;
    transform:translate3d(20vw,14vh,0) rotate(5deg) scale(1.05);
    opacity:calc(var(--px-global-ribbon-opacity) * .76);
  }
}


/* test458 iPad / touch-tablet compositor stabilization.
 * WebKit can tile-flicker when two oversized fixed gradient planes animate
 * transform + background-position underneath translucent fixed glass layers.
 * Keep the exact palette, but freeze those planes on touch tablets only. */
html.px-touch-tablet:not(.promxai-modal-document)::before,
html.px-touch-tablet:not(.promxai-modal-document)::after {
  animation:none!important;
  transform:none!important;
  will-change:auto!important;
  backface-visibility:visible;
}
html.px-touch-tablet:not(.promxai-modal-document)::before {
  background-position:10% 14%,72% 24%,88% 22%,18% 58%;
  opacity:calc(var(--px-global-aurora-opacity) * .84);
}
html.px-touch-tablet:not(.promxai-modal-document)::after {
  background-position:44% 42%,56% 58%;
  opacity:calc(var(--px-global-ribbon-opacity) * .70);
  mix-blend-mode:normal!important;
}

/* Keep the same identity on phones with a slightly calmer compositor load. */
@media (max-width:760px) {
  html:not(.promxai-modal-document)::before {
    inset:-20vh -26vw;
    animation-duration:9.2s;
  }
  html:not(.promxai-modal-document)::after {
    inset:-24vh -28vw;
    opacity:calc(var(--px-global-ribbon-opacity) * .78);
    animation-duration:7.2s;
  }
}

@media (prefers-reduced-motion:reduce) {
  html:not(.promxai-modal-document)::before,
  html:not(.promxai-modal-document)::after {
    animation:none!important;
    transform:none!important;
  }
}

/* Neutral output contexts stay untouched. */
@media print {
  html::before,
  html::after {
    display:none!important;
  }
}