/* base.css — global resets, typography, core background and animations */
@import url('variables.css');

* { box-sizing: border-box; }

body {
  background-image: linear-gradient(
    40deg,
    hsl(269deg 85% 20%) 0%,
    hsl(259deg 80% 25%) 14%,
    hsl(250deg 75% 28%) 29%,
    hsl(246deg 70% 22%) 45%,
    hsl(245deg 60% 12%) 63%,
    hsl(250deg 50% 3%) 79%,
    hsl(269deg 60% 5%) 92%,
    hsl(288deg 70% 6%) 100%
  );
  background-size: 200% 200%;
  animation: gradientShift 12s ease infinite;
  margin: 0;
  font-family: var(--font-sans);
  color: var(--dark-text);
  transition: background 0.4s, color 0.4s;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Heading gradient text effect */
h2, h3 {
  background: linear-gradient(90deg, #c084fc, #8b5cf6, #c084fc);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShine 3s linear infinite;
}

@keyframes gradientShine { 
    to { 
      background-position: 200% center; 
    } 
}

/* Reveal helper used site-wide */
.reveal { 
    opacity: 0;
    transform: translateY(60px); 
    transition: opacity 0.8s ease, transform 0.8s ease; 
}

.reveal.visible { 
    opacity: 1; 
    transform: translateY(0); 
}

html { 
    scroll-behavior: smooth; 
    scroll-padding-top: 100px; 
}

/* Utility helpers */
.container { 
    width: min(1200px, 94%); 
    margin-inline: auto; 
}

.hidden { 
    display: none !important; 
}