/* STEVEN ATMOSPHERE 0.1.0
   Purpose: visual continuity between cinematic intro and core UI.
   No layout, API, language, GPS or decision logic changes.
*/

html,
body {
  background:#01050b;
}

#scene {
  background:
    radial-gradient(ellipse at 50% 38%,
      rgba(27,75,110,.17) 0%,
      rgba(17,49,77,.10) 23%,
      rgba(5,18,31,.04) 42%,
      rgba(0,0,0,0) 64%),

    radial-gradient(ellipse at 50% 92%,
      rgba(12,75,80,.075) 0%,
      rgba(5,37,48,.045) 28%,
      rgba(0,0,0,0) 58%),

    radial-gradient(circle at 17% 89%,
      rgba(116,86,44,.022) 0 1.2%,
      rgba(0,0,0,0) 5.5%),

    radial-gradient(circle at 25% 91%,
      rgba(126,92,46,.020) 0 1.0%,
      rgba(0,0,0,0) 5.0%),

    radial-gradient(circle at 76% 90%,
      rgba(112,84,47,.020) 0 1.0%,
      rgba(0,0,0,0) 5.0%),

    radial-gradient(circle at 84% 87%,
      rgba(107,82,48,.018) 0 1.0%,
      rgba(0,0,0,0) 5.0%),

    linear-gradient(180deg,
      #040b16 0%,
      #020812 34%,
      #01060c 64%,
      #000307 100%);

  box-shadow:
    inset 0 -18vh 22vh rgba(0,0,0,.27),
    inset 0 14vh 28vh rgba(0,0,0,.12);
}

/* Keep Steven as the visual anchor; only add a restrained halo. */
#presence {
  filter:
    drop-shadow(0 0 38px rgba(35,83,116,.055))
    drop-shadow(0 0 90px rgba(19,62,91,.032));
}

/* Make the location card feel like part of the same dark glass environment. */
#locationBox {
  background:
    linear-gradient(180deg,
      rgba(7,13,22,.90) 0%,
      rgba(3,8,15,.86) 100%);
  box-shadow:
    0 22px 70px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.018);
}

/* As the conversation starts, reduce atmosphere slightly so attention
   moves toward Steven rather than the background. */
body.started #scene {
  background:
    radial-gradient(ellipse at 50% 40%,
      rgba(23,63,92,.12) 0%,
      rgba(11,35,56,.065) 28%,
      rgba(0,0,0,0) 61%),

    radial-gradient(ellipse at 50% 94%,
      rgba(8,49,56,.045) 0%,
      rgba(0,0,0,0) 54%),

    linear-gradient(180deg,
      #030914 0%,
      #01060d 52%,
      #000205 100%);
}

/* Respect devices/users that prefer reduced visual motion.
   This patch itself is static; rule kept for future-safe behavior. */
@media (prefers-reduced-motion: reduce) {
  #scene,
  #presence {
    transition:none !important;
  }
}

@media (max-width:640px) {
  #scene {
    background:
      radial-gradient(ellipse at 50% 35%,
        rgba(28,76,111,.16) 0%,
        rgba(13,42,67,.08) 28%,
        rgba(0,0,0,0) 60%),

      radial-gradient(ellipse at 50% 95%,
        rgba(9,58,64,.06) 0%,
        rgba(0,0,0,0) 52%),

      linear-gradient(180deg,
        #040b15 0%,
        #01070e 58%,
        #000205 100%);
  }

  #presence {
    filter:
      drop-shadow(0 0 30px rgba(35,83,116,.05))
      drop-shadow(0 0 65px rgba(19,62,91,.025));
  }
}