:root {
  color-scheme: light dark;
  --background: #f7f7f4;
  --logo-filter: saturate(1.08) contrast(1.08);
  --effect-duration: 480ms;
  --effect-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
  --effect-glow-alpha: 0.28;
  --effect-glow-size: 1.1rem;
  --effect-jitter-x: 1px;
  --effect-jitter-y: -1px;
  --effect-scale: 1.006;
  --effect-tilt: 0.18deg;
  --page-padding: clamp(1rem, 4vw, 3rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #090909;
    --logo-filter: saturate(1.18) contrast(1.18) brightness(1.08);
    --effect-glow-alpha: 0.2;
    --effect-glow-size: 1.35rem;
  }
}

* {
  box-sizing: border-box;
}

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

body {
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: var(--page-padding);
  background: var(--background);
  overflow: hidden;
}

svg {
  display: block;
  width: min(94vw, 1280px);
  max-width: 100%;
  height: auto;
  filter: var(--logo-filter);
  transform-origin: center;
  will-change: filter, transform;
}

.effect-brightness {
  animation: effect-brightness var(--effect-duration) var(--effect-easing);
}

.effect-jitter {
  animation: effect-jitter 360ms cubic-bezier(0.32, 0.72, 0.2, 1);
}

.effect-bloom {
  animation: effect-bloom var(--effect-duration) var(--effect-easing);
}

.effect-scale {
  animation: effect-scale 520ms cubic-bezier(0.18, 0.82, 0.2, 1);
}

.effect-focus {
  animation: effect-focus 460ms cubic-bezier(0.22, 0.76, 0.18, 1);
}

.effect-chroma {
  animation: effect-chroma 430ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.effect-flicker {
  animation: effect-flicker 380ms steps(4, end);
}

.effect-tilt {
  animation: effect-tilt 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes effect-brightness {
  0% {
    filter: var(--logo-filter);
  }

  34% {
    filter:
      var(--logo-filter)
      brightness(1.12)
      contrast(1.08);
  }

  100% {
    filter: var(--logo-filter);
  }
}

@keyframes effect-jitter {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  24% {
    transform: translate3d(var(--effect-jitter-x), var(--effect-jitter-y), 0);
  }

  46% {
    transform: translate3d(calc(var(--effect-jitter-x) * -0.7), calc(var(--effect-jitter-y) * -0.5), 0);
  }

  68% {
    transform: translate3d(calc(var(--effect-jitter-x) * 0.25), calc(var(--effect-jitter-y) * 0.25), 0);
  }
}

@keyframes effect-bloom {
  0%,
  100% {
    filter: var(--logo-filter);
  }

  38% {
    filter:
      var(--logo-filter)
      brightness(1.08)
      drop-shadow(0 0 var(--effect-glow-size) rgb(255 255 255 / var(--effect-glow-alpha)));
  }
}

@keyframes effect-scale {
  0%,
  100% {
    transform: scale(1);
  }

  34% {
    transform: scale(var(--effect-scale));
  }
}

@keyframes effect-focus {
  0%,
  100% {
    filter: var(--logo-filter);
  }

  26% {
    filter: var(--logo-filter) blur(0.45px) brightness(1.04);
  }

  58% {
    filter: var(--logo-filter) contrast(1.13);
  }
}

@keyframes effect-chroma {
  0%,
  100% {
    filter: var(--logo-filter);
    transform: translate3d(0, 0, 0);
  }

  38% {
    filter:
      var(--logo-filter)
      drop-shadow(-0.08rem 0 0 rgb(255 0 0 / 0.32))
      drop-shadow(0.08rem 0 0 rgb(0 0 255 / 0.32));
    transform: translate3d(0.04rem, 0, 0);
  }
}

@keyframes effect-flicker {
  0%,
  100% {
    opacity: 1;
    filter: var(--logo-filter);
  }

  35% {
    opacity: 0.88;
    filter: var(--logo-filter) brightness(1.09);
  }

  70% {
    opacity: 0.96;
  }
}

@keyframes effect-tilt {
  0%,
  100% {
    transform: rotate(0) skewX(0);
  }

  32% {
    transform: rotate(var(--effect-tilt)) skewX(calc(var(--effect-tilt) * 0.7));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
  }

  svg {
    will-change: auto;
  }

  .effect-brightness,
  .effect-jitter,
  .effect-bloom,
  .effect-scale,
  .effect-focus,
  .effect-chroma,
  .effect-flicker,
  .effect-tilt {
    animation: effect-reduced 180ms ease-out;
  }

  @keyframes effect-reduced {
    0%,
    100% {
      filter: var(--logo-filter);
    }

    50% {
      filter: var(--logo-filter) brightness(1.05);
    }
  }
}