#chaos-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-chaos);
  overflow: hidden;
}
.chaos-sprite { position: absolute; pointer-events: none; }

/* ─── Sky layer ─── */
.sprite-falcon {
  width: 240px;
  left: -260px;
  animation: drift-right 18s linear forwards;
}
@keyframes drift-right {
  from { transform: translateX(0) translateY(0); }
  to   { transform: translateX(calc(100vw + 260px)) translateY(-20px); }
}

.sprite-ufo {
  width: 140px;
  top: 8vh;
  animation: ufo-bob 8s ease-in-out forwards;
}
@keyframes ufo-bob {
  0%   { transform: translateY(-200px); }
  20%  { transform: translateY(0); }
  60%  { transform: translateY(10px); }
  100% { transform: translateY(-200px); }
}
.sprite-ufo-beam {
  width: 80px;
  top: 20vh;
  animation: beam-pulse 6s ease-in-out forwards;
  transform-origin: top;
}
@keyframes beam-pulse {
  0%   { opacity: 0; transform: scaleY(0); }
  20%  { opacity: 0.8; transform: scaleY(1); }
  80%  { opacity: 0.8; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(0); }
}

.sprite-crow {
  width: 90px;
  left: -120px;
  animation: drift-right 14s linear forwards;
}

.sprite-paper-plane {
  width: 80px;
  left: -100px;
  animation: paper-glide 12s linear forwards;
}
@keyframes paper-glide {
  from { transform: translate(0, 0) rotate(-10deg); }
  to   { transform: translate(calc(100vw + 200px), 200px) rotate(10deg); }
}

/* ─── Ground layer ─── */
.sprite-trex {
  width: 90px;
  bottom: 10px;
  left: -120px;
  animation: trex-sprint 4.5s linear forwards;
}
@keyframes trex-sprint {
  0%   { transform: translateX(0); }
  78%  { transform: translateX(calc(100vw + 120px)); }
  85%  { transform: translateX(calc(100vw + 120px)) scale(1.05); }
  100% { transform: translateX(calc(100vw + 120px)) scale(1); opacity: 0; }
}

.sprite-gremlin {
  width: 80px;
  bottom: -90px;
  animation: gremlin-pop 4s ease-in-out forwards;
  transition: opacity 0.4s ease;
}
.sprite-gremlin.swapping { opacity: 0; }
@keyframes gremlin-pop {
  0%   { transform: translateY(0); }
  20%  { transform: translateY(-90px); }
  60%  { transform: translateY(-100px); }
  100% { transform: translateY(0); }
}

.sprite-delorean {
  width: 200px;
  bottom: 12px;
  left: -220px;
  animation: drive-right 4s cubic-bezier(.2,.6,.2,1) forwards;
}
.sprite-delorean-fire {
  width: 80px;
  bottom: 12px;
  left: -300px;
  animation: drive-right 4s cubic-bezier(.2,.6,.2,1) forwards;
  opacity: 0.85;
}
@keyframes drive-right {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 320px)); }
}

/* ─── Edge layer ─── */
.chaos-intruder {
  top: 0;
  left: 0;
  right: 0;
  background: var(--c-red);
  color: var(--c-cream);
  font-family: var(--f-mono);
  font-weight: bold;
  letter-spacing: 0.1em;
  text-align: center;
  padding: var(--s-xs) var(--s-sm);
  border-bottom: 3px solid var(--c-ink);
  opacity: 0;
  animation: alert-fade 6.5s ease-in-out forwards;
}
@keyframes alert-fade {
  0%   { opacity: 0; transform: translateY(-100%); }
  8%   { opacity: 1; transform: translateY(0); }
  85%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-100%); }
}

.chaos-sticky {
  width: 140px; height: 140px;
  background-size: contain;
  background-repeat: no-repeat;
  font-family: var(--f-mono);
  color: var(--c-ink);
  padding: var(--s-md);
  font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  right: 0;
  transform: rotate(-4deg) translateX(160px);
  animation: sticky-in 9s ease-in-out forwards;
}
@keyframes sticky-in {
  0%   { transform: rotate(-4deg) translateX(160px); }
  10%  { transform: rotate(-4deg) translateX(0); }
  88%  { transform: rotate(-4deg) translateX(0); }
  100% { transform: rotate(-4deg) translateX(0) translateY(120vh); }
}

.chaos-bubble {
  background: var(--c-cream);
  color: var(--c-ink);
  font-family: var(--f-mono);
  padding: var(--s-sm);
  border: 3px solid var(--c-ink);
  box-shadow: var(--shadow-wonky);
  max-width: 260px;
  border-radius: var(--r-md);
  transform: scale(0);
  animation: bubble-pop 5s ease-out forwards;
}
@keyframes bubble-pop {
  0%   { transform: scale(0); }
  10%  { transform: scale(1.05); }
  20%  { transform: scale(1); }
  85%  { transform: scale(1); }
  100% { transform: scale(0); }
}

/* ─── News ticker (fixed bar, scrolling text) ─── */
.chaos-ticker {
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--c-ink);
  color: var(--c-orange);
  font-family: var(--f-mono);
  padding: var(--s-xs) 0;
  white-space: nowrap;
  overflow: hidden;
  border-top: 3px solid var(--c-burgundy);
  opacity: 0;
  animation: ticker-bar-in 14s ease forwards;
}
@keyframes ticker-bar-in {
  0%    { opacity: 0; }
  4%    { opacity: 1; }
  90%   { opacity: 1; }
  100%  { opacity: 0; }
}
.chaos-ticker .ticker-text {
  display: inline-block;
  padding-left: 100%;
  animation: ticker-scroll 12s linear 0.5s forwards;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-200%); }
}

/* ─── Cursor-reactive ─── */
.chaos-laser {
  position: fixed;
  top: 0; left: 0;
  width: 40px;
  pointer-events: none;
  transition: filter 200ms ease;
  filter: drop-shadow(0 0 6px rgba(255, 0, 0, 0.5));
  will-change: transform;
  z-index: calc(var(--z-chaos) + 1);
}
.chaos-laser.locked {
  filter: drop-shadow(0 0 18px rgba(255, 0, 0, 0.9));
}

/* ─── Scroll-reactive ─── */
#survival-meter {
  position: fixed;
  top: 90px;
  right: var(--s-sm);
  z-index: var(--z-chaos);
  background: rgba(26, 23, 34, 0.85);
  color: var(--c-orange);
  border: 2px solid var(--c-red);
  padding: var(--s-xs) var(--s-sm);
  font-family: var(--f-mono);
  font-size: 0.85rem;
  text-align: center;
  pointer-events: none;
  transform: rotate(2deg);
}
#survival-meter .label {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--c-cream);
}
#survival-meter .value {
  display: block;
  font-size: 1.4rem;
  font-weight: bold;
}
.survival-tombstone {
  width: 32px;
  display: block;
  margin: 4px auto 0;
}

/* ─── Click-reactive ─── */
.chaos-confetti {
  position: fixed;
  width: 24px;
  pointer-events: none;
  animation: confetti-fly 1.2s ease-out forwards;
}
@keyframes confetti-fly {
  0%   { transform: translate(-50%, -50%) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(540deg); opacity: 0; }
}

.logo.spinning { animation: logo-spin 700ms ease-out; }
@keyframes logo-spin {
  from { transform: rotate(0deg) scale(1); }
  60%  { transform: rotate(360deg) scale(1.15); }
  to   { transform: rotate(360deg) scale(1); }
}

.chaos-burst {
  position: fixed;
  width: 200px;
  pointer-events: none;
  animation: burst-out 1s ease-out forwards;
}
@keyframes burst-out {
  from { opacity: 0; transform: scale(0.4); }
  60%  { opacity: 1; transform: scale(1.2); }
  to   { opacity: 0; transform: scale(1.6); }
}

.page-tilt { animation: tilt 600ms ease-out; }
@keyframes tilt {
  0%   { transform: rotate(0deg); }
  30%  { transform: rotate(3deg); }
  60%  { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}

/* ─── Scroll shake ─── */
.shake-on-enter { animation: heading-shake 0.7s cubic-bezier(.36,.07,.19,.97) forwards; }
@keyframes heading-shake {
  0%   { transform: translate(0); }
  10%  { transform: translate(-3px, 1px) rotate(-1deg); }
  20%  { transform: translate(4px, -2px) rotate(1deg); }
  30%  { transform: translate(-3px, 2px) rotate(0deg); }
  40%  { transform: translate(2px, 1px) rotate(1deg); }
  50%  { transform: translate(-2px, -1px) rotate(-1deg); }
  60%  { transform: translate(3px, 1px) rotate(0deg); }
  100% { transform: translate(0); }
}