* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background: var(--background);
  color: var(--text);

  transition:
    background .45s ease,
    color .45s ease;

  overflow-x: hidden;

  position: relative;
}

/* -----------------------------------
   LINKS
----------------------------------- */

a {
  color: var(--blue);
  text-decoration: none;
  transition: opacity .25s ease;
}

a:hover {
  opacity: .78;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

/* -----------------------------------
   FONDO GENERAL
----------------------------------- */

.background-effects {
  position: fixed;
  inset: 0;

  overflow: hidden;

  z-index: -5;

  pointer-events: none;
}

/* Gradiente base */

.background-effects::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 12% 90%,
      rgba(0, 149, 255, .14),
      transparent 30%
    ),
    radial-gradient(
      circle at 20% 5%,
      rgba(80, 212, 54, .10),
      transparent 28%
    ),
    radial-gradient(
      circle at 90% 8%,
      rgba(255, 180, 0, .09),
      transparent 25%
    ),
    radial-gradient(
      circle at 92% 88%,
      rgba(255, 22, 64, .10),
      transparent 28%
    );
}

/* -----------------------------------
   LUCES DIFUMINADAS
----------------------------------- */

.light {
  position: absolute;

  width: 540px;
  height: 540px;

  border-radius: 50%;

  filter: blur(120px);

  opacity: .15;

  animation: floatLight 12s ease-in-out infinite alternate;
}

.light-blue {
  background: var(--blue);

  left: -260px;
  bottom: -260px;
}

.light-green {
  background: var(--green);

  left: 15%;
  top: -380px;

  animation-delay: -2s;
}

.light-red {
  background: var(--red);

  right: -320px;
  bottom: -300px;

  animation-delay: -4s;
}

.light-yellow {
  background: var(--yellow);

  right: -300px;
  top: -330px;

  animation-delay: -6s;
}

@keyframes floatLight {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(25px, -20px, 0) scale(1.08);
  }
}

/* -----------------------------------
   LÍNEAS DECORATIVAS GRAFIX
----------------------------------- */

body::before,
body::after {
  content: "";

  position: fixed;

  width: 520px;
  height: 160px;

  border-radius: 50%;

  pointer-events: none;

  z-index: -3;
}

body::before {
  top: 110px;
  left: -190px;

  border-top:
    6px solid rgba(0, 149, 255, .28);

  transform: rotate(-8deg);

  box-shadow:
    0 -18px 0 -12px rgba(80, 212, 54, .28),
    0 20px 0 -12px rgba(255, 22, 64, .22);
}

body::after {
  right: -200px;
  bottom: 20px;

  border-bottom:
    6px solid rgba(255, 22, 64, .28);

  transform: rotate(-12deg);

  box-shadow:
    0 -20px 0 -12px rgba(255, 180, 0, .26),
    0 20px 0 -12px rgba(0, 149, 255, .22);
}

/* -----------------------------------
   TEMA OSCURO
----------------------------------- */

html[data-theme="dark"] body::before {
  border-color: rgba(0, 149, 255, .55);

  filter:
    drop-shadow(0 0 10px rgba(0,149,255,.25));
}

html[data-theme="dark"] body::after {
  border-color: rgba(255, 22, 64, .5);

  filter:
    drop-shadow(0 0 10px rgba(255,22,64,.20));
}

/* -----------------------------------
   SELECCIÓN DE TEXTO
----------------------------------- */

::selection {
  background: rgba(0, 149, 255, .25);
}

/* -----------------------------------
   SCROLLBAR
----------------------------------- */

::-webkit-scrollbar {
  width: 9px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(120, 135, 150, .35);
  border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(120, 135, 150, .55);
}

/* =====================================================
   AJUSTES DECORACIÓN FINAL
===================================================== */

/* Tema claro: líneas más discretas */

html[data-theme="light"] body::before,
html[data-theme="light"] body::after {
  opacity: .65;
}

/* Tema oscuro: más efecto neón */

html[data-theme="dark"] body::before {
  opacity: .9;

  filter:
    drop-shadow(0 0 8px rgba(0,149,255,.25));
}

html[data-theme="dark"] body::after {
  opacity: .9;

  filter:
    drop-shadow(0 0 8px rgba(255,22,64,.22));
}