/* Global page entrance and subtle motion */
main {
  opacity: 0;
  animation: page-fade-in 0.55s ease forwards;
}

footer,
footer * {
  animation: none !important;
  transition: none !important;
}

.global-orb {
  position: fixed;
  pointer-events: none;
  z-index: -9;
  border-radius: 9999px;
  filter: blur(60px);
  opacity: 0.22;
  animation: orb-float 10s ease-in-out infinite;
}

.global-orb--a {
  width: 280px;
  height: 280px;
  left: -80px;
  top: 20%;
  background: #22c55e;
}

.global-orb--b {
  width: 320px;
  height: 320px;
  right: -120px;
  bottom: 14%;
  background: #16a34a;
  animation-delay: -4s;
}

.reveal-init {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  filter: blur(4px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease,
    filter 0.55s ease;
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-init.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

header nav {
  animation: nav-drop 0.7s ease both;
}

article,
.hover-lift {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

article:hover,
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
}

button,
a[class*="bg-"] {
  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}

button:hover,
a[class*="bg-"]:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.glitch-icon {
  animation:
    icon-boot 1.25s steps(2, end) 1 both,
    icon-jitter 2.2s steps(2, end) infinite 1.25s;
  box-shadow: 0 0 0 rgba(16, 185, 129, 0);
}

.glitch-text {
  position: relative;
  display: inline-block;
  text-shadow:
    0 0 12px rgba(16, 185, 129, 0.2),
    0 0 24px rgba(16, 185, 129, 0.12);
  animation:
    text-boot 1.25s steps(2, end) 1 both,
    text-jitter 2.4s steps(2, end) infinite 1.25s;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.glitch-text::before {
  color: rgba(16, 185, 129, 0.85);
  text-shadow: -2px 0 rgba(52, 211, 153, 0.9);
  transform: translateX(-2px);
  animation:
    glitch-slice-boot-a 1.25s linear 1 both,
    glitch-slice-a 2.4s linear infinite 1.25s;
}

.glitch-text::after {
  color: rgba(226, 232, 240, 0.85);
  text-shadow: 2px 0 rgba(16, 185, 129, 0.7);
  transform: translateX(2px);
  animation:
    glitch-slice-boot-b 1.25s linear 1 both,
    glitch-slice-b 2.4s linear infinite 1.25s;
}

@keyframes page-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes nav-drop {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes orb-float {
  0%,
  100% {
    transform: translateY(0px) translateX(0px);
  }
  50% {
    transform: translateY(-16px) translateX(10px);
  }
}

@keyframes icon-jitter {
  0%,
  89%,
  100% {
    transform: translate(0, 0);
    box-shadow: 0 0 0 rgba(16, 185, 129, 0);
  }
  90% {
    transform: translate(-1px, 0);
    box-shadow: -2px 0 0 rgba(16, 185, 129, 0.45);
  }
  92% {
    transform: translate(1px, 0);
    box-shadow: 2px 0 0 rgba(94, 234, 212, 0.35);
  }
  94% {
    transform: translate(0, 0);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.28);
  }
}

@keyframes icon-boot {
  0%,
  16%,
  32%,
  48%,
  64% {
    transform: translate(-2px, 0);
    box-shadow:
      -3px 0 0 rgba(16, 185, 129, 0.55),
      3px 0 0 rgba(94, 234, 212, 0.45);
  }
  8%,
  24%,
  40%,
  56%,
  72% {
    transform: translate(2px, 0);
    box-shadow:
      3px 0 0 rgba(16, 185, 129, 0.55),
      -3px 0 0 rgba(94, 234, 212, 0.45);
  }
  80% {
    transform: translate(-1px, 0);
    box-shadow: -2px 0 0 rgba(16, 185, 129, 0.45);
  }
  92%,
  100% {
    transform: translate(0, 0);
    box-shadow: 0 0 0 rgba(16, 185, 129, 0);
  }
}

@keyframes text-jitter {
  0%,
  88%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  89% {
    transform: translate3d(-1px, 0, 0);
  }
  91% {
    transform: translate3d(1px, 0, 0);
  }
  93% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes text-boot {
  0%,
  14%,
  28%,
  42%,
  56% {
    transform: translate3d(-2px, 0, 0);
  }
  7%,
  21%,
  35%,
  49%,
  63% {
    transform: translate3d(2px, 0, 0);
  }
  76% {
    transform: translate3d(-1px, 0, 0);
  }
  90%,
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes glitch-slice-boot-a {
  0%,
  100% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
  8%,
  24%,
  40%,
  56% {
    opacity: 0.95;
    clip-path: inset(8% 0 68% 0);
  }
  16%,
  32%,
  48%,
  64% {
    opacity: 0.95;
    clip-path: inset(55% 0 20% 0);
  }
  72% {
    opacity: 0.8;
    clip-path: inset(30% 0 42% 0);
  }
}

@keyframes glitch-slice-boot-b {
  0%,
  100% {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
  }
  10%,
  26%,
  42%,
  58% {
    opacity: 0.92;
    clip-path: inset(72% 0 8% 0);
  }
  18%,
  34%,
  50%,
  66% {
    opacity: 0.92;
    clip-path: inset(14% 0 62% 0);
  }
  78% {
    opacity: 0.76;
    clip-path: inset(42% 0 34% 0);
  }
}

@keyframes glitch-slice-a {
  0%,
  88%,
  100% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
  89% {
    opacity: 0.8;
    clip-path: inset(20% 0 55% 0);
  }
  90.5% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
  91% {
    opacity: 0.75;
    clip-path: inset(58% 0 22% 0);
  }
  92.5% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
}

@keyframes glitch-slice-b {
  0%,
  88%,
  100% {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
  }
  89.2% {
    opacity: 0.7;
    clip-path: inset(10% 0 72% 0);
  }
  90.8% {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
  }
  91.6% {
    opacity: 0.7;
    clip-path: inset(70% 0 8% 0);
  }
  93% {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}