/* ============================================
   IMMERSIVE HOMEPAGE — layout layer
   Loaded only by index.html, after style.css. The WebGL world lives
   on a fixed canvas at z-index 0; content chapters float above it.
   Falls back to a static gradient (html.no-webgl) on mobile,
   reduced-motion, or when WebGL is unavailable.
   ============================================ */

/* --- Layers --- */
#experience-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

.experience-content {
  position: relative;
  z-index: 1;
}

body {
  background: #04060f;
}

/* Fallback backdrop when the 3D world is off */
html.no-webgl #experience-canvas {
  display: none;
}

html.no-webgl body {
  background:
    radial-gradient(ellipse 70% 55% at 75% 12%, rgba(0, 200, 255, 0.07), transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(139, 92, 246, 0.06), transparent 60%),
    #04060f;
}

/* --- This page stays dark even if the sitewide light theme is on:
       panels float over a dark 3D scene, light text would break --- */
body.light-mode {
  --bg-primary: #04060f;
  --bg-secondary: #090d1d;
  --bg-card: rgba(9, 14, 34, 0.75);
  --bg-card-hover: rgba(13, 20, 48, 0.85);
  --text-primary: #ccd6e8;
  --text-secondary: #8b9cc0;
  --text-heading: #f0f4ff;
  --border-glow: rgba(0, 200, 255, 0.14);
  --neon-cyan: #00c8ff;
}

body.light-mode .navbar {
  border-color: rgba(0, 200, 255, 0.14);
}

body.light-mode .navbar::before {
  background: rgba(6, 9, 20, 0.72);
}

body.light-mode .navbar.scrolled::before {
  background: rgba(6, 9, 20, 0.9);
}

body.light-mode .cap-track span {
  color: rgba(139, 156, 192, 0.75);
}

body.light-mode .cyber-card,
body.light-mode .service-list-item {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0) 34%), var(--bg-card);
  border-color: rgba(148, 178, 255, 0.1);
}

.theme-toggle {
  display: none !important;
}

/* --- Chapters --- */
.chapter {
  position: relative;
  padding: 120px 0;
}

.chapter-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 4px;
  color: var(--neon-cyan);
  opacity: 0.75;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.chapter-tag::after {
  content: '';
  height: 1px;
  width: 56px;
  background: linear-gradient(90deg, var(--neon-cyan), transparent);
}

/* --- Panels: translucent so the world glows through --- */
.glass-panel {
  background: rgba(6, 10, 24, 0.68);
  border: 1px solid rgba(148, 178, 255, 0.12);
  border-radius: 24px;
  padding: clamp(30px, 4.5vw, 60px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

/* --- Hero chapter --- */
.exp-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 130px 0 60px;
  position: relative;
}

/* Flex sections shrink-wrap their .container child; force full width
   so max-width + auto margins behave like everywhere else */
.exp-hero .container,
.exp-finale .container {
  width: 100%;
}

.exp-hero-inner {
  max-width: 640px;
  position: relative;
}

/* Legibility scrim behind hero text, fading into the scene */
.exp-hero-inner::before {
  content: '';
  position: absolute;
  inset: -60px -80px;
  background: radial-gradient(ellipse 100% 100% at 40% 50%, rgba(4, 6, 15, 0.72), transparent 72%);
  z-index: -1;
  pointer-events: none;
}

.exp-scroll-cue {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 4px;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.exp-scroll-cue::after {
  content: '';
  width: 1px;
  height: 44px;
  background: linear-gradient(180deg, var(--neon-cyan), transparent);
  animation: cueDrop 2.2s ease-in-out infinite;
}

@keyframes cueDrop {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  35% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); transform-origin: top; opacity: 0; }
}

/* --- Stats chapter: bare numbers over the void --- */
.exp-stats {
  padding: 40px 0 120px;
}

.exp-stats .stats-grid {
  gap: 40px;
}

/* --- Category grid gets a tighter three-column rhythm on wide screens --- */
@media (min-width: 1200px) {
  .exp-categories .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Final CTA chapter: full-height moment at the end of the flight --- */
.exp-finale {
  min-height: 88vh;
  display: flex;
  align-items: center;
  text-align: center;
}

/* --- Mobile / tablet: the world is off; solid, readable surfaces --- */
@media (max-width: 1023px) {
  #experience-canvas {
    display: none;
  }

  .glass-panel {
    background: rgba(7, 11, 26, 0.92);
  }

  .chapter {
    padding: 72px 0;
  }

  .exp-hero {
    min-height: auto;
    padding: 120px 0 40px;
  }

  .exp-scroll-cue {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .exp-scroll-cue::after {
    animation: none;
  }
}