/* Dark theme helpers and extra animations */
:root {
  --bg: #0a0f1c;
  --bg-soft: #0f172a;
  --panel: #111a2e;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --accent: #22d3ee; /* violet */
  --accent-2: #A5F3FC; /* cyan */
}

html, body { background: var(--bg); }

/* glass panels */
.glass { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); backdrop-filter: blur(10px); }
.glow { box-shadow: 0 12px 44px rgba(58, 153, 237, 0.25); }

/* navbar scrolled state */
.nav-scrolled { box-shadow: 0 10px 30px rgba(0,0,0,.35); background: rgba(10,15,28,.9); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.06); }

/* parallax background freeze */
.parallax { background-attachment: fixed; }

/* reveal variants */
.reveal { opacity: 0; transform: translateY(18px) scale(.98); transition: all .9s cubic-bezier(.16,.8,.25,1), transform .9s; }
.reveal.in-view { opacity: 1; transform: translateY(0) scale(1); }
.reveal-slow { transition-duration: 1.25s; }
.reveal-right { transform: translateX(24px) scale(.98); }
.reveal-right.in-view { transform: translateX(0) scale(1); }
.reveal-scale { transform: scale(.95); }
.reveal-scale.in-view { transform: scale(1); }

/* fancy hover tilt */
.tilt { transform-style: preserve-3d; transform: perspective(900px) rotateX(0) rotateY(0); transition: transform .2s ease; }
.tilt:hover { transform: perspective(900px) rotateX(4deg) rotateY(-5deg) translateY(-2px); }

/* animated gradient border */
.gradient-border {
  position: relative;
  border-radius: 16px;
}
.gradient-border::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: 17px;
  background: conic-gradient(from 180deg at 50% 50%, var(--accent), var(--accent-2), var(--accent));
  filter: blur(8px); opacity: .25;
  z-index: -1;
}

/* hero chunked headline animation */
.hero-chunk { display: inline-block; opacity: 0; transform: translateY(-40px); }
.hero-chunk.show { animation: dropFade .9s cubic-bezier(.16,.8,.25,1) forwards; }
@keyframes dropFade {
  0% { opacity: 0; transform: translateY(-40px) scale(.98); filter: blur(3px); }
  60% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  100% { opacity: 1; }
}

/* subtle animated starfield dots */
.starfield { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.starfield span {
  position: absolute; background: radial-gradient(circle, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 70%);
  width: 2px; height: 2px; border-radius: 9999px; opacity: .7;
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle {
  from { transform: translateY(0) scale(1); opacity: .4; }
  to { transform: translateY(-10px) scale(1.6); opacity: .9; }
}