/* ============================================================
   THEME: Antariksha (अंतरिक्ष — "cosmos / outer space")
   Dark, atmospheric. Gold mantra rings + pulsing circuit traces +
   a drifting DNA helix over a nebula/starfield — hi-tech meets
   spiritual, grounded by the circuit and helix motifs.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --void: #0A0704;
  --void-deep: #050301;
  --cream: #F5ECD7;
  --cream-dim: #C9BBA0;
  --ink: #1A0A00;
  --terracotta: #FF8A5C;
  --gold: #E8A83D;
  --gold-light: #F5C776;
  --gold-deep: #C98A28;
  --logo-blue: #3FD0E8;
  --logo-blue-dim: #1C6E82;
  --logo-purple: #B389D6;
  --muted: #8A7A5E;
}

html, body {
  height: 100%;
  overscroll-behavior: none;
}

body {
  background: var(--void);
  color: var(--cream);
  font-family: 'Cardo', Georgia, serif;
  overflow: hidden;
}

.stage {
  height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  position: relative;
  overflow: hidden;
}

/* ── AMBIENT SCENE ── */

.void-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 42%, rgba(232,168,61,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 80% 70% at 50% 50%, var(--void) 0%, var(--void-deep) 100%);
}

/* Nebula clouds — soft, slow-drifting color blooms like the reference:
   teal/blue on one side, gold/amber on the other, faint purple between */
.nebula {
  position: absolute;
  inset: -10%;
  z-index: 0;
  background:
    radial-gradient(ellipse 45% 38% at 24% 28%, rgba(63,208,232,0.22) 0%, transparent 70%),
    radial-gradient(ellipse 40% 34% at 74% 66%, rgba(232,168,61,0.20) 0%, transparent 70%),
    radial-gradient(ellipse 32% 28% at 66% 22%, rgba(179,137,214,0.15) 0%, transparent 70%),
    radial-gradient(ellipse 36% 30% at 20% 74%, rgba(255,138,92,0.10) 0%, transparent 70%);
  filter: blur(6px);
  animation: nebula-drift 50s ease-in-out infinite alternate;
}

@keyframes nebula-drift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-1.5%, 1.5%) scale(1.06); }
}

/* Starfield — two tiled layers of small dots at different densities,
   twinkling independently for depth */
.stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: repeat;
}

.stars-a {
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px at 32% 62%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 58% 12%, #fff, transparent),
    radial-gradient(1px 1px at 74% 44%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 88% 78%, #fff, transparent),
    radial-gradient(1px 1px at 6% 84%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 46% 90%, #fff, transparent),
    radial-gradient(1px 1px at 92% 20%, #fff, transparent);
  background-size: 340px 340px;
  opacity: 0.55;
  animation: twinkle-a 5s ease-in-out infinite;
}

.stars-b {
  background-image:
    radial-gradient(1px 1px at 20% 30%, var(--logo-blue), transparent),
    radial-gradient(1.4px 1.4px at 66% 50%, #fff, transparent),
    radial-gradient(1px 1px at 40% 76%, var(--gold-light), transparent),
    radial-gradient(1.2px 1.2px at 82% 10%, #fff, transparent),
    radial-gradient(1px 1px at 10% 60%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 96% 62%, #fff, transparent);
  background-size: 480px 480px;
  opacity: 0.4;
  animation: twinkle-b 7s ease-in-out infinite 1.5s;
}

@keyframes twinkle-a {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.75; }
}

@keyframes twinkle-b {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.55; }
}

/* Concentric mantra rings */
.mantra-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(62vw, 420px);
  height: min(62vw, 420px);
  transform: translate(-50%, -50%);
  z-index: 0;
  fill: var(--gold);
  opacity: 0.32;
}

.ring-text {
  font-family: 'Cardo', Georgia, serif;
  letter-spacing: 0.05em;
}

.ring-text.a { font-size: 13px; fill: var(--gold-light); animation: spin-ring 90s linear infinite; }
.ring-text.b { font-size: 11px; fill: var(--logo-blue); opacity: 0.7; animation: spin-ring-rev 70s linear infinite; }
.ring-text.c { font-size: 10px; fill: var(--gold); opacity: 0.6; animation: spin-ring 50s linear infinite; }

@keyframes spin-ring {
  from { transform: rotate(0deg); transform-origin: 300px 300px; }
  to { transform: rotate(360deg); transform-origin: 300px 300px; }
}
@keyframes spin-ring-rev {
  from { transform: rotate(360deg); transform-origin: 300px 300px; }
  to { transform: rotate(0deg); transform-origin: 300px 300px; }
}

/* Circuit traces, grounding the mysticism in tech */
.circuits {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(120vw, 900px);
  height: min(120vw, 900px);
  transform: translate(-50%, -50%);
  z-index: 0;
  fill: none;
}

.circuit-group path {
  stroke: var(--logo-blue-dim);
  stroke-width: 1;
  opacity: 0.55;
}

.circuit-group circle {
  fill: var(--logo-blue);
  opacity: 0.8;
  animation: node-blink 3s ease-in-out infinite;
}

.circuit-group circle:nth-child(8) { animation-delay: 0.4s; }
.circuit-group circle:nth-child(9) { animation-delay: 0.9s; }
.circuit-group circle:nth-child(10) { animation-delay: 1.4s; }
.circuit-group circle:nth-child(11) { animation-delay: 1.9s; }
.circuit-group circle:nth-child(12) { animation-delay: 2.4s; }

@keyframes node-blink {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* Drifting DNA-style helix — grounded, organic thread */
.helix {
  position: absolute;
  top: 0;
  left: 4%;
  height: 120%;
  width: 70px;
  z-index: 0;
  opacity: 0.4;
  fill: none;
  animation: helix-drift 26s ease-in-out infinite;
}

.helix-strand {
  stroke: var(--logo-purple);
  stroke-width: 1.4;
}

.helix-rung {
  stroke: var(--logo-blue);
  stroke-width: 1;
  opacity: 0.6;
}

@keyframes helix-drift {
  0%, 100% { transform: translateY(-4%) rotate(0deg); }
  50% { transform: translateY(4%) rotate(0.5deg); }
}

/* Mech wordmark, drifting through the scene like a distant ship — kept
   large and faint so it reads as ambient texture, never a "logo" you
   consciously notice. mix-blend-mode knocks out its black background
   against the dark stage so no visible box/edge is ever visible. */
.mech-drift {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140vw;
  max-width: none;
  z-index: 0;
  opacity: 0.1;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: mech-drift 100s linear infinite, mech-flicker 16s linear infinite;
}

/* Rare neon-tube flicker — saturate() only touches the glow (the
   greyscale metal has near-zero saturation to begin with, so it barely
   moves) while the blue/purple/orange neon lines flare and dim like an
   unstable tube light. No opacity/brightness change, so the metal skin
   stays put and only the colored glow flickers. */
@keyframes mech-flicker {
  0%, 22%, 22.3%, 22.9%, 61%, 61.3%, 61.8%, 100% { filter: saturate(1); }
  22.1% { filter: saturate(2.6); }
  22.6% { filter: saturate(0.2); }
  61.15% { filter: saturate(2.2); }
  61.55% { filter: saturate(0.3); }
}

@keyframes mech-drift {
  0%   { transform: translate(-70%, -55%) rotate(-1.5deg) scale(1); }
  25%  { transform: translate(-45%, -48%) rotate(0.5deg) scale(1.03); }
  50%  { transform: translate(-30%, -52%) rotate(1.5deg) scale(1); }
  75%  { transform: translate(-52%, -58%) rotate(-0.5deg) scale(1.03); }
  100% { transform: translate(-70%, -55%) rotate(-1.5deg) scale(1); }
}

/* Drifting light motes — incense-smoke feel, not confetti */
.motes {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.motes span {
  position: absolute;
  bottom: -5%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,199,118,0.95) 0%, transparent 70%);
  animation: rise-drift linear infinite;
}

.motes span:nth-child(1) { left: 8%; animation-duration: 22s; animation-delay: 0s; }
.motes span:nth-child(2) { left: 20%; animation-duration: 28s; animation-delay: 4s; width: 3px; height: 3px; }
.motes span:nth-child(3) { left: 35%; animation-duration: 25s; animation-delay: 8s; }
.motes span:nth-child(4) { left: 55%; animation-duration: 32s; animation-delay: 2s; width: 3px; height: 3px; }
.motes span:nth-child(5) { left: 68%; animation-duration: 24s; animation-delay: 10s; }
.motes span:nth-child(6) { left: 80%; animation-duration: 30s; animation-delay: 6s; width: 3px; height: 3px; }
.motes span:nth-child(7) { left: 90%; animation-duration: 27s; animation-delay: 12s; }
.motes span:nth-child(8) { left: 95%; animation-duration: 20s; animation-delay: 3s; width: 3px; height: 3px; background: radial-gradient(circle, rgba(63,208,232,0.9) 0%, transparent 70%); }

@keyframes rise-drift {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.4; }
  100% { transform: translate(20px, -100vh); opacity: 0; }
}

/* Clean dark fade behind the readable text zone, so mandala/circuit
   detail can stay rich higher up without clashing with the exchange
   text and whisper input */
.text-vignette {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 78%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, rgba(10,7,4,0.45) 14%, rgba(10,7,4,0.78) 28%, rgba(10,7,4,0.92) 42%, rgba(10,7,4,0.98) 58%, var(--void) 100%);
}

/* ── PHOTO ── */
.photo-wrap {
  position: relative;
  width: clamp(150px, 26vh, 260px);
  height: clamp(150px, 26vh, 260px);
  flex-shrink: 0;
  margin-bottom: 1.75rem;
  z-index: 2;
  transition: width 0.5s ease, height 0.5s ease, margin 0.5s ease;
}

.halo {
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,168,61,0.55) 0%, rgba(232,168,61,0.12) 45%, transparent 72%);
  filter: blur(4px);
  animation: halo-breathe 5s ease-in-out infinite;
}

@keyframes halo-breathe {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

.photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  border: 2px solid var(--gold);
  background: var(--void);
  box-shadow: 0 0 40px rgba(232,168,61,0.25);
}

.photo-wrap.thinking .halo {
  animation: halo-think 1.3s ease-in-out infinite;
}

@keyframes halo-think {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.18); }
}

/* Faster, more energetic than "thinking" — reacts to Zee's voice
   while an utterance is actually playing */
.photo-wrap.speaking .halo {
  animation: halo-speak 0.5s ease-in-out infinite;
}

@keyframes halo-speak {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

.photo-wrap.shrunk {
  width: clamp(76px, 12vh, 108px);
  height: clamp(76px, 12vh, 108px);
  margin-bottom: 1.25rem;
}

/* ── EXCHANGE (replaces chat bubbles) ── */
.exchange {
  width: 100%;
  max-width: 620px;
  min-height: clamp(90px, 16vh, 140px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  z-index: 2;
  text-align: center;
  padding: 0 0.5rem;
}

.line {
  font-family: 'Cardo', Georgia, serif;
  line-height: 1.6;
  opacity: 0;
}

.line.prev {
  font-size: 0.8rem;
  color: var(--muted);
  transform: translateY(0) scale(0.94);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.line.prev.show {
  opacity: 0.55;
}

.line.prev.fade-out {
  opacity: 0 !important;
  transform: translateY(-14px) scale(0.9);
}

.line.current {
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
}

.line.current.question {
  color: var(--terracotta);
  font-style: italic;
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
}

.line.current.answer {
  color: var(--cream);
  font-weight: 500;
}

.line.ink-in {
  animation: ink-settle 0.9s ease forwards;
}

@keyframes ink-settle {
  from { opacity: 0; filter: blur(3px); transform: translateY(6px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}

/* ── WHISPER INPUT ── */
.whisper {
  width: 100%;
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-bottom: 1px solid rgba(232,168,61,0.3);
  padding: 0.5rem 0.25rem;
  margin-top: 1.5rem;
  z-index: 2;
  transition: border-color 0.3s ease;
}

.whisper:focus-within {
  border-color: var(--gold);
}

.whisper input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  text-align: center;
  font-family: 'Cardo', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--cream);
}

.whisper input::placeholder { color: var(--cream-dim); opacity: 0.55; }

.whisper button {
  border: none;
  background: none;
  color: var(--gold);
  font-size: 1.15rem;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, transform 0.2s;
}

.whisper button:hover {
  color: var(--terracotta);
  transform: scale(1.15) rotate(90deg);
}

@media (max-width: 480px) {
  .stage { padding: 1.5rem 1rem; }
  .exchange { min-height: clamp(80px, 20vh, 120px); }
  .helix { width: 46px; opacity: 0.28; }
  .mech-drift { width: 220vw; opacity: 0.08; }
}

@media (prefers-reduced-motion: reduce) {
  .ring-text, .helix, .motes span, .halo, .circuit-group circle, .nebula, .stars-a, .stars-b, .mech-drift {
    animation: none !important;
  }
}