/* ==========================================================================
   LineageLens — Cinematic Motion Layer
   ========================================================================== */

/* 1 · GLOBAL REVEAL SYSTEM
   ========================================================================== */

[data-reveal] {
  /* Default: fade up 32px */
  opacity: 0;
  transform: translateY(32px);
  will-change: opacity, transform;
  transition: opacity 900ms cubic-bezier(.2,.7,.2,1), transform 900ms cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal="fade"] {
  transform: none;
}

[data-reveal="scale"] {
  transform: scale(0.94);
}

[data-reveal="slide-left"] {
  transform: translateX(-48px);
}

[data-reveal="slide-right"] {
  transform: translateX(48px);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1) translateX(0);
}

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal][class], .lift, .btn-glow {
    transition: opacity 300ms ease !important;
    transform: none !important;
    animation: none !important;
  }
}

/* 2 · CINEMATIC HERO
   ========================================================================== */

.hero-cinematic {
  position: relative;
  overflow: hidden;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 0;
}

/* Background Layers */
.hero-bg-layer {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
  will-change: transform;
}

.hero-pulse-1 {
  background: radial-gradient(circle at 30% 40%, rgba(88,166,255,0.15) 0%, transparent 60%);
  animation: pulseBg 14s ease-in-out infinite alternate;
}

.hero-pulse-2 {
  background: radial-gradient(circle at 70% 60%, rgba(163,113,247,0.12) 0%, transparent 50%);
  animation: pulseBg 17s ease-in-out infinite alternate-reverse;
}

.hero-pulse-3 {
  background: radial-gradient(circle at 50% 20%, rgba(63,185,80,0.08) 0%, transparent 70%);
  animation: pulseBg 12s ease-in-out infinite alternate;
}

@keyframes pulseBg {
  0% { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(1.1); opacity: 0.8; }
}

/* Drifting Grid Overlay */
.hero-grid {
  position: absolute;
  inset: -50%;
  z-index: 0;
  background-image: 
    linear-gradient(var(--border-muted) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-muted) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 10%, transparent 60%);
  animation: driftGrid 28s linear infinite;
  pointer-events: none;
  opacity: 0.5;
}

@keyframes driftGrid {
  0% { transform: translate(0, 0); }
  100% { transform: translate(56px, 56px); }
}

/* Floating Particles */
.particle {
  position: absolute;
  bottom: -20px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}

@keyframes floatParticle {
  0% { transform: translateY(0) scale(0.8); opacity: 0; }
  20% { opacity: 0.8; }
  80% { opacity: 0.8; }
  100% { transform: translateY(-100vh) scale(1.2); opacity: 0; }
}

/* Typing Headline */
.typing-caret {
  display: inline-block;
  width: 1ch;
  height: 1.1em;
  background: currentColor;
  vertical-align: middle;
  margin-left: 2px;
  animation: blinkCaret 1s step-end infinite;
}

@keyframes blinkCaret {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.headline-gradient {
  background: linear-gradient(135deg, #fff 0%, var(--solo) 50%, var(--ent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px rgba(88,166,255,0.2));
}

/* Scroll Hint */
.scroll-hint {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 2;
  opacity: 0.7;
}

.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--text-muted), transparent);
  animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  30% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  70% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* 3 · INTERACTIVE GRAPH
   ========================================================================== */

.graph-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.graph-node {
  opacity: 0;
  transform: scale(0.6);
  transform-origin: center;
}

.graph-node.is-active {
  opacity: 1;
  transform: scale(1);
  transition: transform 600ms cubic-bezier(.34,1.56,.64,1), opacity 400ms ease;
}

.graph-halo {
  animation: pulseHalo 3s ease-in-out infinite alternate;
  transform-origin: center;
}

@keyframes pulseHalo {
  0% { transform: scale(1); opacity: 0.3; }
  100% { transform: scale(1.4); opacity: 0; }
}

.graph-edge {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  opacity: 0;
}

.graph-edge.is-active {
  opacity: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1200ms cubic-bezier(.2,.7,.2,1), opacity 400ms ease;
}

/* 4 · SCROLL-SCRUBBED CODE DEMO
   ========================================================================== */

.scrubber-code-line {
  padding: 2px 16px;
  margin: 0 -16px;
  border-left: 2px solid transparent;
  transition: all 500ms ease;
}

.scrubber-code-line.is-active {
  background: color-mix(in oklab, var(--solo) 15%, transparent);
  border-left-color: var(--solo);
  box-shadow: inset 24px 0 24px -24px color-mix(in oklab, var(--solo) 40%, transparent);
}

.scrubber-code-ai {
  position: relative;
}

.scrubber-code-ai::before {
  content: '';
  position: absolute;
  top: 0; left: -16px; bottom: 0; width: 2px;
  background: var(--ent);
  animation: pulseAiBorder 2s infinite alternate;
}

@keyframes pulseAiBorder {
  0% { box-shadow: 0 0 4px var(--ent); opacity: 0.6; }
  100% { box-shadow: 0 0 12px var(--ent); opacity: 1; }
}

.scrubber-step {
  opacity: 0.3;
  transform: translateX(-16px);
  transition: all 600ms cubic-bezier(.2,.7,.2,1);
}

.scrubber-step.is-active {
  opacity: 1;
  transform: translateX(0);
}

/* 5 · BUTTON MICRO-INTERACTIONS
   ========================================================================== */

.btn-glow {
  position: relative;
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.btn-glow:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 0 0 4px color-mix(in oklab, var(--accent, var(--solo)) 18%, transparent);
}

.btn-glow:active {
  transform: translateY(0);
}

.btn-glow::before {
  content: '';
  position: absolute;
  top: -50%; left: -120%;
  width: 20%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transform: rotate(30deg);
  transition: left 700ms ease;
  pointer-events: none;
}

.btn-glow:hover::before {
  left: 120%;
}

/* 6 · CARD LIFT
   ========================================================================== */

.lift {
  transition: transform 350ms cubic-bezier(.2,.7,.2,1), border-color 350ms ease, box-shadow 350ms ease;
  border: 1px solid var(--border-muted);
}

.lift:hover {
  transform: translateY(-6px);
  border-color: color-mix(in oklab, var(--accent, var(--solo)) 25%, var(--border-muted));
  box-shadow: 0 24px 48px -24px black, 0 0 0 1px color-mix(in oklab, var(--accent, var(--solo)) 25%, transparent);
}

/* 7 · SECTION TITLE ACCENT BAR
   ========================================================================== */

.section-title-wrap {
  position: relative;
  padding-left: 0; /* Animated below */
  display: inline-block;
}

.section-title-wrap::before {
  content: '';
  position: absolute;
  left: 0; top: 10%; bottom: 10%;
  width: 3px;
  background: linear-gradient(to bottom, var(--accent, var(--solo)), transparent);
  opacity: 0;
  transform: scaleY(0.4);
  transform-origin: top;
  transition: all 900ms cubic-bezier(.2,.7,.2,1);
}

[data-reveal].is-visible .section-title-wrap,
.section-title-wrap.is-visible {
  padding-left: 24px;
}

[data-reveal].is-visible .section-title-wrap::before,
.section-title-wrap.is-visible::before {
  opacity: 1;
  transform: scaleY(1);
}

/* 8 · MODE-SPECIFIC HERO BACKGROUNDS
   ========================================================================== */

/* Solo Mode: Sweeping Laser Scan */
.motion-bg-solo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: 
    linear-gradient(var(--border-muted) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-muted) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center left, black 10%, transparent 70%);
  opacity: 0.6;
  overflow: hidden;
}

.motion-bg-solo::after {
  content: '';
  position: absolute;
  top: -100%; left: 0; width: 100%; height: 150px;
  background: linear-gradient(to bottom, transparent, rgba(88,166,255,0.05) 80%, rgba(88,166,255,0.4) 100%);
  animation: radarScanSolo 6s linear infinite;
}

@keyframes radarScanSolo {
  0% { transform: translateY(0); }
  100% { transform: translateY(150vh); }
}

/* Team Mode: Sonar Pulse Rings */
.motion-bg-team {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 20%;
  mask-image: linear-gradient(to right, transparent, black);
  opacity: 0.7;
}

.team-sonar-ring {
  position: absolute;
  border: 1px solid var(--team);
  border-radius: 50%;
  opacity: 0;
  animation: sonarPingTeam 8s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.team-sonar-ring:nth-child(1) { width: 100px; height: 100px; animation-delay: 0s; }
.team-sonar-ring:nth-child(2) { width: 300px; height: 300px; animation-delay: 2s; }
.team-sonar-ring:nth-child(3) { width: 500px; height: 500px; animation-delay: 4s; }
.team-sonar-ring:nth-child(4) { width: 700px; height: 700px; animation-delay: 6s; }

@keyframes sonarPingTeam {
  0% { transform: scale(0.5); opacity: 0.8; border-width: 3px; }
  100% { transform: scale(3.5); opacity: 0; border-width: 1px; }
}

/* Enterprise Mode: Shield/Hex Grid */
.motion-bg-ent {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: 
    linear-gradient(30deg, rgba(163,113,247,0.1) 12%, transparent 12.5%, transparent 87%, rgba(163,113,247,0.1) 87.5%, rgba(163,113,247,0.1)),
    linear-gradient(150deg, rgba(163,113,247,0.1) 12%, transparent 12.5%, transparent 87%, rgba(163,113,247,0.1) 87.5%, rgba(163,113,247,0.1)),
    linear-gradient(30deg, rgba(163,113,247,0.1) 12%, transparent 12.5%, transparent 87%, rgba(163,113,247,0.1) 87.5%, rgba(163,113,247,0.1)),
    linear-gradient(150deg, rgba(163,113,247,0.1) 12%, transparent 12.5%, transparent 87%, rgba(163,113,247,0.1) 87.5%, rgba(163,113,247,0.1)),
    linear-gradient(60deg, rgba(163,113,247,0.1) 25%, transparent 25.5%, transparent 75%, rgba(163,113,247,0.1) 75%, rgba(163,113,247,0.1)),
    linear-gradient(60deg, rgba(163,113,247,0.1) 25%, transparent 25.5%, transparent 75%, rgba(163,113,247,0.1) 75%, rgba(163,113,247,0.1));
  background-size: 80px 140px;
  background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
  mask-image: radial-gradient(ellipse at top right, black 20%, transparent 70%);
  animation: hexPulseEnt 12s ease-in-out infinite alternate;
  opacity: 0.5;
}

@keyframes hexPulseEnt {
  0% { opacity: 0.3; transform: scale(1) translateY(0); }
  100% { opacity: 0.8; transform: scale(1.05) translateY(-20px); }
}