:root{
  --bg:#0e0e0e; --text:#fff; --muted:#b8b8b8;
  --glass:rgba(255,255,255,.06); --ring:rgba(255,255,255,.12);
  --maxw:1200px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  background:
    radial-gradient(80% 60% at 50% 0%, #1a1a1a 0%, #0b0b0b 60%, #000 100%),
    radial-gradient(1200px 400px at 50% 100%, rgba(255,255,255,.03) 0, rgba(255,255,255,0) 60%);
  background-repeat:no-repeat; background-size:cover, cover; background-position:center top, center bottom;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
}
.topbar{
  position:sticky; top:0; z-index:10; height:48px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; background:rgba(0,0,0,.5); backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--ring);
}
.brand-left {
  font-weight:600;
  letter-spacing:.2px;
}

/* Hide nav menu (Sign Up, Features) for now */
.nav-center {
  display:none !important;
  gap:24px;
}
.nav-center a {
  color:var(--muted);
  text-decoration:none;
}

/* Keep the icons container visible */
.icons-right {
  display:flex;
  gap:10px;
}

/* Hide only the first icon (profile) */
.icons-right .icon:first-child {
  display: none !important;
}

.icon {
  background:transparent;
  border:0;
  color:#cfcfcf;
  font-size:18px;
  cursor:pointer;
}



.hero{
  min-height:calc(100dvh - 48px);
  max-width:var(--maxw);
  margin:0 auto; padding:40px 16px 80px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center;
}
.title{font-size:56px; font-weight:700; margin:24px 0 8px}
.tag{font-size:28px; color:#e9e9e9; margin:0 0 6px}
.subtag{font-size:16px; color:var(--muted); margin:0 0 40px}

/* =========================
   AURA BUTTON (MP4 ORB)
   ========================= */
.aura-btn{
  display:inline-grid; place-items:center;
  width:240px; height:240px; border-radius:50%;
  border:1px solid var(--ring);
  cursor:pointer; transition:transform .2s ease;
  overflow:hidden;
}
.aura-btn:hover{
  transform:translateY(-2px);
}

/* Orb video fills the button */
#auraButton #serel-orb{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:50%;
  background-color: transparent !important;

  /* Prevent dragging/selection on the orb video */
  -webkit-user-drag:none;
  user-select:none;
  pointer-events:none;
}

/* No glow/filters on states */
#auraButton.idle #serel-orb,
#auraButton.speaking #serel-orb,
#auraButton.recording #serel-orb{
  filter:none;
  box-shadow:none;
}

/* PNG fallback */
.aura-btn img{
  width:88%; height:88%; object-fit:contain; display:block;
  pointer-events:none;
  -webkit-user-drag:none;
}

/* Chat input */
.chat-input{
  margin-top:34px; display:flex; align-items:center; gap:8px;
  background:var(--glass); border:1px solid var(--ring);
  border-radius:999px; padding:8px 10px; width:min(520px, 90vw);
}
.chat-input input{
  flex:1; background:transparent; border:0; color:#eaeaea; padding:10px 14px; outline:none;
}
.chat-input button{
  background:#1d1d1d; border:1px solid var(--ring); border-radius:999px;
  padding:10px 16px; color:#eaeaea; cursor:pointer;
}

/* MOBILE */
@media (max-width: 767px){
  .topbar{background:transparent; border-bottom:0}
  .title{font-size:48px; margin-top:12px}
  .tag,.subtag{display:none}
  .chat-input{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); width:82vw}
}

/* DESKTOP */
@media (min-width: 1024px){
  body{
    background-image:
      radial-gradient(80% 60% at 50% 0%, rgba(36,36,36,.8) 0%, rgba(10,10,10,1) 60%, #000 100%),
      url("/static/assets/web_home_bg.png");
  }
  .nav-center{display:flex}
  .hero{padding-top:72px}
  .aura-btn{width:300px; height:300px}
}

/* FINAL background layering */
body {
  background:
    url("/static/assets/web_home_bg.png") center bottom / cover no-repeat,
    radial-gradient(80% 60% at 50% 0%,
      rgba(36,36,36,0.25) 0%,
      rgba(10,10,10,0.85) 60%,
      #000 100%);
}

/* Fill mobile viewport */
html, body { height: 100%; }
:root { --vh: 1dvh; }
body {
  min-height: calc(100 * var(--vh));
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  background-color: #000;
}

/* iPhone safe area */
.chat-input {
  margin-bottom: max(24px, env(safe-area-inset-bottom));
}

/* Prevent orb drag/selection */
.aura-btn,
.aura-btn *{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* Recording state — no glow */
.aura-btn.recording{
  box-shadow:none;
  transform:scale(1.02);
}

/* Smooth transforms / color shifts */
#auraButton { transition: transform 420ms cubic-bezier(0.37, 0, 0.63, 1); }
#serel-orb  {  transition: filter 240ms linear, transform 420ms cubic-bezier(0.37, 0, 0.63, 1); }

/* Listening (user is recording) */
#auraButton.recording {
  transform: scale(1.12); /* ~12% bigger */
}

/* Thinking (recording stopped, waiting on AI) */
#auraButton.thinking #serel-orb {
  /* quick color shift; tweak angle/sat to taste */
  filter: hue-rotate(165deg) saturate(1.15);
}

/* Speaking (TTS playing): back to normal colors, normal size */
#auraButton.speaking {
  transform: none;
}
#auraButton.speaking #serel-orb {
  filter: none;
}


/* Toggle button */
.chat-toggle {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.1);
  border: 1px solid var(--ring);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  z-index: 50;
}

/* Chat panel (hidden by default) */
.chat-panel {
  display: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 16px;
  background: rgba(0,0,0,0.85);
  border-top: 1px solid var(--ring);
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
}

/* Show when toggled */
.chat-panel.open {
  display: flex;
}

/* --- Initial Home Screen Background --- */
#page-bg {
  position: fixed;
  inset: 0;
  background-image: url("/static/assets/hom-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
  pointer-events: none;
  filter: brightness(0.9);
  animation: bg-fade 0.6s ease-out;
}

#page-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,.32));
}

/* --- Mobile app initial home background (chat.html) --- */
#page-bg{
  position: fixed;
  inset: 0;
  background-image: url("/static/assets/hom-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;              /* sits behind the UI */
  pointer-events: none;     /* never blocks taps */
  filter: brightness(0.9);  /* keep UI readable on top */
  animation: bg-fade 0.6s ease-out;
}

/* gentle readability overlay; tweak alpha if text is hard to read */
#page-bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,.32));
}

@keyframes bg-fade { from { opacity: 0; } to { opacity: 1; } }

/* If you only want this on narrow/mobile screens, uncomment:
@media (min-width: 768px){
  #page-bg{ display:none; }
}
*/