/* AskSary ambience (presentation only). The cinematic field shared by the
   whole site: theme tokens, the fixed page / workspace hosts, the canvas and
   diffusion layers painted by ambience.js, glass headers with a travelling
   light seam, and shimmer on primary buttons. LiveLoop takes none of it: it
   is the plain black room. All motion is gated on prefers-reduced-motion. */

:root{
  --amb-accent:167,139,250;     /* violet */
  --amb-accent-2:56,189,248;    /* sky */
  --amb-accent-3:244,114,182;   /* rose */
  --amb-blob:.55;
  --amb-diffusion-opacity:.75;
  --amb-diffusion-blur:90px;
  --amb-diffusion-sat:1.25;
  --amb-page-bg:#000;
  --amb-glass:rgba(4,4,8,.42);
  --amb-glass-border:rgba(255,255,255,.10);
  --amb-seam:rgba(167,139,250,.85);
  --amb-shimmer:rgba(255,255,255,.22);
  --amb-glow:rgba(167,139,250,.45);
}
html.light-mode,html[data-public-theme="light"]{
  --amb-accent:139,92,246;
  --amb-accent-2:14,165,233;
  --amb-accent-3:236,72,153;
  --amb-blob:.7;
  --amb-diffusion-opacity:.95;
  --amb-diffusion-blur:80px;
  --amb-diffusion-sat:1.5;
  --amb-page-bg:#fff;
  --amb-glass:rgba(255,255,255,.46);
  --amb-glass-border:rgba(20,16,40,.08);
  --amb-seam:rgba(109,40,217,.85);
  --amb-shimmer:rgba(124,58,237,.16);
  --amb-glow:rgba(124,58,237,.30);
}
html.theme-stealth:not(.light-mode){
  --amb-accent:229,229,229;
  --amb-accent-2:160,160,160;
  --amb-accent-3:120,120,120;
  --amb-blob:.35;
  --amb-diffusion-opacity:.22;
  --amb-diffusion-blur:120px;
  --amb-diffusion-sat:0;
  --amb-glass:rgba(0,0,0,.62);
  --amb-glass-border:rgba(255,255,255,.12);
  --amb-seam:rgba(255,255,255,.55);
  --amb-shimmer:rgba(255,255,255,.10);
  --amb-glow:rgba(255,255,255,.18);
}

/* ---- hosts ----------------------------------------------------------------- */
.ambience-host{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:-1}
/* Public pages: the host carries the page colour so the field sits between
   the page background and its content. The page's own body background is
   released so the field can be seen. */
.ambience-host-page{background:var(--amb-page-bg)}
html[data-ambience],html[data-ambience] body[data-ambience]{background:transparent !important}
/* Workspace: sits above the wallpaper layers (z -2 / -1) and below content. */
.ambience-host-app{z-index:-1;background:transparent}
html:not(.light-mode) .ambience-host-app{background:rgba(0,0,0,.28)}

/* ---- layers painted by ambience.js ---------------------------------------- */
.ambience-canvas,.ambience-diffusion{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambience-canvas{opacity:0;transition:opacity 1.4s ease}
.ambience-canvas.is-live{opacity:1}
.ambience-diffusion{
  filter:blur(var(--amb-diffusion-blur)) saturate(var(--amb-diffusion-sat));
  opacity:var(--amb-diffusion-opacity);
  transform:translateZ(0);
}
.ambience-diffusion span{
  position:absolute;border-radius:50%;width:46vmax;height:46vmax;
  background:radial-gradient(circle at 50% 50%,rgba(var(--amb-accent),var(--amb-blob)),rgba(var(--amb-accent),0) 70%);
  animation:amb-drift-a 38s ease-in-out infinite alternate;
  will-change:transform;
}
.ambience-diffusion span:nth-child(1){left:-6vmax;top:-26vmax}
.ambience-diffusion span:nth-child(2){
  right:-14vmax;top:20vh;width:52vmax;height:52vmax;
  background:radial-gradient(circle at 50% 50%,rgba(var(--amb-accent-2),calc(var(--amb-blob) * .8)),rgba(var(--amb-accent-2),0) 70%);
  animation:amb-drift-b 47s ease-in-out infinite alternate;
}
.ambience-diffusion span:nth-child(3){
  left:22vw;bottom:-22vmax;width:40vmax;height:40vmax;
  background:radial-gradient(circle at 50% 50%,rgba(var(--amb-accent-3),calc(var(--amb-blob) * .65)),rgba(var(--amb-accent-3),0) 70%);
  animation:amb-drift-c 55s ease-in-out infinite alternate;
}
@keyframes amb-drift-a{from{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(14vw,8vh,0) scale(1.12)}to{transform:translate3d(-6vw,16vh,0) scale(.94)}}
@keyframes amb-drift-b{from{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-16vw,-10vh,0) scale(1.08)}to{transform:translate3d(-4vw,12vh,0) scale(1.18)}}
@keyframes amb-drift-c{from{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(18vw,-14vh,0) scale(1.1)}to{transform:translate3d(-12vw,-4vh,0) scale(.9)}}

/* ---- public site: glass headers with a travelling seam ------------------- */
body[data-ambience] .nav,
body[data-ambience] .site-header,
body[data-ambience] .topbar,
body[data-ambience] .auth-page-header{
  position:relative;
  background:var(--amb-glass) !important;
  border-bottom:1px solid var(--amb-glass-border) !important;
  backdrop-filter:blur(26px) saturate(1.4);-webkit-backdrop-filter:blur(26px) saturate(1.4);
}
body[data-ambience] .site-header .nav{background:transparent !important;border-bottom:0 !important;backdrop-filter:none;-webkit-backdrop-filter:none}
body[data-ambience] .nav::after,
body[data-ambience] .site-header::after,
body[data-ambience] .topbar::after,
body[data-ambience] .auth-page-header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 30%,var(--amb-seam) 50%,transparent 70%);
  background-size:220% 100%;
  animation:amb-seam 9s cubic-bezier(.4,0,.2,1) infinite;
}
body[data-ambience] .site-header .nav::after{display:none}
@keyframes amb-seam{0%{background-position:120% 0}100%{background-position:-120% 0}}

/* Primary actions: shimmer sweep and lift. */
body[data-ambience] .btn,
body[data-ambience] .nav-cta,
body[data-ambience] .cta,
body[data-ambience] button[type="submit"]{
  position:relative;overflow:hidden;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .28s,background .22s,border-color .22s,color .2s;
}
body[data-ambience] .btn::after,
body[data-ambience] .nav-cta::after,
body[data-ambience] .cta::after,
body[data-ambience] button[type="submit"]::after{
  content:"";position:absolute;inset:-40% -60%;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,var(--amb-shimmer) 50%,transparent 65%);
  transform:translateX(-70%) skewX(-12deg);opacity:0;
  transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .3s;
}
body[data-ambience] .btn:hover,
body[data-ambience] .nav-cta:hover,
body[data-ambience] .cta:hover,
body[data-ambience] button[type="submit"]:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 28px -10px var(--amb-glow);
}
body[data-ambience] .btn:hover::after,
body[data-ambience] .nav-cta:hover::after,
body[data-ambience] .cta:hover::after,
body[data-ambience] button[type="submit"]:hover::after{opacity:1;transform:translateX(70%) skewX(-12deg)}
body[data-ambience] .btn:active,
body[data-ambience] .nav-cta:active,
body[data-ambience] .cta:active,
body[data-ambience] button[type="submit"]:active{transform:translateY(0) scale(.98)}

/* ---- workspace (app.html): header, sidebar and input become glass -------- */
.ambience-host-app ~ .main-container .controls-header,
.ambience-host-app ~ .main-container #input-area{
  backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
}
.ambience-host-app ~ .sidebar{
  backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
}
.ambience-host-app ~ .main-container .controls-header{position:relative}
.ambience-host-app ~ .main-container .controls-header::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 30%,var(--amb-seam) 50%,transparent 70%);
  background-size:220% 100%;
  animation:amb-seam 9s cubic-bezier(.4,0,.2,1) infinite;
}

/* ---- motion off ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .ambience-diffusion span,
  body[data-ambience] .nav::after,
  body[data-ambience] .site-header::after,
  body[data-ambience] .topbar::after,
  body[data-ambience] .auth-page-header::after,
  .ambience-host-app ~ .main-container .controls-header::after,
  body[data-ambience] .btn,
  body[data-ambience] .nav-cta,
  body[data-ambience] .cta,
  body[data-ambience] button[type="submit"]{animation:none !important;transition:none !important}
  body[data-ambience] .btn::after,
  body[data-ambience] .nav-cta::after,
  body[data-ambience] .cta::after,
  body[data-ambience] button[type="submit"]::after{display:none}
  .ambience-canvas{opacity:.6}
}