/* ============================================
   SONIC COMPOSITES - MAIN STYLESHEET
   Master import file — load order matters
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

@import url('reset.css');
@import url('variables.css');
@import url('colors.css');
@import url('layout.css');
@import url('components.css');
@import url('responsive.css');

/* ── Hero Stars Animation ── */
.star {
  position: absolute;
  border-radius: 50%;
  background: #FFFFFF;
  animation: twinkle var(--star-duration, 3s) ease-in-out infinite;
  opacity: 0;
}

@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: var(--star-opacity, 0.8); transform: scale(1); }
}

/* ── Shooting Stars ── */
.shooting-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #FFFFFF;
  border-radius: 50%;
  opacity: 0;
  animation: shoot var(--shoot-duration, 2s) ease-in-out infinite;
}

.shooting-star::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 1px;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.6), transparent);
  transform-origin: right;
}

@keyframes shoot {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(-45deg);
  }
  5% {
    opacity: 1;
  }
  15% {
    opacity: 0;
    transform: translate(-300px, 300px) rotate(-45deg);
  }
  100% {
    opacity: 0;
    transform: translate(-300px, 300px) rotate(-45deg);
  }
}

/* ── Ambient Glow Orbs (Hero) ── */
.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.15;
  z-index: 0;
  animation: pulse-glow 8s ease-in-out infinite alternate;
}

.hero__glow--blue {
  width: 450px;
  height: 450px;
  background: var(--color-accent-secondary);
  top: 20%;
  left: 10%;
}

.hero__glow--orange {
  width: 200px;
  height: 200px;
  background: var(--color-accent-primary);
  bottom: 10%;
  right: 10%;
  animation-delay: 4s;
}

@keyframes pulse-glow {
  0% { opacity: 0.08; transform: scale(1); }
  100% { opacity: 0.2; transform: scale(1.15); }
}

/* ── Section Accent Lines ── */
.section--accent-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 2px;
  background: var(--color-gradient-accent);
}

/* Light theme hero adjustments */
[data-theme="light"] .hero {
  background: linear-gradient(180deg, #0A0E1A 0%, #0F1428 60%, #1a2040 100%);
}

[data-theme="light"] .hero .hero__title,
[data-theme="light"] .hero .hero__tagline {
  color: #F8FAFC;
}

[data-theme="light"] .hero .hero__tagline {
  color: #94A3B8;
}

[data-theme="light"] .hero .btn--secondary {
  color: #F8FAFC;
  border-color: rgba(248, 250, 252, 0.3);
}

[data-theme="light"] .hero .btn--secondary:hover {
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

/* Light theme nav — dark blue background so white logo is visible */
[data-theme="light"] .nav {
  border-bottom-color: rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .nav__link {
  color: #94A3B8;
}

[data-theme="light"] .nav__link:hover,
[data-theme="light"] .nav__link:focus-visible {
  color: #F8FAFC;
}

[data-theme="light"] .theme-toggle {
  color: #94A3B8;
  border-color: rgba(248, 250, 252, 0.15);
}

[data-theme="light"] .theme-toggle:hover {
  color: #FF6B00;
  border-color: #FF6B00;
  background: rgba(255, 107, 0, 0.1);
}

[data-theme="light"] .hamburger__line {
  background: #F8FAFC;
}

/* Light theme footer text always light */
[data-theme="light"] .footer {
  color: #F8FAFC;
}

[data-theme="light"] .footer .footer__brand-text,
[data-theme="light"] .footer .footer__col-link,
[data-theme="light"] .footer .footer__contact-note {
  color: #94A3B8;
}

[data-theme="light"] .footer .footer__col-link:hover {
  color: #FF6B00;
}

[data-theme="light"] .footer .footer__bottom {
  color: var(--color-bg-tertiary);
}