/* Luxury minimal UI — avatar-first */

/* Click ripples */
#ripples{position:fixed; inset:0; pointer-events:none; z-index:9999; overflow:hidden;}
.ripple{position:absolute; width:22px; height:22px; border-radius:999px; transform: translate(-50%,-50%) scale(0.2); opacity:0.0;
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 30px 90px rgba(0,0,0,0.65);
  animation: rippleLux 900ms cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes rippleLux{
  0%{ opacity:0.0; transform: translate(-50%,-50%) scale(0.2); }
  12%{ opacity:0.38; }
  100%{ opacity:0.0; transform: translate(-50%,-50%) scale(6.8); }
}

/* Splash pulse on tap */
#splash.lux-pulse::before{ opacity:1 !important; }

/* Background FX canvas behind avatar (disabled for now; keep avatar stable) */
/* #bgFx{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0.35; mix-blend-mode: screen; }
#avatar{ position:relative; z-index:2; } */

:root{
  --bg:#050506;
  --panel: rgba(255,255,255,0.035);
  --stroke: rgba(255,255,255,0.085);
  --stroke2: rgba(255,255,255,0.14);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.62);
  --muted2: rgba(255,255,255,0.45);
  --shadow: 0 40px 140px rgba(0,0,0,0.60);
  --glass: rgba(0,0,0,0.18);
  --glass2: rgba(0,0,0,0.26);
  --blur: blur(18px);
  --r: 26px;
  --r2: 18px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  color:var(--text);
  background: var(--bg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  overflow:hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Premium grain + vignette */
body::before{
  content:'';
  position:fixed; inset:0;
  pointer-events:none;
  opacity:0.14;
  mix-blend-mode: soft-light;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="260" height="260"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="260" height="260" filter="url(%23n)" opacity="0.22"/></svg>');
}
body::after{
  content:'';
  position:fixed; inset:-10%;
  pointer-events:none;
  /* Keep this very subtle — it was darkening the avatar on some displays. */
  background:
    radial-gradient(900px 520px at 50% 18%, rgba(255,255,255,0.035), rgba(0,0,0,0) 64%),
    radial-gradient(1200px 700px at 72% 22%, rgba(97,169,255,0.045), rgba(0,0,0,0) 64%),
    radial-gradient(1100px 760px at 28% 66%, rgba(246,195,74,0.018), rgba(0,0,0,0) 64%);
  opacity:0;
  transition: opacity 1200ms cubic-bezier(.2,.8,.2,1);
}

.bg{
  position:fixed; inset:0; pointer-events:none;
  opacity:0;
  transition: opacity 1200ms cubic-bezier(.2,.8,.2,1);
}
body.stage-ready .bg,
body.revealing .bg,
body.stage-ready::after,
body.revealing::after{ opacity: 1; }

/* Subtle animated “luxury” background movement */
/* Background animation toned down (kept minimal to avoid color cast). */
.bg::before{
  content:'';
  position:absolute; inset:-25%;
  background:
    radial-gradient(800px 520px at 60% 24%, rgba(97,169,255,0.040), rgba(0,0,0,0) 68%),
    radial-gradient(780px 560px at 28% 10%, rgba(246,195,74,0.020), rgba(0,0,0,0) 66%),
    radial-gradient(900px 700px at 50% 50%, rgba(255,255,255,0.020), rgba(0,0,0,0) 70%);
  filter: saturate(1.0);
  transform: translate3d(0,0,0);
  animation: bgFloat 22s ease-in-out infinite;
}
@keyframes bgFloat{
  0%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(-1.0%,0.8%,0) scale(1.015); }
  100%{ transform: translate3d(0,0,0) scale(1); }
}

/* Layout: keep avatar central and dominant */
.shell{width:min(1680px, calc(100% - 22px)); margin:0 auto; padding: 18px 0 22px;}

.stage{
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  background: rgba(255,255,255,0.028);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}

/* Soft “glass edge” */
.stage::before{
  content:'';
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  /* reduce overlay so it doesn’t change perceived avatar lighting */
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0) 26%);
  opacity:0.35;
}

.stage-frame{
  position:relative;
  height: min(92vh, 1020px);
  opacity:0;
  transform: translateY(10px) scale(1.01);
  transition: opacity 1100ms cubic-bezier(.2,.8,.2,1), transform 1100ms cubic-bezier(.2,.8,.2,1);
}
body.stage-ready .stage-frame,
body.revealing .stage-frame{
  opacity:1;
  transform: translateY(0) scale(1);
}

.avatar{position:absolute; inset:0;}

.loading{
  position:absolute; left:18px; bottom:18px;
  padding:10px 12px; border-radius: 14px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.28);
  color: rgba(255,255,255,0.78);
  font-size: 13px;
}
body.stage-ready .loading,
body.revealing .loading{ display:none; }

/* Audio CTA */
.audio-cta{
  position:absolute; right:16px; top:16px;
  width: 330px; max-width: calc(100% - 32px);
  padding: 14px 14px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.22);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 26px 90px rgba(0,0,0,0.42);
  z-index: 30;
}
.audio-cta-title{font-weight:650; letter-spacing:-0.01em;}
.audio-cta-sub{color:var(--muted); font-size:13px; line-height:1.35; margin-top:6px;}
.audio-cta-btn{
  width:100%; margin-top:10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));
  color: rgba(255,255,255,0.92);
  padding: 11px 12px;
  cursor:pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.audio-cta-btn:hover{ background: linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.07)); border-color: rgba(255,255,255,0.20); transform: translateY(-1px); }
.audio-cta-btn:active{ transform: translateY(0px); }

/* Captions — minimal, premium */
.caption{
  position:absolute;
  left:16px; right:16px;
  bottom: 92px;
  padding: 18px 16px 14px;
  border-radius: 18px;
  /* No border and no backdrop-filter here. Both created a hard horizontal edge
     that cut straight across the avatar's neck - it read as a rendering artefact
     on the model rather than as UI. A soft top-fading scrim plus a text shadow
     keeps the captions legible over skin without drawing a line on the face. */
  border: none;
  background: linear-gradient(180deg,
              rgba(0,0,0,0) 0%,
              rgba(0,0,0,0.20) 42%,
              rgba(0,0,0,0.34) 100%);
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.86);
  font-size: 14px;
  line-height: 1.38;
  box-shadow: 0 24px 90px rgba(0,0,0,0.48);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.caption.is-on{ opacity:1; transform: translateY(0); }

/* Composer — minimal, centered focus */
.chat--overlay{
  position:absolute;
  left:16px; right:16px;
  bottom:16px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.14);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  overflow:hidden;
  z-index: 20;
}

.composer{display:flex; gap:10px; padding:12px;}
.composer-input{
  flex:1;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.92);
  outline:none;
}
.composer-input::placeholder{ color: rgba(255,255,255,0.40); }
.composer-input:focus{border-color: rgba(255,255,255,0.22); box-shadow: 0 0 0 4px rgba(255,255,255,0.05);}

.composer-btn{
  width: 104px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));
  color: rgba(255,255,255,0.92);
  cursor:pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.composer-btn:hover{ background: linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.07)); border-color: rgba(255,255,255,0.20); transform: translateY(-1px); }
.composer-btn:active{ transform: translateY(0px); }

/* Splash (extra polish lives in inline critical CSS too) */
.splash{ position: fixed; inset: 0; background: #000; z-index: 200; opacity: 1; transition: opacity 1000ms cubic-bezier(.2,.8,.2,1); }
.splash.is-off{ opacity: 0; pointer-events:none; }
.splash-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:201; }
.splash-inner{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; z-index:202; opacity:1; transition: opacity 520ms ease; }

/* Responsive */
@media (max-width: 940px){
  .audio-cta{ width: min(360px, calc(100% - 32px)); }
  .shell{ width: calc(100% - 14px); padding: 14px 0 18px; }
  .stage{ border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce){
  .stage-frame, .bg::before, body::after, .bg{ animation:none !important; transition:none !important; }
  .composer-btn, .audio-cta-btn{ transition:none !important; }
}