/* Motion never gates access to content. */
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pixel-release {
  from {
    opacity: 1;
    transform: scale(1);
  }
  40% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: scale(0.25);
  }
}
@keyframes scan-pass {
  from {
    top: 0;
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  90% {
    opacity: 0.9;
  }
  to {
    top: 100%;
    opacity: 0;
  }
}
@keyframes transmission {
  from {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(var(--particle-x), var(--particle-y)) scale(0.1);
    opacity: 0;
  }
}
@keyframes bug-in {
  from {
    transform: scale(0.75);
  }
  to {
    transform: scale(1);
  }
}
@keyframes word-shimmer {
  0%,
  88%,
  100% {
    filter: none;
  }
  92% {
    filter: drop-shadow(2px 0 5px #00f0ff33);
  }
  96% {
    filter: drop-shadow(-2px 0 5px #7000ff44);
  }
}
.pixel-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  pointer-events: none;
}
.pixel-tile {
  display: grid;
  place-items: center;
  background: var(--tile-color, #0b1626);
  color: #7cbddd;
  font: 9px/1 var(--mono);
  animation: pixel-release 0.65s ease-out var(--tile-delay, 0ms) both;
}
.portrait-frame.is-decoding::after {
  content: "";
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 15px 2px rgba(var(--accent-rgb), 0.35);
  pointer-events: none;
  animation: scan-pass 1.7s ease-in-out both;
}
.transmission-particle {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  background: var(--accent);
  animation: transmission 0.75s ease-out both;
}
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .hero-copy {
    animation: rise-in 0.7s ease-out both;
  }
  html:not([data-motion="off"]) .hero h1 .gradient-word {
    animation: word-shimmer 9s linear infinite;
  }
  html:not([data-motion="off"]) .bug-cell.is-bug .icon {
    animation: bug-in 0.12s ease-out both;
  }
  html:not([data-motion="off"]) .reveal-pending {
    opacity: 0;
  }
  html:not([data-motion="off"]) .reveal-visible {
    animation: rise-in 0.55s ease-out both;
  }
}
html[data-motion="off"] {
  scroll-behavior: auto;
}
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation: none !important;
  transition: none !important;
}
html[data-motion="off"] [data-tilt] {
  transform: none !important;
}
html[data-motion="off"] .pixel-overlay {
  display: none;
}
html[data-motion="off"] .reveal-pending {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  [data-tilt] {
    transform: none !important;
  }
  .pixel-overlay {
    display: none;
  }
  .reveal-pending {
    opacity: 1;
  }
}