@import url("./reset.css");
@import url("./variables.css");

:root {
  color-scheme: dark;
}

body {
  background:
    radial-gradient(1400px 1000px at 15% -15%, rgba(124, 92, 255, 0.18), transparent 58%),
    radial-gradient(1100px 800px at 90% 8%, rgba(184, 169, 255, 0.12), transparent 54%),
    radial-gradient(900px 600px at 70% 90%, rgba(32, 22, 62, 0.45), transparent 62%),
    linear-gradient(175deg, var(--c-bg), rgba(10, 11, 30, 0.60));
  color: var(--c-text);
  font-family: var(--font-ui);
  line-height: 1.5;
  background-attachment: fixed;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: -30%;
  z-index: var(--z-decor);
  pointer-events: none;
}

.starfield-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-canvas);
  pointer-events: none;
  opacity: 0.85;
}

body::before {
  opacity: 0.80;
  background:
    radial-gradient(1400px 900px at 18% -12%, rgba(124, 92, 255, 0.14), transparent 56%),
    radial-gradient(1000px 700px at 92% 12%, rgba(184, 169, 255, 0.10), transparent 54%),
    radial-gradient(800px 500px at 55% 85%, rgba(32, 22, 62, 0.30), transparent 58%),
    radial-gradient(600px 400px at 30% 50%, rgba(253, 230, 138, 0.04), transparent 50%);
  background-size: auto, auto, auto, 160% 160%;
  background-position: 0 0, 0 0, 0 0, 50% 50%;
  background-repeat: no-repeat;
  animation: nebula-pulse 12s ease-in-out infinite alternate, nebula-drift 30s linear infinite;
  transform: translateZ(0);
}

body::after {
  opacity: 0.90;
  filter: blur(24px);
  background:
    radial-gradient(480px 260px at 8% 18%, var(--c-cloud), transparent 72%),
    radial-gradient(560px 300px at 25% 35%, rgba(184, 169, 255, 0.08), transparent 72%),
    radial-gradient(500px 270px at 50% 22%, rgba(255, 255, 255, 0.06), transparent 72%),
    radial-gradient(600px 320px at 70% 38%, rgba(124, 92, 255, 0.08), transparent 72%),
    radial-gradient(560px 300px at 85% 20%, rgba(255, 255, 255, 0.06), transparent 72%),
    radial-gradient(600px 320px at 15% 75%, rgba(184, 169, 255, 0.08), transparent 74%),
    radial-gradient(700px 360px at 45% 80%, rgba(255, 255, 255, 0.05), transparent 74%),
    radial-gradient(600px 320px at 78% 72%, rgba(124, 92, 255, 0.08), transparent 74%);
  animation: clouds-drift 32s linear infinite;
  transform: translateZ(0);
}

@keyframes clouds-drift {
  0% { transform: translate3d(-1.5%, 0.5%, 0); }
  50% { transform: translate3d(1.5%, -0.8%, 0); }
  100% { transform: translate3d(-1.5%, 0.5%, 0); }
}

@keyframes nebula-pulse {
  0% { opacity: 0.70; filter: saturate(1.0); }
  100% { opacity: 0.90; filter: saturate(1.15); }
}

@keyframes nebula-drift {
  0% { background-position: 0 0, 0 0, 0 0, 0% 50%; }
  50% { background-position: 0 0, 0 0, 0 0, 60% 30%; }
  100% { background-position: 0 0, 0 0, 0 0, 0% 50%; }
}

@keyframes sky-float {
  0% { transform: translate3d(-0.30%, 0.10%, 0); }
  100% { transform: translate3d(0.30%, -0.15%, 0); }
}

body::before {
  animation:
    nebula-pulse 12s ease-in-out infinite alternate,
    nebula-drift 30s linear infinite,
    sky-float 20s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none !important;
  }
}

html[data-reduced-motion="true"] body::before,
html[data-reduced-motion="true"] body::after {
  animation: none !important;
}

html[data-route="/escribir"] body::after,
html[data-route="/editar"] body::after {
  opacity: 1;
  filter: blur(26px);
}

a {
  color: inherit;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
  width: auto;
  height: auto;
  z-index: var(--z-skip);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--c-surface-3);
  border: 1px solid var(--c-border-2);
  box-shadow: var(--shadow-lg);
  color: var(--c-text);
}

::selection {
  background: rgba(124, 92, 255, 0.30);
}

*:focus-visible {
  outline: 2px solid rgba(124, 92, 255, 0.70);
  outline-offset: 2px;
  transition: outline-offset var(--t-fast) ease;
}

code,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.9em;
}