@property --value {
  syntax: "<angle>"; /* Define el tipo de valor que puede aceptar esta propiedad personalizada, en este caso, un ángulo. */
  inherits: true; /* Permite que esta propiedad personalizada sea heredada por los elementos hijos. */
  initial-value: 0deg; /* Valor inicial de la propiedad, aquí se establece en 0 grados. */
}

@property --width-ratio {
  syntax: "<number>"; /* Define el tipo de valor que puede aceptar esta propiedad, en este caso, un número. */
  inherits: true; /* Permite que esta propiedad personalizada sea heredada por los elementos hijos. */
  initial-value: 0; /* Valor inicial de la propiedad, establecido en 0. */
}

@property --scale {
  syntax: "<number>"; /* Define el tipo de valor que puede aceptar esta propiedad, en este caso, un número. */
  inherits: true; /* Permite que esta propiedad personalizada sea heredada por los elementos hijos. */
  initial-value: 0; /* Valor inicial de la propiedad, establecido en 0. */
}

:root {
  --width: 1.8vmin; /* Define una variable para el ancho que se utilizará en el borde de los anillos. */
  --duration: 7s; /* Define una variable para la duración de la animación. */
  --size: 70vmin; /* Define una variable para el tamaño de los anillos. */
}

@supports not (background: paint(foo)) {
  :root {
    --duration: 4s; /* Si el navegador no soporta `background: paint(foo)`, ajusta la duración de la animación a 4 segundos. */
  }
}

.rings {
  width: var(
    --size
  ); /* Define el ancho del contenedor según la variable de tamaño. */
  aspect-ratio: 1; /* Mantiene una relación de aspecto 1:1, asegurando que el contenedor sea cuadrado. */
  border-radius: 50%; /* Hace que el contenedor sea circular. */
  position: relative; /* Posiciona el contenedor relativo a su posición normal, permitiendo el posicionamiento absoluto de los elementos hijos. */
  perspective: var(
    --size
  ); /* Añade perspectiva 3D, afectando cómo se ven los elementos hijos. */
}

.logo img {
  max-width: calc(
    var(--size) / 1.5
  ); /* Ajusta el ancho máximo de la imagen del logo en relación al tamaño del contenedor. */
  max-height: calc(
    var(--size) / 1.5
  ); /* Ajusta la altura máxima de la imagen del logo en relación al tamaño del contenedor. */
  width: auto; /* El ancho de la imagen se ajusta automáticamente para mantener las proporciones. */
  height: auto; /* La altura de la imagen se ajusta automáticamente para mantener las proporciones. */
}

.rings:before,
.rings:after {
  content: ""; /* Genera un elemento vacío antes y después del contenido. */
  position: absolute; /* Posiciona estos elementos en relación al contenedor padre `.rings`. */
  inset: 0; /* Extiende los pseudo-elementos para que ocupen todo el espacio del contenedor. */
  background: red; /* Define un color de fondo rojo para los pseudo-elementos. */
  border-radius: 50%; /* Hace que estos pseudo-elementos sean circulares. */
  --width-ratio: 1; /* Inicializa la relación de ancho. */
  border: calc(var(--width) * var(--width-ratio)) solid transparent; /* Aplica un borde transparente cuyo grosor depende del `--width` y `--width-ratio`. */
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); /* Aplica una máscara para ocultar partes del pseudo-elemento. */
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); /* Aplica una máscara similar para navegadores que soportan `mask`. */
  background: conic-gradient(
      from calc(var(--value) * 3),
      /* Establece un gradiente cónico que rota según `--value`. */ #a5c2c6,
      /* Colores del gradiente cónico. */ transparent,
      #96e1ec,
      #f7f6c4,
      #efc1b4,
      transparent,
      transparent,
      #a5c2c6,
      transparent,
      #96e1ec,
      #f7f6c4,
      #efc1b4,
      transparent,
      transparent,
      transparent
    )
    border-box; /* Hace que el gradiente se dibuje dentro de los bordes del contenedor. */
  -webkit-mask-composite: xor; /* Define cómo las capas de la máscara se combinan entre sí en navegadores WebKit. */
  mask-composite: exclude; /* Hace que la máscara excluya las áreas de superposición en navegadores que soportan `mask-composite`. */
  --start: 180deg; /* Establece el valor inicial de rotación en 180 grados. */
  --value: var(--start); /* Inicializa `--value` con el valor de `--start`. */
  --scale: 1; /* Define la escala inicial de los pseudo-elementos en 1 (sin escalado). */
  transform: rotateY(var(--value)) rotateX(var(--value)) rotateZ(var(--value))
    scale(var(--scale)); /* Aplica una transformación 3D basada en las variables `--value` y `--scale`. */
}

@supports (background: paint(foo)) {
  .rings:before,
  .rings:after {
    -webkit-animation: ring var(--duration) ease-in-out infinite; /* Aplica la animación `ring` si el navegador soporta `background: paint(foo)`. */
    animation: ring var(--duration) ease-in-out infinite; /* Define la animación `ring` con la duración especificada, en bucle infinito. */
  }
}

@supports not (background: paint(foo)) {
  .rings:before,
  .rings:after {
    -webkit-animation: ring-legacy var(--duration) ease-in-out infinite; /* Aplica la animación `ring-legacy` si `background: paint(foo)` no es soportado. */
    animation: ring-legacy var(--duration) ease-in-out infinite; /* Define la animación `ring-legacy` con la duración especificada, en bucle infinito. */
  }
}

.rings:before {
  --start: 180deg; /* Define el ángulo inicial para el pseudo-elemento `:before`. */
}

.rings:after {
  --start: 90deg; /* Define el ángulo inicial para el pseudo-elemento `:after`. */
}

.rings > .rings:before {
  --start: 360deg; /* Define un ángulo diferente cuando `.rings` es anidado, para el pseudo-elemento `:before`. */
}

.rings > .rings:after {
  --start: 270deg; /* Define un ángulo diferente cuando `.rings` es anidado, para el pseudo-elemento `:after`. */
}

@-webkit-keyframes ring {
  from {
    --value: var(
      --start
    ); /* Comienza la animación con el valor de `--start`. */
    --scale: 1; /* Inicia con escala 1. */
  }
  50% {
    --scale: 1.2; /* Aumenta la escala al 120%. */
    --width-ratio: 1.5; /* Aumenta el grosor del borde. */
  }
  70% {
    --scale: 1; /* Vuelve a la escala 1. */
    --value: calc(var(--start) + 180deg); /* Gira 180 grados. */
    --width-ratio: 1; /* Restablece el grosor del borde. */
  }
  80% {
    --scale: 1.2; /* Aumenta nuevamente la escala al 120%. */
    --width-ratio: 1.5; /* Aumenta nuevamente el grosor del borde. */
  }
  to {
    --value: calc(
      var(--start) + 360deg
    ); /* Completa una rotación completa (360 grados). */
    --scale: 1; /* Restablece la escala a 1. */
    --width-ratio: 1; /* Restablece el grosor del borde. */
  }
}

@keyframes ring {
  from {
    --value: var(--start);
    --scale: 1;
  }
  50% {
    --scale: 1.2;
    --width-ratio: 1.5;
  }
  70% {
    --scale: 1;
    --value: calc(var(--start) + 180deg);
    --width-ratio: 1;
  }
  80% {
    --scale: 1.2;
    --width-ratio: 1.5;
  }
  to {
    --value: calc(var(--start) + 360deg);
    --scale: 1;
    --width-ratio: 1;
  }
}

@-webkit-keyframes ring-legacy {
  from {
    --value: var(--start); /* Comienza con el valor de `--start`. */
    --scale: 1; /* Inicia con escala 1. */
    transform: rotateY(var(--value)) rotateX(var(--value)) rotateZ(var(--value))
      scale(var(--scale)); /* Aplica la transformación inicial. */
  }
  70% {
    --scale: 1.2; /* Aumenta la escala al 120%. */
    --value: calc(var(--start) + 180deg); /* Gira 180 grados. */
    transform: rotateY(var(--value)) rotateX(var(--value)) rotateZ(var(--value))
      scale(var(--scale)); /* Aplica la transformación de 180 grados. */
  }
  to {
    --value: calc(
      var(--start) + 360deg
    ); /* Completa una rotación completa (360 grados). */
    --scale: 1; /* Restablece la escala a 1. */
    transform: rotateY(var(--value)) rotateX(var(--value)) rotateZ(var(--value))
      scale(var(--scale)); /* Aplica la transformación final. */
  }
}

@keyframes ring-legacy {
  from {
    --value: var(--start);
    --scale: 1;
    transform: rotateY(var(--value)) rotateX(var(--value)) rotateZ(var(--value))
      scale(var(--scale));
  }
  70% {
    --scale: 1.2;
    --value: calc(var(--start) + 180deg);
    transform: rotateY(var(--value)) rotateX(var(--value)) rotateZ(var(--value))
      scale(var(--scale));
  }
  to {
    --value: calc(var(--start) + 360deg);
    --scale: 1;
    transform: rotateY(var(--value)) rotateX(var(--value)) rotateZ(var(--value))
      scale(var(--scale));
  }
}

.logo {
  display: grid; /* Define un contenedor grid. */
  place-items: center; /* Centra el contenido del grid. */
  position: absolute; /* Posiciona el logo de forma absoluta. */
  inset: 0; /* Extiende el logo para ocupar todo el contenedor padre. */
  filter: drop-shadow(
    0 0 1.5rem rgba(255, 255, 255, 0.8)
  ); /* Añade una sombra de color alrededor del logo. */
  background: var(--logo) center center no-repeat; /* Aplica la imagen de fondo del logo centrada, sin repetición. */
  background-size: calc(
    var(--size) / 1.5
  ); /* Ajusta el tamaño del fondo del logo en relación al tamaño del contenedor. */
  opacity: 1.5; /* Aplica una opacidad del 50% al logo. */
}

.demo {
  display: grid; /* Define un contenedor grid. */
  place-items: center; /* Centra el contenido del grid. */
  height: 100vh; /* Establece la altura del contenedor al 100% de la altura de la ventana. */
  width: 100vw; /* Establece el ancho del contenedor al 100% del ancho de la ventana. */
  --floor-tile-size: 5rem; /* Define el tamaño de las baldosas de fondo. */
  --floor-color: rgba(
    255,
    255,
    255,
    2.726
  ); /* Define el color de las baldosas de fondo. */
  background: radial-gradient(transparent 15%, rgb(191, 203, 211) 40%),
    /* Aplica un gradiente radial como fondo. */
      repeating-linear-gradient(
        45deg,
        var(--floor-color) 0,
        var(--floor-color) 1.9rem
      );
}

.filter {
  display: block;
  width: 0;
  height: 0;
  overflow: visible !important;
  position: absolute;
}

body {
  color: #a3f0f7;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
body:before {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(1rem);
  backdrop-filter: blur(1rem);
  -webkit-mask-image: radial-gradient(
    72vmin 72vmin at center,
    transparent 50%,
    black 70%
  );
  mask-image: radial-gradient(
    72vmin 72vmin at center,
    transparent 50%,
    black 70%
  );
  z-index: 111;
}
body:after {
  content: "";
  position: absolute;
  background: url(https://assets.codepen.io/907471/noise.svg);
  mix-blend-mode: lighten;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  filter: invert(1);
  z-index: var(--labs-sys-z-noise);
}

a.labs-follow-me-twitter {
  position: absolute;
  left: auto;
  right: auto;
  display: grid;
  place-items: center;
  top: unset;
  bottom: 2rem;
  -webkit-backdrop-filter: blur(1rem);
  backdrop-filter: blur(1rem);
  border-radius: 0.1rem;
}

button {
  position: absolute; /* Fija el botón en la ventana */
  bottom: 10px; /* Posición desde la parte inferior */
  left: 50%; /* Centra horizontalmente */
  transform: translateX(-50%); /* Ajusta para centrar exactamente */
  padding: 15px 30px; /* Ajuste del tamaño del botón */
  background-color: #333; /* Color de fondo */
  color: #fff; /* Color del texto */
  border: none; /* Sin borde */
  border-radius: 5px; /* Bordes redondeados */
  cursor: pointer; /* Indica que el elemento es clicable */
  z-index: 200; /* Asegúrate de que esté por encima de otros elementos */
  font-size: 1rem; /* Tamaño de fuente ajustado */
}

button:hover {
  background-color: #555; /* Cambio de color al pasar el mouse */
}

/* Ajustes para pantallas más pequeñas */
@media screen and (max-width: 600px) {
  button {
    width: 80%; /* Botón más ancho en pantallas pequeñas */
    padding: 12px; /* Ajuste de padding para pantallas pequeñas */
    font-size: 0.9rem; /* Tamaño de fuente más pequeño */
  }
}