/* ===== GLOBAL BACKGROUND ===== */
/* Gradient lives on html only — body must be transparent so the canvas shows through */
html {
  background: radial-gradient(circle at 20% 30%, rgba(124, 92, 255, 0.12), transparent 40%),
              radial-gradient(circle at 80% 70%, rgba(45, 226, 230, 0.10), transparent 40%),
              #0B0F1A !important;
  background-attachment: fixed !important;
  animation: gradientShift 20s ease infinite;
}

html:not(.dark) {
  background: radial-gradient(circle at 20% 30%, rgba(108, 77, 255, 0.10), transparent 40%),
              radial-gradient(circle at 80% 70%, #00bfcf14, transparent 40%),
              #F7F9FC !important;
  background-attachment: fixed !important;
}

body {
  background: transparent !important;
}

@keyframes gradientShift {
  0%   { background-position: 20% 30%, 80% 70%; }
  50%  { background-position: 25% 35%, 75% 65%; }
  100% { background-position: 20% 30%, 80% 70%; }
}

/* ===== SECTIONS FLOAT ABOVE GRADIENT ===== */
.section {
  background: transparent !important;
}

/* ===== CARDS — DARK MODE ===== */
.card,
.shadow {
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
}

/* ===== CARDS — LIGHT MODE ===== */
body:not(.dark) .card,
body:not(.dark) .shadow {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ===== ACCENT COLORS ===== */
a {
  color: #7C5CFF;
}

a:hover {
  color: #2DE2E6;
}

.btn-primary {
  background: linear-gradient(135deg, #7C5CFF, #2DE2E6) !important;
  border: none !important;
}

.btn-primary:hover {
  opacity: 0.9;
}

/* ===== ENSURE PAGE CONTENT SITS ABOVE CANVAS (z-index 0) ===== */
/* .light > * forces background-color on all direct body children — override for canvas and content */
#content,
#harmonograph-bg {
  background-color: transparent !important;
}

#content {
  position: relative;
  z-index: 1;
}

#hero {
  position: relative;
  z-index: 2;
}

/* ===== CONTACT BUTTON ===== */
.dark #contact .btn {
  color: #0B0F1A !important;
}

/* ===== SECTION TITLE COLORS ===== */
#creativeprojects h3 {
  color: var(--text-secondary-color) !important;
}

/* ===== ABOUT ME — FROSTED GLASS BOX ===== */
#about .content {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 2rem 2.5rem;
}

html:not(.dark) #about .content {
  background: rgba(255, 255, 255, 0.78);
}

/* ===== UNIFY CARD BACKGROUNDS TO MATCH CREATIVE PROJECTS ===== */
#projects .card,
#education .card *,
#achievements .card,
#achievements .card-text,
#experience .experience-container {
  background-color: var(--secondary-background-color) !important;
}

.dark #projects .card,
.dark #education .card *,
.dark #achievements .card,
.dark #achievements .card-text,
.dark #experience .experience-container {
  background-color: var(--secondary-background-color-dark) !important;
}