/* ============================================================================
   ELI TECH — v15-spectacle.css
   Aurora Tech visual layer: glassmorphism, glow, tilt, cursor, typography
   ============================================================================ */

/* ==========================================================================
   SVG GRAIN TEXTURE (cinematic film grain overlay)
   ========================================================================== */
.v15-grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%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)' opacity='0.03'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: 0.4;
}

/* ==========================================================================
   AURORA TECH PALETTE OVERRIDES
   ========================================================================== */
:root {
  --v15-bg: #050510;
  --v15-accent-start: #6366f1;
  --v15-accent-mid: #8b5cf6;
  --v15-accent-end: #ec4899;
  --v15-cyan: #06b6d4;
  --v15-amber: #f59e0b;
  --v15-text: #fafafa;
  --v15-text-dim: rgba(250, 250, 250, 0.6);
  --v15-glass-bg: rgba(15, 21, 48, 0.45);
  --v15-glass-border: rgba(255, 255, 255, 0.08);
  --v15-glass-blur: blur(20px) saturate(180%);
  --v15-gradient: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
  --v15-glow-purple: 0 0 40px rgba(139, 92, 246, 0.30);
  --v15-glow-cyan: 0 0 40px rgba(6, 182, 212, 0.25);
}

html {
  background: var(--v15-bg) !important;
}

body {
  background: var(--v15-bg) !important;
}

/* ==========================================================================
   TYPOGRAPHY — Space Grotesk display + JetBrains Mono
   ========================================================================== */
h1, .h1 {
  font-family: 'Space Grotesk', var(--font);
  font-weight: 700;
  letter-spacing: -0.03em;
}

h1 .v15-char, .h1 .v15-char {
  will-change: transform, opacity;
}

/* ==========================================================================
   GLASSMORPHISM — Enhanced cards
   ========================================================================== */
.v15-glass,
.service-card,
.commit-card,
.method-card,
.trust-signal,
.trust-card,
.contact-card,
.faq-item,
.bento-card {
  background: var(--v15-glass-bg) !important;
  backdrop-filter: var(--v15-glass-blur);
  -webkit-backdrop-filter: var(--v15-glass-blur);
  border: 1px solid var(--v15-glass-border) !important;
  border-radius: 16px;
}

/* ==========================================================================
   EFFECT #5 — 3D TILT CARDS
   ========================================================================== */
.v15-tilt {
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease;
  position: relative;
  overflow: hidden;
}

.v15-tilt::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(99, 102, 241, 0.12),
    transparent 40%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 1;
  border-radius: inherit;
}

.v15-tilt:hover::before {
  opacity: 1;
}

.v15-tilt:hover {
  box-shadow: 0 20px 50px -12px rgba(99, 102, 241, 0.25),
              0 0 0 1px rgba(99, 102, 241, 0.15);
}

/* ==========================================================================
   EFFECT #8 — PROOF COUNTERS NEON GLOW
   ========================================================================== */
.v15-counter {
  text-shadow:
    0 0 10px rgba(139, 92, 246, 0.5),
    0 0 20px rgba(139, 92, 246, 0.3),
    0 0 40px rgba(139, 92, 246, 0.1);
  animation: v15-pulse-glow 3s ease-in-out infinite;
  font-variant-numeric: tabular-nums;
}

@keyframes v15-pulse-glow {
  0%, 100% {
    text-shadow:
      0 0 10px rgba(139, 92, 246, 0.5),
      0 0 20px rgba(139, 92, 246, 0.3),
      0 0 40px rgba(139, 92, 246, 0.1);
  }
  50% {
    text-shadow:
      0 0 20px rgba(139, 92, 246, 0.8),
      0 0 40px rgba(139, 92, 246, 0.5),
      0 0 80px rgba(139, 92, 246, 0.3);
  }
}

/* ==========================================================================
   EFFECT #10 — CUSTOM CURSOR
   ========================================================================== */
.v15-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  pointer-events: none;
  z-index: 10000;
  mix-blend-mode: difference;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.3s;
  margin-left: -8px;
  margin-top: -8px;
  will-change: transform;
}

.v15-cursor--hover {
  width: 48px;
  height: 48px;
  background: rgba(139, 92, 246, 0.5);
  margin-left: -24px;
  margin-top: -24px;
}

.v15-cursor-trail {
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(139, 92, 246, 0.3);
  pointer-events: none;
  z-index: 9999;
  margin-left: -20px;
  margin-top: -20px;
  will-change: transform;
  transition: width 0.3s, height 0.3s, border-color 0.3s;
}

.v15-cursor-trail--hover {
  width: 64px;
  height: 64px;
  margin-left: -32px;
  margin-top: -32px;
  border-color: rgba(99, 102, 241, 0.2);
}

@media (hover: none), (max-width: 768px) {
  .v15-cursor,
  .v15-cursor-trail {
    display: none !important;
  }
}

/* ==========================================================================
   HERO SPHERE CONTAINER
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
}

#heroSphere {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(600px, 80vw);
  height: min(600px, 80vw);
  z-index: 0;
  pointer-events: none;
}

.hero .hero-inner {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   SECTION SOLUTIONS — BENTO GRID (#9)
   ========================================================================== */
.services-grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
}

.services-grid .service-card:first-child {
  grid-row: 1 / 3;
  min-height: 320px;
}

@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr !important;
  }
  .services-grid .service-card:first-child {
    grid-row: auto;
    min-height: auto;
  }
}

/* ==========================================================================
   SERVICE CARDS — Enhanced visual treatment
   ========================================================================== */
.service-card {
  position: relative;
  overflow: hidden;
}

.service-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--v15-gradient);
  opacity: 0;
  transition: opacity 0.4s;
}

.service-card:hover::after {
  opacity: 1;
}

/* ==========================================================================
   PAGE TRANSITION CURTAIN (#6)
   ========================================================================== */
.v15-curtain {
  position: fixed;
  inset: 0;
  z-index: 10001;
  pointer-events: none;
  transform: translateX(-100%);
  will-change: transform;
}

.v15-curtain-inner {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #050510 85%, rgba(99, 102, 241, 0.6) 95%, transparent 100%);
}

/* ==========================================================================
   EYEBROW ENHANCEMENTS
   ========================================================================== */
.eyebrow {
  position: relative;
  overflow: hidden;
}

.eyebrow::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  animation: v15-shimmer 4s ease-in-out infinite;
}

@keyframes v15-shimmer {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

/* ==========================================================================
   BUTTON GLOW ENHANCEMENTS
   ========================================================================== */
.btn-primary {
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
  transition: box-shadow 0.3s, transform 0.3s;
}

.btn-primary:hover {
  box-shadow: 0 8px 30px rgba(99, 102, 241, 0.5),
              0 0 60px rgba(139, 92, 246, 0.2);
  transform: translateY(-2px);
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.6s;
}

.btn-primary:hover::after {
  left: 120%;
}

/* ==========================================================================
   SCROLL-LINKED GRADIENT BORDERS on sections
   ========================================================================== */
.section {
  position: relative;
}

.section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.3), transparent);
}

.section:first-child::before {
  display: none;
}

/* ==========================================================================
   REDUCED MOTION — Kill all spectacle effects
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #auroraCanvas,
  #heroSphere,
  .v15-cursor,
  .v15-cursor-trail,
  .v15-curtain {
    display: none !important;
  }

  .v15-tilt {
    transform: none !important;
  }

  .v15-tilt::before {
    display: none;
  }

  .v15-counter {
    animation: none !important;
  }

  .eyebrow::after,
  .btn-primary::after {
    animation: none !important;
    display: none;
  }
}

/* ==========================================================================
   MOBILE ADJUSTMENTS
   ========================================================================== */
@media (max-width: 768px) {
  #heroSphere {
    width: 70vw;
    height: 70vw;
    opacity: 0.7;
  }

  .v15-tilt {
    transform: none !important;
  }

  .v15-tilt::before {
    display: none;
  }
}

/* Rescue: content must remain visible when animation JS is delayed or unavailable. */
.reveal,
.stagger > * {
  opacity: 1 !important;
  transform: none !important;
}