/* === Pre-React Loader with Light/Dark Mode === */
:root {
  --prl-bg: #f7f8fa;
  --prl-text: rgba(0, 0, 0, .45);
  --prl-ring: rgba(45, 110, 66, .15);
  --prl-accent: #3e7650;
  --prl-dot: #2d6e42;
  --prl-glow: rgba(45, 110, 66, .08);
}

/* System Dark Preference */
@media(prefers-color-scheme:dark) {
  :root:not(.light) {
    --prl-bg: #0a0a0f;
    --prl-text: rgba(255, 255, 255, .4);
    --prl-ring: rgba(167, 139, 250, .12);
    --prl-accent: #a78bfa;
    --prl-dot: #7c3aed;
    --prl-glow: rgba(139, 92, 246, .06);
  }
}

/* Explicit Dark Class (Always takes precedence) */
.dark {
  --prl-bg: #0a0a0f !important;
  --prl-text: rgba(255, 255, 255, .4) !important;
  --prl-ring: rgba(167, 139, 250, .12) !important;
  --prl-accent: #a78bfa !important;
  --prl-dot: #7c3aed !important;
  --prl-glow: rgba(139, 92, 246, .06) !important;
}

/* Explicit Light Class (Reset to Light if OS is Dark) */
.light {
  --prl-bg: #f7f8fa !important;
  --prl-text: rgba(0, 0, 0, .45) !important;
  --prl-ring: rgba(45, 110, 66, .15) !important;
  --prl-accent: #3e7650 !important;
  --prl-dot: #2d6e42 !important;
  --prl-glow: rgba(45, 110, 66, .08) !important;
}

#pre-react-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--prl-bg);
  gap: 1.5rem;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif
}

/* Orbital ring */
.prl-orbit {
  position: relative;
  width: 52px;
  height: 52px
}

.prl-orbit::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid var(--prl-ring);
  border-top-color: var(--prl-accent);
  animation: prl-spin .8s cubic-bezier(.4, .15, .6, .85) infinite
}

.prl-orbit::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-bottom-color: var(--prl-accent);
  opacity: .35;
  animation: prl-spin 1.4s linear infinite reverse
}

/* Center dot */
.prl-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--prl-dot);
  animation: prl-pulse 1.6s ease-in-out infinite
}

/* Text + bar */
.prl-label {
  color: var(--prl-text);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500
}

.prl-bar {
  width: 120px;
  height: 2px;
  border-radius: 1px;
  background: var(--prl-ring);
  overflow: hidden
}

.prl-bar::after {
  content: '';
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 1px;
  background: var(--prl-accent);
  animation: prl-slide 1.2s ease-in-out infinite
}

/* Subtle background glow */
.prl-glow {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--prl-glow);
  filter: blur(60px);
  pointer-events: none
}

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

@keyframes prl-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: .6
  }
  50% {
    transform: scale(1.4);
    opacity: 1
  }
}

@keyframes prl-slide {
  0% {
    transform: translateX(-100%)
  }
  50% {
    transform: translateX(200%)
  }
  100% {
    transform: translateX(-100%)
  }
}

/* Skip button — fades in via JS after 30s */
.prl-skip {
  margin-top: .5rem;
  padding: .65rem 1.6rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--prl-accent);
  background: transparent;
  border: 1.5px solid var(--prl-accent);
  border-radius: 9999px;
  cursor: pointer;
  transition: background .2s, color .2s, transform .15s;
  animation: prl-fade-in .5s ease-out;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.prl-skip:hover,
.prl-skip:focus-visible {
  background: var(--prl-accent);
  color: var(--prl-bg);
  transform: scale(1.05);
  outline: none;
}

.prl-skip:active {
  transform: scale(.97);
}

@keyframes prl-fade-in {
  from { opacity: 0; transform: translateY(8px) }
  to   { opacity: 1; transform: translateY(0) }
}