/* ============================================================
   monopole.cloud — Aurora Gradient Design System
   ============================================================ */

:root {
  --polar-void: #0A0A12;
  --deep-magnetosphere: #12122A;
  --ionosphere: #1E1E40;
  --aurora-green: #00E88F;
  --magnetar-violet: #7B2FFF;
  --solar-flare: #FF2D78;
  --photon-white: #F8F6FF;
  --nebular-gray: #A0A0B8;
  --tertiary-bg: #3A3A52;

  --primary-aurora: linear-gradient(180deg, #00E88F 0%, #7B2FFF 50%, #FF2D78 100%);
  --surface-frost: linear-gradient(135deg, rgba(30, 30, 64, 0.7) 0%, rgba(18, 18, 42, 0.9) 100%);
  --ambient-glow: radial-gradient(ellipse at 50% 30%, rgba(0, 232, 143, 0.08) 0%, rgba(123, 47, 255, 0.04) 50%, transparent 80%);

  --ease-luxury: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-shimmer: cubic-bezier(0.4, 0, 0.2, 1);

  --scroll: 0;
}

/* ---- Reset ---- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  overflow-x: hidden;
}

body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 1.1vw, 1.25rem);
  line-height: 1.75;
  letter-spacing: 0.01em;
  background: var(--polar-void);
  color: var(--nebular-gray);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Typography ---- */
h1, h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  color: var(--photon-white);
  letter-spacing: -0.04em;
  line-height: 0.9;
}

h2 {
  font-size: clamp(2rem, 6vw, 5rem);
  margin-bottom: 2rem;
}

p {
  color: var(--nebular-gray);
  margin-bottom: 1.5rem;
}

p:last-child {
  margin-bottom: 0;
}

/* ---- Ambient Aurora Glow ---- */
.ambient-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--ambient-glow);
  pointer-events: none;
  z-index: 1;
}

/* ---- SVG Field Lines ---- */
.field-lines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}

/* ============================================================
   Timeline
   ============================================================ */
.timeline {
  position: fixed;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100vh;
  transform: translateX(-0.5px);
  z-index: 100;
  pointer-events: none;
}

.timeline-line {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    #00E88F 0%,
    #7B2FFF 50%,
    #FF2D78 100%
  );
  background-size: 100% 300%;
  background-position: 0 calc(var(--scroll) * -200%);
  transition: background-position 0.1s linear;
}

.diamond-marker {
  position: absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--aurora-green);
  transform: translateX(-50%) rotate(45deg);
  cursor: pointer;
  pointer-events: all;
  z-index: 101;
  animation: diamond-pulse 3s ease-in-out infinite;
  transition: box-shadow 0.3s var(--ease-luxury), transform 0.3s var(--ease-luxury);
}

.diamond-marker:hover {
  box-shadow: 0 0 16px rgba(0, 232, 143, 0.5);
  transform: translateX(-50%) rotate(45deg) scale(1.4);
}

.diamond-marker.active {
  background: var(--solar-flare);
  box-shadow: 0 0 20px rgba(255, 45, 120, 0.4);
}

@keyframes diamond-pulse {
  0%, 100% { transform: translateX(-50%) rotate(45deg) scale(1); }
  50% { transform: translateX(-50%) rotate(45deg) scale(1.2); }
}

/* ============================================================
   Strata
   ============================================================ */
main {
  position: relative;
  width: 100%;
  z-index: 2;
}

.stratum {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 32px;
  scroll-snap-align: start;
  overflow: hidden;
}

.stratum-label {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.label-text {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aurora-green);
  opacity: 0.5;
}

/* ============================================================
   Stratum 0 — The Monopole Hero
   ============================================================ */
.monopole-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.monopole-circle-wrapper {
  position: relative;
  width: 50vmin;
  height: 50vmin;
  max-width: 500px;
  max-height: 500px;
}

.monopole-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #00E88F 0deg,
    #00E88F 30deg,
    #7B2FFF 90deg,
    #7B2FFF 150deg,
    #FF2D78 210deg,
    #FF2D78 270deg,
    #7B2FFF 330deg,
    #00E88F 360deg
  );
  animation: monopole-spin 120s linear infinite;
  box-shadow:
    0 0 60px rgba(0, 232, 143, 0.15),
    0 0 120px rgba(123, 47, 255, 0.08);
}

.monopole-glow {
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 232, 143, 0.06) 0%,
    rgba(123, 47, 255, 0.03) 40%,
    transparent 70%
  );
  pointer-events: none;
  animation: monopole-spin 120s linear infinite reverse;
}

@keyframes monopole-spin {
  to { transform: rotate(360deg); }
}

.monopole-title-wrapper {
  text-align: center;
  margin-top: 2rem;
  position: relative;
}

.monopole-title {
  font-size: clamp(5rem, 14vw, 12rem);
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--photon-white);
  position: relative;
}

.monopole-subtitle {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--aurora-green);
  margin-top: 1rem;
  position: relative;
}

/* ============================================================
   Content Panels
   ============================================================ */
.stratum-content {
  position: relative;
  z-index: 5;
  max-width: 640px;
  width: 100%;
}

.stratum-content.left {
  margin-right: auto;
  margin-left: calc(50% - 640px - 2rem);
  padding-left: 2rem;
}

.stratum-content.right {
  margin-left: auto;
  margin-right: calc(50% - 640px - 2rem);
  padding-right: 2rem;
}

.content-panel {
  background: var(--surface-frost);
  backdrop-filter: blur(48px) saturate(180%);
  -webkit-backdrop-filter: blur(48px) saturate(180%);
  border: 1px solid transparent;
  border-image: linear-gradient(180deg, #00E88F, #7B2FFF) 1;
  border-radius: 2px;
  padding: 64px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.6s var(--ease-luxury);
}

.content-panel:hover {
  box-shadow:
    0 0 40px rgba(0, 232, 143, 0.15),
    0 0 80px rgba(123, 47, 255, 0.08);
}

/* ============================================================
   Stratum 1 — Particle Canvas
   ============================================================ */
#stratum-1 {
  display: flex;
  align-items: center;
  position: relative;
}

.particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

#stratum-1 .stratum-content {
  z-index: 5;
}

/* ============================================================
   Stratum 2 — Torus Knot
   ============================================================ */
#stratum-2 {
  display: flex;
  align-items: center;
  position: relative;
}

.torus-knot-container {
  position: absolute;
  left: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: 40vmin;
  height: 40vmin;
  z-index: 2;
}

.torus-knot {
  position: relative;
  width: 100%;
  height: 100%;
  animation: torus-rotate-y 60s linear infinite;
  transform-style: preserve-3d;
  perspective: 800px;
}

.torus-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  border: 1px solid var(--aurora-green);
  border-radius: 50%;
  transform-origin: center center;
}

.torus-ring-1  { transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg); opacity: 0.3; }
.torus-ring-2  { transform: translate(-50%, -50%) rotateX(15deg) rotateY(30deg); opacity: 0.25; }
.torus-ring-3  { transform: translate(-50%, -50%) rotateX(30deg) rotateY(60deg); opacity: 0.2; }
.torus-ring-4  { transform: translate(-50%, -50%) rotateX(45deg) rotateY(90deg); opacity: 0.3; }
.torus-ring-5  { transform: translate(-50%, -50%) rotateX(60deg) rotateY(120deg); opacity: 0.25; }
.torus-ring-6  { transform: translate(-50%, -50%) rotateX(75deg) rotateY(150deg); opacity: 0.2; }
.torus-ring-7  { transform: translate(-50%, -50%) rotateX(90deg) rotateY(180deg); opacity: 0.3; border-color: var(--magnetar-violet); }
.torus-ring-8  { transform: translate(-50%, -50%) rotateX(105deg) rotateY(210deg); opacity: 0.25; border-color: var(--magnetar-violet); }
.torus-ring-9  { transform: translate(-50%, -50%) rotateX(120deg) rotateY(240deg); opacity: 0.2; border-color: var(--magnetar-violet); }
.torus-ring-10 { transform: translate(-50%, -50%) rotateX(135deg) rotateY(270deg); opacity: 0.3; }
.torus-ring-11 { transform: translate(-50%, -50%) rotateX(150deg) rotateY(300deg); opacity: 0.25; }
.torus-ring-12 { transform: translate(-50%, -50%) rotateX(165deg) rotateY(330deg); opacity: 0.2; }

@keyframes torus-rotate-y {
  0%   { transform: rotateY(0deg) rotateX(0deg); }
  100% { transform: rotateY(360deg) rotateX(180deg); }
}

/* ============================================================
   Stratum 3 — Convergence + Data Streams
   ============================================================ */
.stratum-convergence {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.data-streams-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.data-stream {
  position: absolute;
  height: 1px;
  border-radius: 1px;
  animation: stream-flow linear infinite;
}

.data-stream.green {
  background: rgba(0, 232, 143, 0.15);
}

.data-stream.violet {
  background: rgba(123, 47, 255, 0.10);
}

@keyframes stream-flow {
  0%   { transform: translateX(-100%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(calc(100vw + 100%)); opacity: 0; }
}

.convergence-field {
  position: relative;
  z-index: 5;
  text-align: center;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

.convergence-content {
  background: var(--surface-frost);
  backdrop-filter: blur(48px) saturate(180%);
  -webkit-backdrop-filter: blur(48px) saturate(180%);
  border: 1px solid transparent;
  border-image: linear-gradient(180deg, #00E88F, #7B2FFF, #FF2D78) 1;
  border-radius: 2px;
  padding: 64px;
  position: relative;
  overflow: hidden;
}

.convergence-content h2 {
  font-size: clamp(3rem, 8vw, 8rem);
  color: var(--photon-white);
}

/* ============================================================
   Stratum 4 — Dissolution
   ============================================================ */
.stratum-dissolution {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
}

.dissolution {
  position: relative;
  z-index: 5;
  text-align: center;
  max-width: 800px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

.dissolution-fragment {
  position: relative;
  overflow: hidden;
  transition: transform 1.5s var(--ease-luxury), opacity 1.5s var(--ease-luxury);
}

.dissolution-fragment h2 {
  font-size: clamp(3rem, 10vw, 8rem);
}

.dissolution-fragment p {
  max-width: 480px;
  margin: 0 auto;
}

.final-statement {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  color: var(--photon-white);
  letter-spacing: -0.02em;
  line-height: 1.4;
}

/* Dissolution animation states (set by JS) */
.stratum-dissolution.dissolving .frag-1 {
  transform: translateY(-40px);
  opacity: 0.4;
}

.stratum-dissolution.dissolving .frag-2 {
  transform: translateY(20px) translateX(30px);
  opacity: 0.6;
}

.stratum-dissolution.dissolving .frag-3 {
  transform: translateY(80px);
  opacity: 0.3;
}

/* ============================================================
   Skeleton Loading System
   ============================================================ */
.skeleton-target {
  position: relative;
}

.skeleton-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #12122A 25%, #1E1E40 50%, #12122A 75%);
  background-size: 200% 100%;
  border-radius: 2px;
  z-index: 20;
  animation: shimmer 1.8s var(--ease-shimmer) infinite;
  opacity: 1;
  transition: opacity 0.6s var(--ease-luxury);
  pointer-events: none;
}

.skeleton-target.revealed .skeleton-overlay {
  opacity: 0;
}

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

/* Content reveal animation */
.skeleton-target > *:not(.skeleton-overlay) {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s var(--ease-luxury), transform 0.6s var(--ease-luxury);
}

.skeleton-target.revealed > *:not(.skeleton-overlay) {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Responsive: Tablet
   ============================================================ */
@media (max-width: 1200px) {
  .stratum-content.left {
    margin-left: 2rem;
  }
  .stratum-content.right {
    margin-right: 2rem;
  }
}

@media (max-width: 768px) {
  .timeline {
    left: 24px;
    transform: none;
  }

  .diamond-marker {
    left: 0;
    transform: rotate(45deg);
  }

  .diamond-marker:hover {
    transform: rotate(45deg) scale(1.4);
  }

  @keyframes diamond-pulse {
    0%, 100% { transform: rotate(45deg) scale(1); }
    50% { transform: rotate(45deg) scale(1.2); }
  }

  .stratum {
    padding: 32px 16px 32px 56px;
  }

  .stratum-label {
    left: 56px;
    transform: none;
  }

  .stratum-content.left,
  .stratum-content.right {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
  }

  .content-panel {
    padding: 32px;
  }

  .convergence-content {
    padding: 32px;
  }

  .torus-knot-container {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 60vmin;
    height: 60vmin;
    margin: 0 auto 2rem;
  }

  #stratum-2 {
    flex-direction: column;
  }

  .monopole-title {
    font-size: clamp(3rem, 12vw, 8rem);
  }
}

/* ============================================================
   Responsive: Mobile
   ============================================================ */
@media (max-width: 480px) {
  .timeline {
    display: none;
  }

  .diamond-marker {
    display: none;
  }

  .stratum {
    padding: 32px 16px;
    border-left: 2px solid transparent;
    border-image: linear-gradient(180deg, #00E88F, #7B2FFF) 1;
    margin-left: 8px;
  }

  .stratum-label {
    left: 16px;
  }

  .content-panel {
    padding: 24px;
  }

  .convergence-content {
    padding: 24px;
  }

  .monopole-circle-wrapper {
    width: 70vmin;
    height: 70vmin;
  }

  .dissolution {
    gap: 32px;
  }
}