/* ================================================================
   BASE - CSS variables, reset, body, scrollbar
   Edit this file to change: color scheme, fonts, background orbs
   ================================================================ */

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

:root {
  --ink:    #001020;              /* page background */
  --surf:   #011627;              /* strip / surface areas */
  --dim:    #000B16;              /* input backgrounds */
  --ice:    #80EEC0;              /* brand accent - warm mint */
  --ice2:   rgba(128,238,192,.6); /* muted mint */
  --text:   #D8EDE5;              /* primary text - neutral near-white, barely mint-tinted */
  --muted:  #3A4A44;              /* secondary text, placeholders */
  --err:    #FF7070;              /* error messages */
  --bd:     rgba(128,238,192,.10);/* default border */
  --bd-hi:  rgba(128,238,192,.28);/* highlighted border (hover etc.) */
}

html { height: 100%; }

body {
  min-height: 100%;
  height: 100%;
  background: var(--ink);
  color: var(--text);
  font-family: 'Plus Jakarta Sans', sans-serif;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Aurora band background ────────────────────────────────────── */
.bg-orbs {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Heavy blur means no visible blob boundary — just a living colour wash */
.bg-orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ice) 0%, transparent 65%);
  will-change: transform;
}

/* Wide flat blob — bottom-left */
.bg-orb-1 {
  width: 700px; height: 480px;
  left: -150px; bottom: 0;
  filter: blur(160px);
  opacity: .11;
  animation: blobDrift1 30s ease-in-out infinite;
}

/* Tall slim blob — top-right */
.bg-orb-2 {
  width: 360px; height: 600px;
  right: -100px; top: -80px;
  filter: blur(150px);
  opacity: .09;
  animation: blobDrift2 38s ease-in-out infinite;
  animation-delay: -18s;
}

/* Round blob — mid-left */
.bg-orb-3 {
  width: 440px; height: 440px;
  left: 8%; top: 32%;
  filter: blur(145px);
  opacity: .08;
  animation: blobDrift3 24s ease-in-out infinite;
  animation-delay: -10s;
}

@keyframes blobDrift1 {
  0%, 100% { transform: translate(0,    0   ); }
  33%       { transform: translate(80px, -55px); }
  66%       { transform: translate(45px,  50px); }
}

@keyframes blobDrift2 {
  0%, 100% { transform: translate(0,    0   ); }
  40%       { transform: translate(-65px, 75px); }
  70%       { transform: translate(-30px, -45px); }
}

@keyframes blobDrift3 {
  0%, 100% { transform: translate(0,   0  ); }
  50%       { transform: translate(55px, -40px); }
}

@media (prefers-reduced-motion: reduce) {
  .bg-orb { animation: none; }
}

/* Scrollbar */
::-webkit-scrollbar       { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(128,238,192,.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(128,238,192,.24); }