@keyframes tbTremble {
  0% { transform: translate3d(0,0,0); }
  25% { transform: translate3d(2px, -2px, 0); }
  50% { transform: translate3d(-2px, 2px, 0); }
  75% { transform: translate3d(2px, 2px, 0); }
  100% { transform: translate3d(0,0,0); }
}

@keyframes tbCrumble {
  0% { transform: translate3d(0,0,0) rotateX(0deg) rotateY(0deg); }
  100% { transform: translate3d(calc(var(--tb-sx) * 2), calc(var(--tb-sy) * 2), -100px) rotateX(4deg) rotateY(-4deg); }
}

/* Final Dissolve into Abyss with Warp/Scale (Stage 4) */
@keyframes tbDissolve {
  0% { 
    transform: translate3d(calc(var(--tb-sx) * 2), calc(var(--tb-sy) * 2), -100px) rotateX(4deg) rotateY(-4deg) scale(1); 
    filter: blur(0.5px) saturate(1.2); 
    opacity: 1; 
  }
  15% {
    transform: translate3d(calc(var(--tb-sx) * 3), calc(var(--tb-sy) * 3), -150px) rotateX(6deg) rotateY(-6deg) scale(0.98);
    filter: blur(1px) saturate(1.5) contrast(1.2);
    opacity: 1;
  }
  100% { 
    transform: translate3d(calc(var(--tb-sx) * 8), calc(var(--tb-sy) + 600px), -2000px) rotateX(25deg) rotateY(-15deg) scale(0.2); 
    filter: blur(40px) saturate(2) brightness(0); 
    opacity: 0; 
  }
}

/* Tribute Embers (Crown/Potato silhouettes simulated by complex shapes) */
.technoblade-crash-p.tribute {
  width: 12px;
  height: 12px;
  background: #ffd700;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  box-shadow: 0 0 15px #ffd700, 0 0 25px #ff8c00;
}

.technoblade-crash-p.fire {
  background: #ff4500;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  filter: drop-shadow(0 0 10px #ff4500) brightness(1.5);
}

/* Glitch HUD Layer */
#technoblade-finale-video {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 4%;
  opacity: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.92);
  filter: contrast(0.95) saturate(0.95) hue-rotate(calc(var(--tb-hue) * -0.35deg));
  transform: translate3d(0, calc(var(--tb-vy, 0px) + 10px), 0) scale(1);
  transform-origin: 50% 30%;
  will-change: opacity, transform, filter;
}

#technoblade-finale-video.visible {
  animation: tbFinaleIn 1200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes tbFinaleIn {
  0% {
    opacity: 0;
    filter: blur(10px) contrast(0.92) saturate(0.90) hue-rotate(calc(var(--tb-hue) * -0.35deg));
  }
  55% {
    opacity: 1;
    filter: blur(1px) contrast(0.95) saturate(0.95) hue-rotate(calc(var(--tb-hue) * -0.35deg));
  }
  100% {
    opacity: 1;
    filter: blur(0px) contrast(0.95) saturate(0.95) hue-rotate(calc(var(--tb-hue) * -0.35deg));
  }
}

#technoblade-glitch-hud {
  position: fixed;
  inset: 0;
  z-index: 1002;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Courier New', Courier, monospace;
  color: #ff005c;
  font-weight: 900;
  text-transform: uppercase;
  overflow: hidden;
  mix-blend-mode: normal;
}

.tb-glitch-text {
  font-size: 5vw;
  margin: 1rem;
  opacity: 0;
  animation: tbGlitchTextPulse 0.4s steps(2, end) infinite;
  text-shadow: 2px 2px #00e0ff, -2px -2px #ff005c;
}

@keyframes tbGlitchTextPulse {
  0% { opacity: 0; transform: scale(0.9) skew(10deg); }
  50% { opacity: 1; transform: scale(1.1) skew(-10deg); }
  100% { opacity: 0; transform: scale(1) skew(0deg); }
}

/* Nuclear Flash Overlay */
#technoblade-flash {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

.tb-flash-active {
  animation: tbFlashEffect 1.2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes tbFlashEffect {
  0% { opacity: 1; background: #fff; }
  10% { opacity: 0.8; background: #ff005c; }
  100% { opacity: 0; }
}


html.technoblade-crash body {
  overflow: hidden;
}

html.technoblade-crash main,
html.technoblade-crash section,
html.technoblade-crash footer,
html.technoblade-crash .particles,
html.technoblade-crash .video-hero,
html.technoblade-crash .video-overlay,
html.technoblade-crash .fade-spacer {
  perspective: 2500px;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
}

/* Upward shift effect on the whole page container */
html.technoblade-crash-s3 body {
  animation: tbUpwardShift 12s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
}

/* Stage 2: Initial Trembling (Excluded Video/Spacer) */
html.technoblade-crash-s2 main > *,
html.technoblade-crash-s2 section:not(.video-hero) > *,
html.technoblade-crash-s2 footer > *,
html.technoblade-crash-s2 .particles {
  animation: tbTremble 0.08s linear infinite;
}

/* Stage 3: Crumbling into depth (Excluded Video/Spacer) */
html.technoblade-crash-s3 main > *,
html.technoblade-crash-s3 section:not(.video-hero) > *,
html.technoblade-crash-s3 footer > *,
html.technoblade-crash-s3 .particles {
  animation: tbCrumble 4s ease-in-out forwards;
}

/* Stage 4: Continuous Dissolve into Abyss (Excluded Video/Spacer) */
html.technoblade-crash-s4 main > *,
html.technoblade-crash-s4 section:not(.video-hero) > *,
html.technoblade-crash-s4 footer > *,
html.technoblade-crash-s4 .particles,
html.technoblade-crash-s4 .hero-title,
html.technoblade-crash-s4 .hero-subtitle,
html.technoblade-crash-s4 .get-started-render,
html.technoblade-crash-s4 .get-started-render-mid,
html.technoblade-crash-s4 img,
html.technoblade-crash-s4 .container {
  animation: tbDissolve 5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  filter: hue-rotate(180deg) invert(1) !important;
}

/* Video Hero / Video Element / Video Spacer - UNTOUCHED by void but still inverted */
html.technoblade-crash-s4 .video-hero,
html.technoblade-crash-s4 .video-overlay,
html.technoblade-crash-s4 .fade-spacer,
html.technoblade-crash-s4 video {
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
}

/* Ensure ghost elements vanish (but leave video/spacer alone) */
html.technoblade-crash-s4 .hero-title,
html.technoblade-crash-s4 .hero-subtitle,
html.technoblade-crash-s4 .get-started-render,
html.technoblade-crash-s4 .get-started-render-mid,
html.technoblade-crash-s4 .particles {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 1.5s ease-out, visibility 1.5s;
}