/**
 * VibeCMD — Aurora Visual System v2.0  "MIDNIGHT FURY"
 * =====================================================
 * Bold & Futuristic — unmissable effects, clean code.
 * Disable everything: remove this one <link> tag.
 *
 * Layers:
 *   1. Color Tokens         — dual-accent palette (teal + violet)
 *   2. Aurora Bands          — real aurora borealis flowing bands
 *   3. Film Grain            — cinematic noise texture
 *   4. Glassmorphism Cards   — frosted glass + spinning glow borders
 *   5. Custom Glow Cursor    — teal/violet light follows mouse
 *   6. Scroll Hue Shift      — background shifts as you scroll
 *   7. Neon Hero Text        — glowing pulsing hero headings
 *   8. Holographic Shimmer   — iridescent card hover effect
 *   9. Deep Shadows          — multi-layer 3D depth
 *   10. Scan Line            — subtle CRT scan line sweep
 *
 * Respects prefers-reduced-motion throughout.
 */


/* =============================================
   1. COLOR TOKENS
   ============================================= */
:root {
  --vibe-violet: #8B5CF6;
  --vibe-violet-light: #A78BFA;
  --vibe-violet-dark: #7C3AED;
  --vibe-violet-glow: rgba(139, 92, 246, .35);

  --aurora-gradient: linear-gradient(135deg, #00FFE0, #8B5CF6);
  --aurora-gradient-wide: linear-gradient(135deg, #00FFE0 0%, #00D4AA 25%, #8B5CF6 65%, #A78BFA 100%);
  --aurora-gradient-soft: linear-gradient(135deg, rgba(0,255,224,.15), rgba(139,92,246,.15));

  --glass-bg: rgba(10, 12, 24, .70);
  --glass-bg-hover: rgba(16, 18, 35, .80);
  --glass-border: rgba(255, 255, 255, .06);
  --glass-border-hover: rgba(255, 255, 255, .14);

  --scroll-hue: 0deg;
  --border-angle: 0deg;
}

@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}


/* =============================================
   2. AURORA BOREALIS BANDS
   Real flowing aurora — multiple semi-transparent
   gradient bands that drift and pulse.
   ============================================= */
.aurora-bg {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  overflow: hidden;
  filter: hue-rotate(var(--scroll-hue, 0deg));
  transition: filter .6s ease-out;
  /* Faint glow pools in corners */
  box-shadow:
    -30vw -20vh 80vw 40vw rgba(0, 255, 224, .04),
    30vw 30vh 60vw 30vw rgba(139, 92, 246, .05);
}

/* Band 1 — wide teal sweep, top-left */
.aurora-bg::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 60%;
  top: -20%;
  left: -50%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 255, 224, .06) 20%,
    rgba(0, 255, 224, .12) 40%,
    rgba(0, 212, 170, .08) 60%,
    transparent 80%
  );
  border-radius: 50%;
  mix-blend-mode: screen;
  animation: auroraBand1 20s ease-in-out infinite alternate;
  will-change: transform;
}

/* Band 2 — violet sweep, center-right */
.aurora-bg::after {
  content: '';
  position: absolute;
  width: 180%;
  height: 50%;
  bottom: -10%;
  right: -40%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(139, 92, 246, .05) 25%,
    rgba(139, 92, 246, .14) 45%,
    rgba(124, 58, 237, .08) 65%,
    transparent 85%
  );
  border-radius: 50%;
  mix-blend-mode: screen;
  animation: auroraBand2 25s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes auroraBand1 {
  0%   { transform: translateX(0) translateY(0) rotate(-5deg) scaleY(1); }
  33%  { transform: translateX(8vw) translateY(-5vh) rotate(3deg) scaleY(1.2); }
  66%  { transform: translateX(-5vw) translateY(3vh) rotate(-8deg) scaleY(0.9); }
  100% { transform: translateX(3vw) translateY(-2vh) rotate(5deg) scaleY(1.1); }
}

@keyframes auroraBand2 {
  0%   { transform: translateX(0) translateY(0) rotate(5deg) scaleY(1); }
  33%  { transform: translateX(-6vw) translateY(4vh) rotate(-4deg) scaleY(1.15); }
  66%  { transform: translateX(4vw) translateY(-3vh) rotate(8deg) scaleY(.85); }
  100% { transform: translateX(-2vw) translateY(2vh) rotate(-3deg) scaleY(1.05); }
}


/* =============================================
   3. FILM GRAIN
   ============================================= */
.film-grain {
  position: fixed;
  inset: 0;
  z-index: 901;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mix-blend-mode: overlay;
}


/* =============================================
   4. GLASSMORPHISM + SPINNING GLOW BORDERS
   Every card gets auto glow-border on hover.
   ============================================= */

/* Shared glass base */
.hero-stat-card,
.hero-info-card,
.service-card,
.skill-card,
.ai-tool,
.personal-card,
.cta-card,
.contact-form-card,
.contact-info-card,
.issue-card,
.news-card,
.pricing-card,
.card,
.glass-card,
.blog-card,
.testimonial-card,
.faq-item,
.tech-item {
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--glass-border);
  position: relative;
  overflow: visible;
  transition:
    transform .4s cubic-bezier(.16,1,.3,1),
    box-shadow .4s ease,
    border-color .4s ease,
    background .4s ease;
}

/* Path-cards: glass only, keep custom borders */
.path-card {
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  transition: all .4s cubic-bezier(.16,1,.3,1);
}

/* ━━ Spinning Glow Border (auto on all cards) ━━ */
.hero-stat-card::before,
.hero-info-card::before,
.service-card::before,
.skill-card::before,
.ai-tool::before,
.personal-card::before,
.cta-card::before,
.contact-form-card::before,
.contact-info-card::before,
.issue-card::before,
.news-card::before,
.pricing-card::before,
.card::before,
.glass-card::before,
.blog-card::before,
.testimonial-card::before,
.faq-item::before,
.tech-item::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  z-index: -1;
  background: conic-gradient(
    from var(--border-angle),
    #00FFE0, #00D4AA, #8B5CF6, #A78BFA, #00BFFF, #55EFC4, #00FFE0
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .5s ease;
}

.hero-stat-card:hover::before,
.hero-info-card:hover::before,
.service-card:hover::before,
.skill-card:hover::before,
.ai-tool:hover::before,
.personal-card:hover::before,
.cta-card:hover::before,
.contact-form-card:hover::before,
.contact-info-card:hover::before,
.issue-card:hover::before,
.news-card:hover::before,
.pricing-card:hover::before,
.card:hover::before,
.glass-card:hover::before,
.blog-card:hover::before,
.testimonial-card:hover::before,
.faq-item:hover::before,
.tech-item:hover::before {
  opacity: 1;
  animation: borderSpin 3s linear infinite;
}

@keyframes borderSpin {
  to { --border-angle: 360deg; }
}

/* Hover glass state */
.hero-stat-card:hover,
.hero-info-card:hover,
.service-card:hover,
.skill-card:hover,
.ai-tool:hover,
.personal-card:hover,
.issue-card:hover,
.news-card:hover,
.pricing-card:hover,
.card:hover,
.glass-card:hover,
.blog-card:hover,
.testimonial-card:hover,
.faq-item:hover,
.tech-item:hover {
  border-color: rgba(255, 255, 255, .10);
  background: var(--glass-bg-hover);
}


/* =============================================
   5. CUSTOM GLOW CURSOR
   ============================================= */
.cursor-glow {
  position: fixed;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 899;
  opacity: 0;
  transition: opacity .4s ease;
  background: radial-gradient(
    circle,
    rgba(0, 255, 224, .12) 0%,
    rgba(139, 92, 246, .08) 35%,
    transparent 65%
  );
  transform: translate(-50%, -50%);
  left: var(--cx, -200px);
  top: var(--cy, -200px);
  will-change: left, top;
}

.cursor-glow.active { opacity: 1; }

@media (hover: none), (max-width: 768px) {
  .cursor-glow { display: none; }
}


/* =============================================
   7. NEON HERO TEXT GLOW
   Hero headings pulse with a soft neon glow.
   ============================================= */
.hero h1,
.about-hero h1,
.services-hero h1 {
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-shadow:
    0 0 10px rgba(0, 255, 224, .15),
    0 0 40px rgba(0, 255, 224, .08),
    0 0 80px rgba(139, 92, 246, .06);
}

/* .highlight — animated dual gradient + neon drop-shadow */
.highlight {
  background: var(--aurora-gradient-wide) !important;
  background-size: 300% 100% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: gradientFlow 6s ease infinite;
  filter: drop-shadow(0 0 12px rgba(0, 255, 224, .3))
          drop-shadow(0 0 30px rgba(139, 92, 246, .15));
}

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

/* Section titles — subtle glow */
.section-title {
  letter-spacing: -0.02em;
  text-shadow: 0 0 20px rgba(0, 255, 224, .06);
}

/* Hero subtitles */
.hero-subtitle,
.hero-tagline {
  color: rgba(255, 255, 255, .7);
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.7;
}


/* =============================================
   8. HOLOGRAPHIC CARD SHIMMER
   Iridescent sweep on card hover.
   ============================================= */
.hero-stat-card::after,
.hero-info-card::after,
.service-card::after,
.skill-card::after,
.ai-tool::after,
.personal-card::after,
.cta-card::after,
.issue-card::after,
.news-card::after,
.pricing-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(0, 255, 224, .04) 35%,
    rgba(139, 92, 246, .06) 45%,
    rgba(167, 139, 250, .04) 55%,
    rgba(0, 191, 255, .03) 65%,
    transparent 80%
  );
  background-size: 250% 100%;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}

.hero-stat-card:hover::after,
.hero-info-card:hover::after,
.service-card:hover::after,
.skill-card:hover::after,
.ai-tool:hover::after,
.personal-card:hover::after,
.cta-card:hover::after,
.issue-card:hover::after,
.news-card:hover::after,
.pricing-card:hover::after {
  opacity: 1;
  animation: holoSweep 1.5s ease forwards;
}

@keyframes holoSweep {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}


/* =============================================
   9. DEEP SHADOW SYSTEM
   ============================================= */
.hero-stat-card,
.hero-info-card,
.service-card,
.skill-card,
.ai-tool,
.personal-card,
.cta-card,
.contact-form-card,
.contact-info-card,
.issue-card,
.news-card,
.pricing-card {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, .25),
    0 8px 24px rgba(0, 0, 0, .30),
    0 24px 48px rgba(0, 0, 0, .15),
    0 0 0 1px rgba(255, 255, 255, .03) inset;
}

.hero-stat-card:hover,
.hero-info-card:hover,
.service-card:hover,
.skill-card:hover,
.ai-tool:hover,
.personal-card:hover,
.issue-card:hover,
.news-card:hover,
.pricing-card:hover {
  box-shadow:
    0 4px 8px rgba(0, 0, 0, .30),
    0 16px 48px rgba(0, 0, 0, .35),
    0 0 40px rgba(0, 255, 224, .06),
    0 0 80px rgba(139, 92, 246, .05),
    0 0 0 1px rgba(255, 255, 255, .06) inset;
}

.cta-card:hover,
.pricing-card:hover,
.services-teaser:hover {
  box-shadow:
    0 4px 8px rgba(0, 0, 0, .30),
    0 16px 48px rgba(0, 0, 0, .35),
    0 0 50px rgba(139, 92, 246, .14),
    0 0 100px rgba(0, 255, 224, .08),
    0 0 0 1px rgba(255, 255, 255, .06) inset;
}


/* =============================================
   10. SCAN LINE SWEEP
   A horizontal light beam sweeps the page.
   ============================================= */
.film-grain::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 255, 224, .08) 20%,
    rgba(0, 255, 224, .20) 50%,
    rgba(139, 92, 246, .12) 80%,
    transparent 100%
  );
  z-index: 902;
  pointer-events: none;
  animation: scanLine 8s ease-in-out infinite;
  opacity: 0;
}

@keyframes scanLine {
  0%   { top: -2px; opacity: 0; }
  5%   { opacity: 1; }
  50%  { top: 100vh; opacity: .6; }
  55%  { opacity: 0; }
  100% { top: 100vh; opacity: 0; }
}


/* =============================================
   11. CTA BUTTON ENHANCEMENTS
   ============================================= */
.btn-primary:hover,
.service-btn:hover,
.path-cta:hover,
.btn-primary-about:hover {
  box-shadow:
    0 0 20px rgba(0, 255, 224, .25),
    0 0 50px rgba(139, 92, 246, .18),
    0 0 100px rgba(0, 255, 224, .08);
}

/* Nav pill — glass upgrade */
.vibe-nav {
  background: rgba(10, 12, 22, .85);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border-color: rgba(255, 255, 255, .08);
  box-shadow:
    0 4px 30px rgba(0, 0, 0, .5),
    0 0 50px rgba(139, 92, 246, .04),
    0 0 0 1px rgba(255, 255, 255, .04) inset;
}


/* =============================================
   12. CARD SPOTLIGHT (mouse-reactive glow)
   aurora.js sets --mx, --my as % on each card.
   We layer a radial glow using background-image.
   ============================================= */
.service-card,
.hero-stat-card,
.hero-info-card,
.skill-card,
.ai-tool,
.personal-card,
.cta-card,
.contact-form-card,
.contact-info-card,
.issue-card,
.news-card,
.pricing-card,
.card,
.glass-card,
.blog-card,
.testimonial-card,
.tech-item {
  --mx: 50%;
  --my: 50%;
}

.service-card:hover,
.hero-stat-card:hover,
.hero-info-card:hover,
.skill-card:hover,
.ai-tool:hover,
.personal-card:hover,
.cta-card:hover,
.contact-form-card:hover,
.contact-info-card:hover,
.issue-card:hover,
.news-card:hover,
.pricing-card:hover,
.card:hover,
.glass-card:hover,
.blog-card:hover,
.testimonial-card:hover,
.tech-item:hover {
  background-image:
    radial-gradient(
      600px circle at var(--mx) var(--my),
      rgba(0, 255, 224, .07) 0%,
      rgba(139, 92, 246, .04) 30%,
      transparent 60%
    );
}


/* =============================================
   REDUCED MOTION
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  .aurora-bg::before,
  .aurora-bg::after { animation: none; }
  .cursor-glow { display: none; }
  .aurora-bg { transition: none; }
  .highlight { animation: none; }
  .film-grain::before { animation: none; display: none; }

  .hero-stat-card:hover::before,
  .hero-info-card:hover::before,
  .service-card:hover::before,
  .skill-card:hover::before,
  .ai-tool:hover::before,
  .personal-card:hover::before,
  .cta-card:hover::before,
  .contact-form-card:hover::before,
  .contact-info-card:hover::before,
  .issue-card:hover::before,
  .news-card:hover::before,
  .pricing-card:hover::before,
  .card:hover::before,
  .glass-card:hover::before,
  .blog-card:hover::before,
  .testimonial-card:hover::before,
  .faq-item:hover::before,
  .tech-item:hover::before {
    animation: none;
    opacity: .5;
  }
}


/* =============================================
   TABLET (≤1024px)
   ============================================= */
@media (max-width: 1024px) {
  .cursor-glow { width: 400px; height: 400px; }
  .aurora-bg::before { height: 50%; }
  .aurora-bg::after  { height: 40%; }
}


/* =============================================
   MOBILE (≤768px)
   ============================================= */
@media (max-width: 768px) {
  .aurora-bg::before {
    height: 45%;
    opacity: .6;
    animation-duration: 30s;
  }
  .aurora-bg::after {
    height: 35%;
    opacity: .5;
    animation-duration: 40s;
  }

  .film-grain { opacity: .02; }
  .film-grain::before { display: none; }
  .cursor-glow { display: none; }

  /* Lighter glass for perf */
  .hero-stat-card,
  .hero-info-card,
  .service-card,
  .skill-card,
  .ai-tool,
  .personal-card,
  .cta-card,
  .contact-form-card,
  .contact-info-card,
  .issue-card,
  .news-card,
  .pricing-card,
  .path-card {
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
    backdrop-filter: blur(8px) saturate(1.2);
  }

  /* Simpler shadows */
  .hero-stat-card,
  .hero-info-card,
  .service-card,
  .skill-card,
  .ai-tool,
  .personal-card,
  .cta-card,
  .contact-form-card,
  .contact-info-card,
  .issue-card,
  .news-card,
  .pricing-card {
    box-shadow:
      0 2px 8px rgba(0, 0, 0, .30),
      0 8px 20px rgba(0, 0, 0, .20),
      0 0 0 1px rgba(255, 255, 255, .03) inset;
  }

  /* Disable spinning borders on mobile (perf) */
  .hero-stat-card::before,
  .hero-info-card::before,
  .service-card::before,
  .skill-card::before,
  .ai-tool::before,
  .personal-card::before,
  .cta-card::before,
  .contact-form-card::before,
  .contact-info-card::before,
  .issue-card::before,
  .news-card::before,
  .pricing-card::before,
  .card::before,
  .glass-card::before,
  .blog-card::before,
  .testimonial-card::before,
  .faq-item::before,
  .tech-item::before {
    display: none;
  }

  /* Disable holographic shimmer on mobile */
  .hero-stat-card::after,
  .hero-info-card::after,
  .service-card::after,
  .skill-card::after,
  .ai-tool::after,
  .personal-card::after,
  .cta-card::after,
  .issue-card::after,
  .news-card::after,
  .pricing-card::after {
    display: none;
  }

  .hero h1,
  .about-hero h1,
  .services-hero h1 {
    font-size: clamp(2rem, 8vw, 3rem);
    letter-spacing: -0.02em;
    line-height: 1.12;
    text-shadow:
      0 0 8px rgba(0, 255, 224, .12),
      0 0 30px rgba(0, 255, 224, .05);
  }

  .hero-subtitle,
  .hero-tagline {
    font-size: clamp(0.9rem, 3.5vw, 1.05rem);
    line-height: 1.6;
  }

  .vibe-nav {
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
  }

  .highlight {
    background-size: 200% 100% !important;
  }
}


/* =============================================
   SMALL PHONES (≤480px)
   ============================================= */
@media (max-width: 480px) {
  .hero h1,
  .about-hero h1,
  .services-hero h1 {
    font-size: clamp(1.75rem, 9vw, 2.5rem);
    letter-spacing: -0.01em;
  }

  .hero-subtitle,
  .hero-tagline { font-size: 0.9rem; }

  .aurora-bg::before { opacity: .4; }
  .aurora-bg::after  { opacity: .3; }
  .film-grain { opacity: .015; }
}


/* =============================================
   LARGE DESKTOP (≥1200px)
   ============================================= */
@media (min-width: 1200px) {
  .aurora-bg::before { height: 65%; width: 220%; }
  .aurora-bg::after  { height: 55%; width: 200%; }
  .cursor-glow { width: 700px; height: 700px; }

  .hero h1,
  .about-hero h1 {
    font-size: clamp(3.5rem, 5vw, 5rem);
  }
}


/* =============================================
   ULTRA-WIDE (≥1600px)
   ============================================= */
@media (min-width: 1600px) {
  .aurora-bg::before {
    height: 70%;
    width: 250%;
    opacity: .9;
  }
  .aurora-bg::after {
    height: 60%;
    width: 220%;
    opacity: .8;
  }
}