@property --value {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@property --width-ratio {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

:root {
  --width: 1.2vmin;
  --duration: 7s;
  --size: 35vmin;
  --logo: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MC41ODEiIGhlaWdodD0iNTcuODQ2IiB2aWV3Qm94PSIwIDAgNDAuNTgxIDU3Ljg0NiI+CiAgPGRlZnM+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudCIgeDE9IjAuOTExIiB5MT0iMC4wODIiIHgyPSIwLjE4NSIgeTI9IjAuOTEiIGdyYWRpZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZTIwMGZmIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4xMDciIHN0b3AtY29sb3I9IiNlZWEzZjciLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjQ0MyIgc3RvcC1jb2xvcj0iI2UxZDBlMyIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuNTc2IiBzdG9wLWNvbG9yPSIjZmZmIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzg3Y2NmMCIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8L2RlZnM+CiAgPHRleHQgeD0iNTAlIiB5PSI1MCUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtc2l6ZT0iNDAiIGZvbnQtd2VpZ2h0PSJib2xkIiBmaWxsPSJ1cmwoI2xpbmVhci1ncmFkaWVudCkiPk08L3RleHQ+Cjwvc3ZnPg==");
 
  @supports not (background: paint(foo)) {
    --duration: 4s;
  }
}

.rings {
  filter: url(#blurFilter) drop-shadow(1px 1px 10px #00d4ff);
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  perspective: var(--size);
  transform: scale(0.85);
}

.rings:before,
.rings:after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 0, 0, 1);
  border-radius: 50%;
  --width-ratio: 1;
  border: calc(var(--width) * var(--width-ratio)) solid transparent;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  background: conic-gradient(
      from calc(var(--value) * 3),
      #00d4ff,
      transparent,
      #04f5ff,
      #278ebb,
      #3bf6ff,
      transparent,
      transparent,
      #00a8ff,
      transparent,
      #24e0ff,
      #00cdff,
      #1a7ba4,
      transparent,
      transparent,
      transparent
    )
    border-box;
  mask-composite: exclude;
  --start: 180deg;
  --value: var(--start);
  --scale: 1;
  transform: rotateY(var(--value)) rotateX(var(--value)) rotateZ(var(--value))
    scale(var(--scale));
}

@supports (background: paint(foo)) {
  .rings:before,
  .rings:after {
    animation: ring var(--duration) ease-in-out infinite;
  }
}

@supports not (background: paint(foo)) {
  .rings:before,
  .rings:after {
    animation: ring-legacy var(--duration) ease-in-out infinite;
  }
}

.rings:before {
  --start: 180deg;
  animation-delay: 0s;
}

.rings:after {
  --start: 90deg;
  animation-delay: -3.2s;
}

.rings > .rings:before {
  --start: 360deg;
  animation-delay: -1.4s;
}

.rings > .rings:after {
  --start: 270deg;
  animation-delay: -5.8s;
}

@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;
  }
  95% {
    --scale: 1.2;
    --width-ratio: 1.5;
  }
  to {
    --value: calc(var(--start) + 360deg);
    --scale: 1;
    --width-ratio: 1;
  }
}

@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;
  place-items: center;
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 0 1.5rem hsla(200.57deg, 77%, 74%, 0.8));
  background: var(--logo) center center no-repeat;
  background-size: calc(var(--size) / 1.5);
  opacity: 0.8;
}

.demo {
  display: grid;
  place-items: center;
  /* Removed height/width - sizes to content (.rings) */
  /* .preloader's flex centering handles positioning */
  background: transparent;
  position: relative;
  z-index: 500;
}

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

/* DISABLED: Body styles for standalone loader page mode
   When loader.css is used as overlay preloader, these break page layout.
   .preloader already has flex centering from stage.css
   
body {
  color: #00d4ff;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: url('https://mickeymaynard.com/www2/stage/img/build-bg.png') center center no-repeat;
  background-size: cover;
}
*/

/* === REQUIRED FOR FADE-OUT TO WORK (NO OTHER CHANGES) === */
.blur-overlay,
.stripes-overlay {
  opacity: inherit;
  transition: opacity 800ms ease-out;
}

.blur-overlay {
  content: "";
  position: fixed;
  inset: 0;
  backdrop-filter: blur(0.38rem);
  pointer-events: none;
  z-index: 111;
}

.stripes-overlay {
  content: "";
  position: fixed;
  inset: 0;
  background: url('https://mickeymaynard.com/www2/stage/img/hero_stripes_4_trans.png') repeat;
  mix-blend-mode: overlay;
  pointer-events: none;
  opacity: 0.8;
  z-index: 999;
}

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