/* === CSS Custom Properties === */
:root {
  /* Responsive Breakpoints */
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1440px;
  
  /* Spacing System */
  --spacing-xs: clamp(0.5rem, 2vw, 1rem);
  --spacing-sm: clamp(1rem, 3vw, 1.5rem);
  --spacing-md: clamp(1.5rem, 4vw, 2.5rem);
  --spacing-lg: clamp(2rem, 6vw, 4rem);
  --spacing-xl: clamp(3rem, 8vw, 6rem);
  
  /* Typography Scale */
  --font-size-hero: clamp(4rem, 8vw, 8rem);
  --font-size-hero-mobile: clamp(3.5rem, 12vw, 5rem);
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  
  /* Animation Timings */
  --duration-fast: 0.2s;
  --duration-medium: 0.5s;
  --duration-slow: 1s;
  --duration-extra-slow: 12s;
  --duration-flicker: 1.5s;
  --duration-letter-flicker: 0.8s;
  
  /* Glassmorphism Properties */
  --glass-backdrop-blur: 60px;
  
  /* Neon Glow Properties */
  --neon-glow-base: 10px;
  --neon-glow-medium: 20px;
  --neon-glow-large: 40px;
  --neon-glow-extra: 60px;
  
  /* Orb Sizes */
  --orb-size-small: clamp(80px, 12vw, 150px);
  --orb-size-medium: clamp(120px, 18vw, 250px);
  --orb-size-large: clamp(200px, 25vw, 400px);
}

/* === Component-Specific Colors === */
:root {
  /* Neon Glow Effects */
  --neon-inner-glow: var(--primary-contrast-95);
  --neon-medium-glow: var(--primary-contrast-85);
  --neon-ambient-glow: var(--primary-contrast-75);
  --neon-outer-glow: var(--primary-contrast-65);
}

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

html {
  height: 100%;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: 'Quicksand', sans-serif;
  background: var(--background-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  position: relative;
}

/* === Main Layout === */
.landing-container {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

.background-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.content-wrapper {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: var(--spacing-md);
}

/* === Neon Typography === */
.neon-title {
  display: flex;
  flex-direction: row;
  gap: 0.5ch;
  font-size: var(--font-size-hero);
  font-weight: var(--font-weight-normal);
  line-height: 1;
  text-transform: lowercase;
  letter-spacing: -0.02em;
  margin: 0;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  animation: title-fade-in 1s ease-out;
}

.neon-link {
  display: flex;
  flex-direction: row;
  gap: 0.5ch;
  text-decoration: none;
  color: inherit;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.neon-text {
  position: relative;
  display: inline-block;
  color: var(--primary-contrast-50);
  text-shadow: 
    0 0 var(--neon-glow-base) var(--neon-inner-glow),
    0 0 var(--neon-glow-medium) var(--neon-medium-glow),
    0 0 var(--neon-glow-large) var(--neon-outer-glow);
  filter: drop-shadow(0 0 var(--neon-glow-medium) var(--neon-ambient-glow));
}

.neon-text--stable {
  text-shadow: 
    0 0 calc(var(--neon-glow-base) / 2) var(--neon-inner-glow),
    0 0 var(--neon-glow-base) var(--neon-medium-glow),
    0 0 var(--neon-glow-medium) var(--neon-outer-glow);
}

.neon-text--flickering {
  animation: neon-flicker var(--duration-flicker) infinite alternate;
}

.neon-letter--o {
  animation: neon-flicker var(--duration-flicker) infinite alternate;
  color: var(--primary-contrast-50);
  text-shadow: 
    0 0 var(--neon-glow-base) var(--neon-inner-glow),
    0 0 var(--neon-glow-medium) var(--neon-medium-glow),
    0 0 var(--neon-glow-large) var(--neon-outer-glow);
  filter: drop-shadow(0 0 var(--neon-glow-medium) var(--neon-ambient-glow));
}

/* === Orb Components === */
.orb {
  position: absolute;
  border-radius: 50%;
  backdrop-filter: blur(var(--glass-backdrop-blur));
  animation: orb-float var(--duration-extra-slow) ease-in-out infinite;
  opacity: 0.3;
  mix-blend-mode: screen;
}

.orb--small {
  width: var(--orb-size-small);
  height: var(--orb-size-small);
}

.orb--medium {
  width: var(--orb-size-medium);
  height: var(--orb-size-medium);
}

.orb--large {
  width: var(--orb-size-large);
  height: var(--orb-size-large);
}

/* Orb Color & Glow Effects */
.orb--primary-050 {
  background: color-mix(in oklch, var(--primary-contrast-95) 30%, transparent);
  box-shadow: 
    inset 0 0 calc(var(--neon-glow-base) / 2) var(--primary-contrast-95),
    0 0 var(--neon-glow-base) var(--primary-contrast-95),
    0 0 var(--neon-glow-medium) var(--primary-contrast-85),
    0 0 var(--neon-glow-large) var(--primary-contrast-75);
  top: 10%;
  left: 15%;
  animation-delay: calc(var(--duration-extra-slow) * -0.25);
  z-index: 10;
}

.orb--primary-150 {
  background: color-mix(in oklch, var(--primary-contrast-85) 30%, transparent);
  box-shadow: 
    inset 0 0 calc(var(--neon-glow-base) / 2) var(--primary-contrast-85),
    0 0 var(--neon-glow-base) var(--primary-contrast-85),
    0 0 var(--neon-glow-medium) var(--primary-contrast-75),
    0 0 var(--neon-glow-large) var(--primary-contrast-65);
  top: 70%;
  right: 20%;
  animation-delay: calc(var(--duration-extra-slow) * -0.6);
  z-index: 9;
}

.orb--primary-250 {
  background: color-mix(in oklch, var(--primary-contrast-75) 30%, transparent);
  box-shadow: 
    inset 0 0 calc(var(--neon-glow-base) / 2) var(--primary-contrast-75),
    0 0 var(--neon-glow-base) var(--primary-contrast-75),
    0 0 var(--neon-glow-medium) var(--primary-contrast-65),
    0 0 var(--neon-glow-large) var(--primary-contrast-55);
  bottom: 15%;
  left: 10%;
  animation-delay: calc(var(--duration-extra-slow) * -1.05);
  z-index: 8;
}

.orb--primary-350 {
  background: color-mix(in oklch, var(--primary-contrast-65) 30%, transparent);
  box-shadow: 
    inset 0 0 calc(var(--neon-glow-base) / 2) var(--primary-contrast-65),
    0 0 var(--neon-glow-base) var(--primary-contrast-65),
    0 0 var(--neon-glow-medium) var(--primary-contrast-55),
    0 0 var(--neon-glow-large) var(--primary-contrast-45);
  top: 25%;
  right: 10%;
  animation-delay: calc(var(--duration-extra-slow) * -0.4);
  z-index: 7;
}

.orb--primary-450 {
  background: color-mix(in oklch, var(--primary-contrast-55) 30%, transparent);
  box-shadow: 
    inset 0 0 calc(var(--neon-glow-base) / 2) var(--primary-contrast-55),
    0 0 var(--neon-glow-base) var(--primary-contrast-55),
    0 0 var(--neon-glow-medium) var(--primary-contrast-45),
    0 0 var(--neon-glow-large) var(--primary-contrast-35);
  top: 60%;
  left: 40%;
  animation-delay: calc(var(--duration-extra-slow) * -0.75);
  z-index: 6;
}

.orb--primary-550 {
  background: color-mix(in oklch, var(--primary-contrast-45) 30%, transparent);
  box-shadow: 
    inset 0 0 calc(var(--neon-glow-base) / 2) var(--primary-contrast-45),
    0 0 var(--neon-glow-base) var(--primary-contrast-45),
    0 0 var(--neon-glow-medium) var(--primary-contrast-35),
    0 0 var(--neon-glow-large) var(--primary-contrast-25);
  bottom: 30%;
  right: 40%;
  animation-delay: calc(var(--duration-extra-slow) * -1.4);
  z-index: 5;
}

.orb--primary-650 {
  background: color-mix(in oklch, var(--primary-contrast-35) 30%, transparent);
  box-shadow: 
    inset 0 0 calc(var(--neon-glow-base) / 2) var(--primary-contrast-35),
    0 0 var(--neon-glow-base) var(--primary-contrast-35),
    0 0 var(--neon-glow-medium) var(--primary-contrast-25),
    0 0 var(--neon-glow-large) var(--primary-contrast-15);
  top: 5%;
  left: 60%;
  animation-delay: calc(var(--duration-extra-slow) * -0.15);
  z-index: 4;
}

.orb--primary-750 {
  background: color-mix(in oklch, var(--primary-contrast-25) 30%, transparent);
  box-shadow: 
    inset 0 0 calc(var(--neon-glow-base) / 2) var(--primary-contrast-25),
    0 0 var(--neon-glow-base) var(--primary-contrast-25),
    0 0 var(--neon-glow-medium) var(--primary-contrast-15),
    0 0 var(--neon-glow-large) var(--primary-contrast-05);
  bottom: 50%;
  right: 5%;
  animation-delay: calc(var(--duration-extra-slow) * -0.95);
  z-index: 3;
}

.orb--primary-850 {
  background: color-mix(in oklch, var(--primary-contrast-15) 30%, transparent);
  box-shadow: 
    inset 0 0 calc(var(--neon-glow-base) / 2) var(--primary-contrast-15),
    0 0 var(--neon-glow-base) var(--primary-contrast-15),
    0 0 var(--neon-glow-medium) var(--primary-contrast-05),
    0 0 var(--neon-glow-large) var(--primary-contrast-05);
  top: 40%;
  left: 5%;
  animation-delay: calc(var(--duration-extra-slow) * -1.25);
  z-index: 2;
}

.orb--primary-950 {
  background: color-mix(in oklch, var(--primary-contrast-05) 30%, transparent);
  box-shadow: 
    inset 0 0 calc(var(--neon-glow-base) / 2) var(--primary-contrast-05),
    0 0 var(--neon-glow-base) var(--primary-contrast-05),
    0 0 var(--neon-glow-medium) var(--primary-contrast-05),
    0 0 var(--neon-glow-large) var(--primary-contrast-05);
  bottom: 10%;
  right: 60%;
  animation-delay: calc(var(--duration-extra-slow) * -0.85);
  z-index: 1;
}


/* === Animations === */
@keyframes title-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes neon-flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow: 
      0 0 var(--neon-glow-base) var(--neon-inner-glow),
      0 0 var(--neon-glow-medium) var(--neon-medium-glow),
      0 0 var(--neon-glow-large) var(--neon-outer-glow);
    opacity: 1;
  }
  
  20%, 24%, 55% {
    text-shadow: 
      0 0 calc(var(--neon-glow-base) / 2) var(--neon-medium-glow),
      0 0 calc(var(--neon-glow-base) * 0.8) var(--neon-inner-glow);
    opacity: 0.8;
  }
}

@keyframes neon-letter-flicker {
  0%, 10%, 15%, 25%, 30%, 35%, 45%, 50%, 55%, 100% {
    text-shadow: 
      0 0 var(--neon-glow-medium) var(--primary-450),
      0 0 var(--neon-glow-large) var(--primary-550),
      0 0 var(--neon-glow-extra) var(--primary-650);
    opacity: 1;
    color: var(--primary-350);
  }
  
  5%, 12%, 20%, 27%, 32%, 40%, 47%, 52% {
    text-shadow: 
      0 0 calc(var(--neon-glow-base) * 0.3) var(--primary-250),
      0 0 var(--neon-glow-base) var(--primary-350);
    opacity: 0.3;
    color: var(--primary-250);
  }
  
  8%, 17%, 22%, 37%, 42% {
    text-shadow: none;
    opacity: 0.1;
    color: var(--primary-150);
  }
}

@keyframes orb-float {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.6;
  }
  
  33% {
    transform: translateY(-20px) scale(1.05);
    opacity: 0.8;
  }
  
  66% {
    transform: translateY(10px) scale(0.95);
    opacity: 0.4;
  }
}

/* === Responsive Design === */
@media (max-width: 480px) {
  .neon-title {
    flex-direction: column;
    gap: 0;
    font-size: var(--font-size-hero-mobile);
  }
  
  .orb {
    opacity: 0.3;
  }
  
  .content-wrapper {
    padding: var(--spacing-sm);
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .orb {
    opacity: 0.5;
  }
}

@media (min-width: 1440px) {
  .orb {
    opacity: 0.7;
  }
}

/* === Accessibility & Performance === */
@media (prefers-reduced-motion: reduce) {
  .neon-text--flickering {
    animation: none;
  }
  
  .orb {
    animation: none;
  }
}

@media (hover: hover) {
  .neon-title:hover .neon-text {
    text-shadow: 
      0 0 calc(var(--neon-glow-base) * 1.5) var(--neon-inner-glow),
      0 0 calc(var(--neon-glow-medium) * 1.5) var(--neon-medium-glow),
      0 0 var(--neon-glow-extra) var(--neon-outer-glow);
    transition: text-shadow var(--duration-medium) ease;
  }
}