/* Experimental motion — homepage + posts; disable via prefers-reduced-motion */

.home-intro {
  position: relative;
  isolation: isolate;
}

.home-intro::before {
  content: "";
  position: absolute;
  inset: -35% -20% -15%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
  filter: blur(52px);
  background:
    radial-gradient(ellipse 55% 45% at 20% 30%, rgba(86, 156, 214, 0.22), transparent 70%),
    radial-gradient(ellipse 50% 40% at 78% 25%, rgba(78, 201, 176, 0.18), transparent 72%),
    radial-gradient(ellipse 45% 50% at 50% 85%, rgba(206, 145, 120, 0.12), transparent 68%);
  animation: home-aurora 22s ease-in-out infinite alternate;
}

@keyframes home-aurora {
  0% {
    transform: translate3d(-3%, -2%, 0) scale(1);
  }
  33% {
    transform: translate3d(4%, 1%, 0) scale(1.04);
  }
  66% {
    transform: translate3d(-2%, 3%, 0) scale(0.98);
  }
  100% {
    transform: translate3d(3%, -1%, 0) scale(1.02);
  }
}

.home-terminal.is-glitch {
  animation: terminal-glitch 0.42s steps(2, end);
}

@keyframes terminal-glitch {
  0% {
    transform: translate(0);
    filter: none;
  }
  20% {
    transform: translate(-2px, 1px);
    text-shadow: 2px 0 rgba(86, 156, 214, 0.65), -2px 0 rgba(206, 145, 120, 0.55);
  }
  40% {
    transform: translate(2px, -1px);
    clip-path: inset(12% 0 58% 0);
  }
  60% {
    transform: translate(-1px, 0);
    clip-path: inset(48% 0 8% 0);
  }
  100% {
    transform: translate(0);
    filter: none;
    clip-path: none;
  }
}

.toolbox-chip.magnetic-hover {
  transition: transform 0.2s cubic-bezier(0.34, 1.45, 0.64, 1);
}

main#content.grid-parallax::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.035;
  background-image: radial-gradient(circle at 50% 50%, currentColor 1px, transparent 1px);
  background-size: 48px 48px;
  animation: grid-drift 40s linear infinite;
}

@keyframes grid-drift {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(48px, 48px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-intro::before,
  main#content.grid-parallax::after {
    animation: none;
    display: none;
  }

  .home-terminal.is-glitch {
    animation: none;
  }

}