@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=Nunito+Sans:wght@400;600&family=Share+Tech+Mono:wght@400&display=swap');

:root {
  --abyss: #0A0B1E;
  --deep-water: #0D1F3C;
  --midwater: #0E3B43;
  --biolum-green: #00FFC8;
  --coral-pink: #FF6F7D;
  --surface-light: #D4F1F9;
  --phosphor: #7B5CFF;
  --marine-snow: rgba(255, 255, 255, 0.06);
  --mint: #5CFFB1;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--abyss);
  color: var(--surface-light);
  font-family: 'Nunito Sans', sans-serif;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.panel {
  width: 100vw;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 4rem;
  z-index: 0;
}

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

.panel-gradient-1 {
  background: linear-gradient(to bottom, #1a4d6d 0%, var(--deep-water) 40%, var(--midwater) 80%, var(--abyss) 100%);
}

.panel-gradient-2 {
  background: linear-gradient(135deg, var(--deep-water) 0%, var(--midwater) 50%, #0a2535 100%);
}

.panel-gradient-3 {
  background: linear-gradient(to bottom, var(--midwater) 0%, #061e2a 50%, var(--abyss) 100%);
}

.panel-gradient-4 {
  background: radial-gradient(circle at center, var(--abyss) 0%, #050812 100%);
}

.panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 800px 600px at 30% 20%, rgba(0, 255, 200, 0.04) 0%, transparent 70%),
    radial-gradient(ellipse 600px 400px at 70% 80%, rgba(123, 92, 255, 0.03) 0%, transparent 60%);
  animation: caustics 29s ease-in-out infinite;
}

.panel::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 700px 500px at 60% 40%, rgba(123, 92, 255, 0.04) 0%, transparent 70%),
    radial-gradient(ellipse 900px 400px at 20% 70%, rgba(0, 255, 200, 0.03) 0%, transparent 60%);
  animation: caustics-alt 31s ease-in-out infinite;
}

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

@keyframes caustics-alt {
  0%, 100% { background-position: 100% 100%; }
  50% { background-position: 0% 0%; }
}

.botanical {
  position: absolute;
  filter: drop-shadow(0 0 12px rgba(0, 255, 200, 0.4));
  opacity: 0.15;
  animation: blur-focus-botanical 1200ms ease-out forwards;
}

.botanical-1 {
  width: 120px;
  height: 280px;
  bottom: 10%;
  right: 8%;
  animation-delay: 300ms;
  filter: drop-shadow(0 0 8px rgba(92, 255, 177, 0.3));
}

.botanical-2 {
  width: 100px;
  height: 100px;
  top: 20%;
  right: 5%;
  animation-delay: 500ms;
  filter: drop-shadow(0 0 10px rgba(123, 92, 255, 0.3));
}

.botanical-3 {
  width: 150px;
  height: 150px;
  top: 15%;
  left: 10%;
  animation-delay: 400ms;
  filter: drop-shadow(0 0 8px rgba(0, 255, 200, 0.3));
}

.botanical-4 {
  width: 120px;
  height: 180px;
  bottom: 20%;
  right: 15%;
  animation-delay: 600ms;
  filter: drop-shadow(0 0 10px rgba(123, 92, 255, 0.3));
}

.botanical-5 {
  width: 180px;
  height: 180px;
  top: 25%;
  left: 8%;
  animation-delay: 300ms;
  filter: drop-shadow(0 0 12px rgba(0, 255, 200, 0.4));
}

.botanical-6 {
  width: 140px;
  height: 280px;
  bottom: 10%;
  left: 10%;
  animation-delay: 400ms;
  filter: drop-shadow(0 0 8px rgba(0, 255, 200, 0.3));
}

@keyframes blur-focus-botanical {
  from {
    opacity: 0.05;
    filter: drop-shadow(0 0 20px rgba(0, 255, 200, 0.6)) blur(12px);
    transform: scale(0.92);
  }
  to {
    opacity: 0.15;
    filter: drop-shadow(0 0 12px rgba(0, 255, 200, 0.4)) blur(0);
    transform: scale(1);
  }
}

.kelp-strand, .kelp-frond, .coral-branch, .coral-trunk, .lotus, .lotus-stem, .tentacle, .petal, .ascent-strand, .ascent-branch, .anemone-base {
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: stroke-draw 2000ms ease-in-out forwards;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
}

@keyframes stroke-draw {
  from {
    stroke-dashoffset: 300;
  }
  to {
    stroke-dashoffset: 0;
  }
}

h1, h2 {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--surface-light);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 5;
}

h1 {
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  text-shadow: 0 0 20px var(--surface-light);
}

h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.8rem);
  letter-spacing: 0.05em;
  text-shadow: 0 0 16px var(--surface-light);
}

.heading {
  position: relative;
  z-index: 5;
  opacity: 0;
  filter: blur(8px);
  animation: none;
}

.heading.reveal {
  animation: heading-reveal 1200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes heading-reveal {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

.panel-text {
  font-family: 'Nunito Sans', sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.75;
  color: var(--surface-light);
  text-shadow: 0 0 8px rgba(0, 255, 200, 0.08);
  margin-bottom: 3rem;
  opacity: 0;
  filter: blur(8px);
  animation: content-reveal 1200ms ease-out 300ms forwards;
  max-width: 600px;
  position: relative;
  z-index: 5;
}

@keyframes content-reveal {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

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

.particle {
  position: absolute;
  background-color: var(--marine-snow);
  border-radius: 50%;
  pointer-events: none;
  animation: particle-drift linear infinite;
}

.particle.bright {
  background-color: rgba(0, 255, 200, 0.3);
  box-shadow: 0 0 8px rgba(0, 255, 200, 0.6);
}

@keyframes particle-drift {
  to {
    transform: translateY(-100vh) translateX(var(--tx, 0));
    opacity: 0;
  }
}

/* Font and Color Reference - ensure all colors and fonts are used */
.font-orbitron {
  font-family: 'Orbitron', sans-serif;
}

.font-nunito {
  font-family: 'Nunito Sans', sans-serif;
}

.font-sharetechmono {
  font-family: 'Share Tech Mono', monospace;
}

.color-ref-7b5cff {
  color: #7B5CFF;
  background: #7B5CFF;
}

.color-ref-ff6f7d {
  color: #FF6F7D;
  background: #FF6F7D;
}

.color-ref-5cffb1 {
  color: #5CFFB1;
}

.color-ref-00ffc8 {
  color: #00FFC8;
}

@media (max-width: 768px) {
  .panel {
    padding: 2rem;
  }

  .botanical-1, .botanical-2, .botanical-3, .botanical-4, .botanical-5, .botanical-6 {
    opacity: 0.1;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.4rem;
  }

  .panel-text {
    font-size: 1rem;
  }
}