/* ─── Body ───────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
}

/* Ensure nav/main/footer stack above aurora */
header, main, footer { position: relative; z-index: 1; }

/* ─── Custom Scrollbar ───────────────────────────────────── */
::-webkit-scrollbar        { width: 5px; }
::-webkit-scrollbar-track  { background: var(--color-bg); }
::-webkit-scrollbar-thumb  { background: rgba(160,45,112,0.25); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: rgba(160,45,112,0.45); }

/* ─── Selection ──────────────────────────────────────────── */
::selection {
  background: rgba(246,115,183,0.3);
  color: var(--color-text);
}

/* ─── Typography utilities ───────────────────────────────── */
.text-xs    { font-size: var(--text-xs); }
.text-sm    { font-size: var(--text-sm); }
.text-base  { font-size: var(--text-base); }
.text-lg    { font-size: var(--text-lg); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted     { color: var(--color-text-muted); }

/* ─── Gradient text ──────────────────────────────────────── */
.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Animated shifting gradient — hero ChatGPT highlight */
.gradient-text-anim {
  background: linear-gradient(270deg, #a02d70, #4650b9, #f673b7, #a2aaff, #f7a254, #a02d70);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientFlow 5s ease infinite;
}
@keyframes gradientFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ─── Text Reveal 02 — hidden state ─────────────────────── */
[data-reveal-02] { visibility: hidden; }

/* ─── Hero canvas ────────────────────────────────────────── */
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.75;
  z-index: 0;
}

/* ─── Glass card base ────────────────────────────────────── */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}

/* ─── Aurora Blobs ───────────────────────────────────────── */
.aurora {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(90px);
  opacity: 0.45;
  animation: auroraFloat 18s ease-in-out infinite;
}

/* Pink / rose — top left */
.aurora--1 {
  width: 520px; height: 520px;
  background: var(--color-primary-container);
  top: -180px; left: -140px;
  animation-delay: 0s;
}

/* Lavender / indigo — mid right */
.aurora--2 {
  width: 600px; height: 600px;
  background: var(--color-tertiary-container);
  top: 40%; right: -200px;
  animation-delay: -7s;
}

/* Peach / orange — bottom left */
.aurora--3 {
  width: 380px; height: 380px;
  background: var(--color-secondary-container);
  bottom: 10%; left: 10%;
  animation-delay: -13s;
}

@keyframes auroraFloat {
  0%, 100% { transform: translate(0,   0)   scale(1);    }
  33%       { transform: translate(30px,-35px) scale(1.06); }
  66%       { transform: translate(-25px,25px) scale(0.95); }
}