/* MESH STUDIOS - Hostile System Takeover Glitch Effects */
/* Simulating system being hacked/corrupted by an unknown entity */

/* ===== EFFECT 1: SYSTEM CORRUPTION ===== */
.mesh-glitch-corrupt {
  animation: mesh-corrupt-shake 0.15s ease-in-out infinite,
             mesh-corrupt-distort 0.3s linear infinite,
             mesh-corrupt-flicker 0.1s linear infinite;
}

@keyframes mesh-corrupt-shake {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-3px, 2px); }
  20% { transform: translate(4px, -1px); }
  30% { transform: translate(-2px, -3px); }
  40% { transform: translate(5px, 3px); }
  50% { transform: translate(-4px, -2px); }
  60% { transform: translate(3px, 4px); }
  70% { transform: translate(-5px, 1px); }
  80% { transform: translate(2px, -4px); }
  90% { transform: translate(-1px, 3px); }
  100% { transform: translate(0, 0); }
}

@keyframes mesh-corrupt-distort {
  0% { transform: scaleY(1) skew(0deg); }
  25% { transform: scaleY(0.95) skew(2deg); }
  50% { transform: scaleY(1.05) skew(-1deg); }
  75% { transform: scaleY(0.98) skew(3deg); }
  100% { transform: scaleY(1) skew(0deg); }
}

@keyframes mesh-corrupt-flicker {
  0%, 90%, 100% { opacity: 1; }
  5% { opacity: 0.2; }
  10% { opacity: 0.8; }
  15% { opacity: 0.1; }
  20% { opacity: 0.9; }
  25% { opacity: 0.3; }
}

/* ===== EFFECT 2: DATA BREACH ===== */
.mesh-glitch-breach {
  position: relative;
  animation: mesh-breach-base 0.2s linear infinite;
}

.mesh-glitch-breach::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  color: #ff0000;
  z-index: -1;
  animation: mesh-breach-red 0.4s linear infinite;
}

.mesh-glitch-breach::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  color: #00ff00;
  z-index: -2;
  animation: mesh-breach-green 0.3s linear infinite;
}

@keyframes mesh-breach-base {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(1px, -2px); }
  60% { transform: translate(3px, 2px); }
  80% { transform: translate(-1px, -1px); }
  100% { transform: translate(0, 0); }
}

@keyframes mesh-breach-red {
  0% { transform: translate(0, 0); opacity: 0.8; }
  25% { transform: translate(2px, -1px); opacity: 0.6; }
  50% { transform: translate(-1px, 2px); opacity: 0.9; }
  75% { transform: translate(-3px, -1px); opacity: 0.4; }
  100% { transform: translate(0, 0); opacity: 0.8; }
}

@keyframes mesh-breach-green {
  0% { transform: translate(0, 0); opacity: 0.6; }
  30% { transform: translate(-2px, 1px); opacity: 0.8; }
  60% { transform: translate(3px, -2px); opacity: 0.3; }
  90% { transform: translate(1px, 3px); opacity: 0.7; }
  100% { transform: translate(0, 0); opacity: 0.6; }
}

/* ===== EFFECT 3: HOSTILE TAKEOVER ===== */
.mesh-glitch-hostile {
  animation: mesh-hostile-violent 0.05s ease-in-out infinite,
             mesh-hostile-seizure 0.1s linear infinite;
}

@keyframes mesh-hostile-violent {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  10% { transform: translate(-5px, 3px) rotate(-2deg) scale(0.95); }
  20% { transform: translate(6px, -4px) rotate(1deg) scale(1.05); }
  30% { transform: translate(-3px, -5px) rotate(-3deg) scale(0.98); }
  40% { transform: translate(7px, 2px) rotate(2deg) scale(1.02); }
  50% { transform: translate(-4px, 6px) rotate(-1deg) scale(0.97); }
  60% { transform: translate(5px, -3px) rotate(3deg) scale(1.03); }
  70% { transform: translate(-6px, 4px) rotate(-2deg) scale(0.96); }
  80% { transform: translate(3px, -6px) rotate(1deg) scale(1.04); }
  90% { transform: translate(-2px, 5px) rotate(-3deg) scale(0.99); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

@keyframes mesh-hostile-seizure {
  0%, 100% { opacity: 1; filter: brightness(1); }
  10% { opacity: 0.1; filter: brightness(2); }
  20% { opacity: 0.8; filter: brightness(0.5); }
  30% { opacity: 0.2; filter: brightness(1.5); }
  40% { opacity: 0.9; filter: brightness(0.8); }
  50% { opacity: 0.05; filter: brightness(3); }
  60% { opacity: 0.7; filter: brightness(0.3); }
  70% { opacity: 0.3; filter: brightness(1.8); }
  80% { opacity: 0.95; filter: brightness(0.6); }
  90% { opacity: 0.15; filter: brightness(2.5); }
}

/* ===== EFFECT 4: VHS DATAMOSH (inspired by classic glitch) ===== */
.mesh-glitch-datamosh {
  position: relative;
  animation: mesh-datamosh-base 0.1s ease-in-out infinite;
}

.mesh-glitch-datamosh::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 4px;
  color: inherit;
  text-shadow: -1px 0 #ff6600;
  animation: mesh-datamosh-clip1 3s linear infinite alternate-reverse;
  overflow: hidden;
}

.mesh-glitch-datamosh::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: -4px;
  color: inherit;
  text-shadow: 1px 0 #00ffff;
  animation: mesh-datamosh-clip2 4s linear infinite alternate-reverse;
  overflow: hidden;
}

@keyframes mesh-datamosh-base {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-1px, 0); }
  40% { transform: translate(1px, 0); }
  60% { transform: translate(0, -1px); }
  80% { transform: translate(0, 1px); }
}

@keyframes mesh-datamosh-clip1 {
  0% { clip: rect(42px, 9999px, 44px, 0); }
  5% { clip: rect(12px, 9999px, 59px, 0); }
  10% { clip: rect(48px, 9999px, 29px, 0); }
  15% { clip: rect(42px, 9999px, 73px, 0); }
  20% { clip: rect(63px, 9999px, 27px, 0); }
  25% { clip: rect(34px, 9999px, 55px, 0); }
  30% { clip: rect(86px, 9999px, 73px, 0); }
  35% { clip: rect(20px, 9999px, 20px, 0); }
  40% { clip: rect(26px, 9999px, 60px, 0); }
  45% { clip: rect(25px, 9999px, 66px, 0); }
  50% { clip: rect(57px, 9999px, 98px, 0); }
  55% { clip: rect(5px, 9999px, 46px, 0); }
  60% { clip: rect(82px, 9999px, 31px, 0); }
  65% { clip: rect(54px, 9999px, 27px, 0); }
  70% { clip: rect(28px, 9999px, 99px, 0); }
  75% { clip: rect(45px, 9999px, 69px, 0); }
  80% { clip: rect(23px, 9999px, 85px, 0); }
  85% { clip: rect(54px, 9999px, 84px, 0); }
  90% { clip: rect(45px, 9999px, 47px, 0); }
  95% { clip: rect(37px, 9999px, 20px, 0); }
  100% { clip: rect(4px, 9999px, 91px, 0); }
}

@keyframes mesh-datamosh-clip2 {
  0% { clip: rect(65px, 9999px, 100px, 0); }
  5% { clip: rect(52px, 9999px, 74px, 0); }
  10% { clip: rect(79px, 9999px, 85px, 0); }
  15% { clip: rect(75px, 9999px, 5px, 0); }
  20% { clip: rect(67px, 9999px, 61px, 0); }
  25% { clip: rect(14px, 9999px, 79px, 0); }
  30% { clip: rect(1px, 9999px, 66px, 0); }
  35% { clip: rect(86px, 9999px, 30px, 0); }
  40% { clip: rect(23px, 9999px, 98px, 0); }
  45% { clip: rect(85px, 9999px, 72px, 0); }
  50% { clip: rect(71px, 9999px, 75px, 0); }
  55% { clip: rect(2px, 9999px, 48px, 0); }
  60% { clip: rect(30px, 9999px, 16px, 0); }
  65% { clip: rect(59px, 9999px, 50px, 0); }
  70% { clip: rect(41px, 9999px, 62px, 0); }
  75% { clip: rect(2px, 9999px, 82px, 0); }
  80% { clip: rect(47px, 9999px, 73px, 0); }
  85% { clip: rect(3px, 9999px, 27px, 0); }
  90% { clip: rect(26px, 9999px, 55px, 0); }
  95% { clip: rect(42px, 9999px, 97px, 0); }
  100% { clip: rect(38px, 9999px, 49px, 0); }
}

/* ===== EFFECT 5: BROKEN TEXT SLICES ===== */
.mesh-glitch-random {
  position: relative;
}

.mesh-glitch-random::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  color: inherit;
  overflow: hidden;
  animation: mesh-broken-slice1 2s linear infinite;
}

.mesh-glitch-random::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  color: inherit;
  overflow: hidden;
  animation: mesh-broken-slice2 1.8s linear infinite;
}

@keyframes mesh-broken-slice1 {
  0% { clip: rect(10px, 9999px, 30px, 0); transform: translateX(8px); }
  5% { clip: rect(45px, 9999px, 60px, 0); transform: translateX(-12px); }
  10% { clip: rect(75px, 9999px, 85px, 0); transform: translateX(15px); }
  15% { clip: rect(20px, 9999px, 40px, 0); transform: translateX(-5px); }
  20% { clip: rect(90px, 9999px, 110px, 0); transform: translateX(20px); }
  25% { clip: rect(5px, 9999px, 25px, 0); transform: translateX(-18px); }
  30% { clip: rect(60px, 9999px, 80px, 0); transform: translateX(7px); }
  35% { clip: rect(35px, 9999px, 50px, 0); transform: translateX(-14px); }
  40% { clip: rect(95px, 9999px, 105px, 0); transform: translateX(11px); }
  45% { clip: rect(15px, 9999px, 35px, 0); transform: translateX(-8px); }
  50% { clip: rect(70px, 9999px, 90px, 0); transform: translateX(16px); }
  55% { clip: rect(40px, 9999px, 55px, 0); transform: translateX(-22px); }
  60% { clip: rect(85px, 9999px, 100px, 0); transform: translateX(6px); }
  65% { clip: rect(25px, 9999px, 45px, 0); transform: translateX(-10px); }
  70% { clip: rect(65px, 9999px, 75px, 0); transform: translateX(13px); }
  75% { clip: rect(50px, 9999px, 70px, 0); transform: translateX(-7px); }
  80% { clip: rect(80px, 9999px, 95px, 0); transform: translateX(19px); }
  85% { clip: rect(30px, 9999px, 50px, 0); transform: translateX(-15px); }
  90% { clip: rect(55px, 9999px, 65px, 0); transform: translateX(9px); }
  95% { clip: rect(0px, 9999px, 20px, 0); transform: translateX(-11px); }
  100% { clip: rect(75px, 9999px, 85px, 0); transform: translateX(14px); }
}

@keyframes mesh-broken-slice2 {
  0% { clip: rect(50px, 9999px, 65px, 0); transform: translateX(-6px); }
  5% { clip: rect(15px, 9999px, 35px, 0); transform: translateX(18px); }
  10% { clip: rect(80px, 9999px, 100px, 0); transform: translateX(-13px); }
  15% { clip: rect(30px, 9999px, 45px, 0); transform: translateX(21px); }
  20% { clip: rect(60px, 9999px, 75px, 0); transform: translateX(-9px); }
  25% { clip: rect(5px, 9999px, 20px, 0); transform: translateX(16px); }
  30% { clip: rect(85px, 9999px, 95px, 0); transform: translateX(-20px); }
  35% { clip: rect(40px, 9999px, 60px, 0); transform: translateX(12px); }
  40% { clip: rect(70px, 9999px, 85px, 0); transform: translateX(-17px); }
  45% { clip: rect(20px, 9999px, 40px, 0); transform: translateX(8px); }
  50% { clip: rect(90px, 9999px, 105px, 0); transform: translateX(-14px); }
  55% { clip: rect(35px, 9999px, 50px, 0); transform: translateX(23px); }
  60% { clip: rect(65px, 9999px, 80px, 0); transform: translateX(-11px); }
  65% { clip: rect(10px, 9999px, 25px, 0); transform: translateX(15px); }
  70% { clip: rect(75px, 9999px, 90px, 0); transform: translateX(-8px); }
  75% { clip: rect(45px, 9999px, 55px, 0); transform: translateX(19px); }
  80% { clip: rect(55px, 9999px, 70px, 0); transform: translateX(-16px); }
  85% { clip: rect(25px, 9999px, 45px, 0); transform: translateX(10px); }
  90% { clip: rect(85px, 9999px, 100px, 0); transform: translateX(-12px); }
  95% { clip: rect(0px, 9999px, 15px, 0); transform: translateX(17px); }
  100% { clip: rect(65px, 9999px, 80px, 0); transform: translateX(-7px); }
}

/* ===== EFFECT 6: CLASSIC GLITCH ===== */
.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
h1.glitch {
  color: black;
  font-family: 'SF Mono', 'Monaco', 'Consolas', 'Roboto Mono', monospace;
  font-weight: 800;
  position: relative;
  font-size: 128px;
  padding: 0;
  margin: 0;
}
h1.glitch::before, h1.glitch::after {
  padding: 0;
  color: black;
  content: attr(data-text);
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  overflow: hidden;
  top: 0;
}
h1.glitch::before {
  left: 3px;
  text-shadow: -2px 0 black;
  animation-name: glitch-animation-1;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: reverse-alternate;
}
h1.glitch::after {
  left: -3px;
  text-shadow: -2px 0 black;
  animation-name: glitch-animation-2;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: reverse-alternate;
}

@keyframes glitch-animation-1 {
  0% {
    clip: rect(87px, 350px, 55px, 30px);
  }
  5% {
    clip: rect(107px, 350px, 116px, 30px);
  }
  10% {
    clip: rect(106px, 350px, 58px, 30px);
  }
  15% {
    clip: rect(149px, 350px, 8px, 30px);
  }
  20% {
    clip: rect(13px, 350px, 63px, 30px);
  }
  25% {
    clip: rect(80px, 350px, 141px, 30px);
  }
  30% {
    clip: rect(83px, 350px, 73px, 30px);
  }
  35% {
    clip: rect(128px, 350px, 136px, 30px);
  }
  40% {
    clip: rect(142px, 350px, 140px, 30px);
  }
  45% {
    clip: rect(54px, 350px, 150px, 30px);
  }
  50% {
    clip: rect(6px, 350px, 99px, 30px);
  }
  55% {
    clip: rect(50px, 350px, 43px, 30px);
  }
  60% {
    clip: rect(4px, 350px, 23px, 30px);
  }
  65% {
    clip: rect(137px, 350px, 32px, 30px);
  }
  70% {
    clip: rect(102px, 350px, 100px, 30px);
  }
  75% {
    clip: rect(61px, 350px, 11px, 30px);
  }
  80% {
    clip: rect(109px, 350px, 130px, 30px);
  }
  85% {
    clip: rect(8px, 350px, 133px, 30px);
  }
  90% {
    clip: rect(35px, 350px, 119px, 30px);
  }
  95% {
    clip: rect(105px, 350px, 14px, 30px);
  }
  100% {
    clip: rect(77px, 350px, 75px, 30px);
  }
}
@keyframes glitch-animation-2 {
  0% {
    clip: rect(113px, 350px, 20px, 30px);
  }
  5% {
    clip: rect(120px, 350px, 85px, 30px);
  }
  10% {
    clip: rect(120px, 350px, 18px, 30px);
  }
  15% {
    clip: rect(137px, 350px, 71px, 30px);
  }
  20% {
    clip: rect(36px, 350px, 30px, 30px);
  }
  25% {
    clip: rect(28px, 350px, 124px, 30px);
  }
  30% {
    clip: rect(4px, 350px, 84px, 30px);
  }
  35% {
    clip: rect(73px, 350px, 16px, 30px);
  }
  40% {
    clip: rect(149px, 350px, 2px, 30px);
  }
  45% {
    clip: rect(149px, 350px, 29px, 30px);
  }
  50% {
    clip: rect(34px, 350px, 118px, 30px);
  }
  55% {
    clip: rect(5px, 350px, 71px, 30px);
  }
  60% {
    clip: rect(45px, 350px, 97px, 30px);
  }
  65% {
    clip: rect(10px, 350px, 82px, 30px);
  }
  70% {
    clip: rect(104px, 350px, 60px, 30px);
  }
  75% {
    clip: rect(64px, 350px, 47px, 30px);
  }
  80% {
    clip: rect(90px, 350px, 30px, 30px);
  }
  85% {
    clip: rect(73px, 350px, 93px, 30px);
  }
  90% {
    clip: rect(107px, 350px, 6px, 30px);
  }
  95% {
    clip: rect(116px, 350px, 41px, 30px);
  }
  100% {
    clip: rect(111px, 350px, 7px, 30px);
  }
}

/* ===== UTILITY CLASSES ===== */
.mesh-glitch-pause {
  animation-play-state: paused !important;
}

.mesh-glitch-slow {
  animation-duration: 4s !important;
}

.mesh-glitch-fast {
  animation-duration: 0.5s !important;
}

/* Cube Formation Animation (preserved from original) */
.cube-scene {
  width: 200px;
  height: 250px;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.scene {
  width: 200px;
  height: 250px;
  position: relative;
  margin: 0 auto;
  perspective: 1000px;
}

.cube {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 2;
  transform: rotateX(-36deg) rotateY(45deg);
  transform-style: preserve-3d;
}

.cube_count_1 {
  z-index: 2;
  left: 50px;
  animation: cube 2s 1s ease infinite;
}

.cube_count_1 .cube__face {
  animation-delay: 1s;
}

.cube_count_2 {
  z-index: 1;
  top: 38px;
  left: -16px;
  animation: cube 2s 1.1s ease infinite;
}

.cube_count_2 .cube__face {
  animation-delay: 1.1s;
}

.cube_count_3 {
  z-index: 1;
  top: 38px;
  left: 116px;
  animation: cube 2s 1.2s ease infinite;
}

.cube_count_3 .cube__face {
  animation-delay: 1.2s;
}

.cube_count_4 {
  z-index: 2;
  top: 116px;
  left: -16px;
  animation: cube 2s 1.1s ease infinite;
}

.cube_count_4 .cube__face {
  animation-delay: 1.1s;
}

.cube_count_5 {
  z-index: 1;
  top: 116px;
  left: 116px;
  animation: cube 2s 1.2s ease infinite;
}

.cube_count_5 .cube__face {
  animation-delay: 1.2s;
}

.cube_count_6 {
  z-index: 0;
  top: 154px;
  left: 50px;
  animation: cube 2s 1.3s ease infinite;
}

.cube_count_6 .cube__face {
  animation-delay: 1.3s;
}

.cube__face {
  width: 100px;
  height: 100px;
  position: absolute;
  background: #fff;
  border: 6px solid black;
}

.cube__face--front {
  box-shadow: inset -6px -6px 0 0 black;
  animation: cube-face-front 2s ease infinite;
  transform: rotateY(0deg) translateZ(50px);
}

.cube__face--right {
  animation: cube-face-right 2s ease infinite;
  transform: rotateY(90deg) translateZ(50px);
}

.cube__face--back {
  animation: cube-face-back 2s ease infinite;
  transform: rotateY(180deg) translateZ(50px);
}

.cube__face--left {
  box-shadow: inset 6px -6px 0 0 black;
  animation: cube-face-left 2s ease infinite;
  transform: rotateY(-90deg) translateZ(50px);
}

.cube__face--top {
  box-shadow: inset -6px 6px 0 0 black;
  animation: cube-face-top 2s ease infinite;
  transform: rotateX(90deg) translateZ(50px);
}

.cube__face--bottom {
  transform: rotateX(-90deg) translateZ(50px);
}

@keyframes cube {
  0% { transform: rotateX(-36deg) rotateY(45deg) rotateZ(0); }
  100% { transform: rotateX(-126deg) rotateY(0deg) rotateZ(-45deg); }
}

@keyframes cube-face-front {
  0% { box-shadow: inset -6px -6px 0 0 black; }
  100% { box-shadow: inset 0 0 0 0 black; }
}

@keyframes cube-face-right {
  0% { box-shadow: inset 0 0 0 0 black; }
  50% { box-shadow: inset 0 0 0 0 black; }
  100% { box-shadow: inset 6px -6px 0 0 black; }
}

@keyframes cube-face-back {
  0% { box-shadow: inset 0 0 0 0 black; }
  100% { box-shadow: inset -6px -6px 0 0 black; }
}

@keyframes cube-face-left {
  0% { box-shadow: inset 6px -6px 0 0 black; }
  100% { box-shadow: inset 0 0 0 0 black; }
}

@keyframes cube-face-top {
  0% { box-shadow: inset -6px 6px 0 0 black; }
  50% { box-shadow: inset 0 0 0 0 black; }
  100% { box-shadow: inset 6px -6px 0 0 black; }
}

/* Animation control */
.animation-paused {
  animation-play-state: paused !important;
}

.animation-paused .cube__face {
  animation-play-state: paused !important;
}

/* Smooth transition to front-facing logo position */
.cube-stopped {
  animation: none !important;
  transform: rotateX(-36deg) rotateY(45deg) rotateZ(0deg) !important;
  transition: transform 1s ease-out !important;
}

.cube-stopped .cube__face {
  animation: none !important;
  transition: box-shadow 1s ease-out !important;
}

/* Final logo state - clean front-facing position */
.cube-stopped .cube__face--front {
  box-shadow: inset -6px -6px 0 0 black !important;
}

.cube-stopped .cube__face--right {
  box-shadow: inset 6px -6px 0 0 black !important;
}

.cube-stopped .cube__face--back {
  box-shadow: inset -6px -6px 0 0 black !important;
}

.cube-stopped .cube__face--left {
  box-shadow: inset 6px -6px 0 0 black !important;
}

.cube-stopped .cube__face--top {
  box-shadow: inset -6px 6px 0 0 black !important;
}

/* Fade out animation */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Organic engulfing animation */
@keyframes organicEngulf {
  0% { 
    transform: scale(1);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    filter: blur(50px);
  }
  30% {
    transform: scale(50);
    border-radius: 50% 60% 20% 80% / 30% 70% 50% 50%;
    filter: blur(30px);
  }
  70% {
    transform: scale(200);
    border-radius: 40% 50% 70% 30% / 80% 20% 60% 40%;
    filter: blur(10px);
  }
  100% { 
    transform: scale(2000);
    border-radius: 50%;
    filter: blur(0px);
  }
}

/* === Phase 3 Glitch Enhancements === */
.phase3-glitch-text {
  position: relative;
  display: inline-block;
  filter: contrast(1.15) saturate(1.08);
}

.phase3-glitch-level-1 {
  animation: phase3-glitch-soft 1.4s steps(2) infinite;
}

.phase3-glitch-level-2 {
  animation: phase3-glitch-soft 1.1s steps(3) infinite;
}

.phase3-glitch-level-3 {
  animation: phase3-glitch-hard 0.8s steps(4) infinite;
}

.phase3-glitch-level-4 {
  animation: phase3-glitch-max 0.55s steps(5) infinite;
}

@keyframes phase3-glitch-soft {
  0%, 100% {
    text-shadow: 0 0 4px rgba(255,255,255,0.18);
    transform: translate3d(0,0,0);
  }
  10% {
    text-shadow: -2px 0 rgba(0,255,255,0.45), 2px 0 rgba(255,0,255,0.35);
    transform: translate3d(-1px,-1px,0);
  }
  22% {
    text-shadow: 3px 0 rgba(0,255,180,0.4), -2px 0 rgba(255,0,120,0.4);
    transform: translate3d(1px,0.5px,0);
  }
  35% {
    text-shadow: 0 0 6px rgba(255,255,255,0.28);
  }
  48% {
    text-shadow: -3px 0 rgba(0,255,240,0.5), 4px 0 rgba(255,100,200,0.45);
    transform: skewX(2deg);
  }
  60% {
    text-shadow: 0 0 3px rgba(255,255,255,0.18);
    transform: translate3d(0.5px,-1px,0);
  }
  75% {
    text-shadow: 0 0 8px rgba(255,255,255,0.35);
    transform: translate3d(-0.5px,1px,0);
  }
}

@keyframes phase3-glitch-hard {
  0%, 100% {
    text-shadow: 0 0 6px rgba(255,255,255,0.3);
    transform: translate3d(0,0,0);
  }
  8% {
    text-shadow: -6px 0 rgba(0,255,200,0.6), 5px 0 rgba(255,0,200,0.55);
    transform: translate3d(-3px,-2px,0) skewX(-3deg);
  }
  20% {
    text-shadow: 0 0 10px rgba(255,255,255,0.4);
    transform: translate3d(2px,2px,0) skewY(2deg);
  }
  34% {
    text-shadow: 5px 0 rgba(0,180,255,0.7), -4px 0 rgba(255,120,220,0.6);
    transform: translate3d(-3px,1px,0);
  }
  52% {
    text-shadow: 0 0 12px rgba(255,255,255,0.45);
    transform: translate3d(3px,-1px,0) skewX(4deg);
  }
  68% {
    text-shadow: -4px 0 rgba(0,200,255,0.7), 6px 0 rgba(255,80,160,0.6);
    transform: translate3d(2px,3px,0);
  }
  84% {
    text-shadow: 0 0 9px rgba(255,255,255,0.5);
    transform: translate3d(-2px,-2px,0);
  }
}

@keyframes phase3-glitch-max {
  0%, 100% {
    text-shadow: 0 0 8px rgba(255,255,255,0.35);
    transform: translate3d(0,0,0);
  }
  6% {
    text-shadow: -8px 0 rgba(0,255,255,0.8), 8px 0 rgba(255,0,200,0.75);
    transform: translate3d(-4px,-3px,0) skewX(-6deg);
  }
  18% {
    text-shadow: 0 0 16px rgba(255,255,255,0.55);
    transform: translate3d(4px,3px,0) skewY(4deg);
  }
  32% {
    text-shadow: 8px 0 rgba(0,160,255,0.85), -8px 0 rgba(255,120,220,0.75);
    transform: translate3d(-5px,4px,0) scale(1.01);
  }
  48% {
    text-shadow: 0 0 18px rgba(255,255,255,0.65);
    transform: translate3d(5px,-4px,0) skewX(6deg);
  }
  64% {
    text-shadow: -9px 0 rgba(0,200,255,0.85), 9px 0 rgba(255,80,200,0.75);
    transform: translate3d(6px,3px,0) skewY(-5deg);
  }
  82% {
    text-shadow: 0 0 14px rgba(255,255,255,0.6);
    transform: translate3d(-4px,-3px,0);
  }
}

.phase3-letter-sense {
  letter-spacing: 0.18em;
}

body.phase3-noise-level-1 .noise {
  opacity: 0.08;
  backdrop-filter: blur(1px);
}

body.phase3-noise-level-2 .noise {
  opacity: 0.12;
  animation: phase3-noise-shift 1.2s linear infinite;
  backdrop-filter: blur(1.5px);
}

body.phase3-noise-level-3 .noise {
  opacity: 0.18;
  animation: phase3-noise-shift 0.8s linear infinite;
  backdrop-filter: blur(2px);
}

body.phase3-noise-level-4 .noise {
  opacity: 0.24;
  animation: phase3-noise-shift 0.55s linear infinite;
  backdrop-filter: blur(2.4px);
}

body.phase3-noise-level-2 .scan,
body.phase3-noise-level-3 .scan,
body.phase3-noise-level-4 .scan {
  opacity: 0.18;
  animation: phase3-scan-roll 2.5s linear infinite;
}

body.phase3-noise-level-3 .scan {
  opacity: 0.22;
}

body.phase3-noise-level-4 .scan {
  opacity: 0.3;
}

@keyframes phase3-noise-shift {
  0% { transform: translate3d(0,0,0); }
  25% { transform: translate3d(2px,-2px,0); }
  50% { transform: translate3d(-3px,1px,0); }
  75% { transform: translate3d(2px,3px,0); }
  100% { transform: translate3d(0,0,0); }
}

@keyframes phase3-scan-roll {
  0% { background-position: 0 0; }
  100% { background-position: 0 100%; }
}

/* Screen distortion - monochrome TV static effect */
.screen-distort {
  animation: screen-static 0.05s steps(1) infinite;
}

@keyframes screen-static {
  0% {
    clip-path: inset(12% 0 84% 0);
    filter: brightness(1.2);
  }
  10% {
    clip-path: inset(67% 0 21% 0);
    filter: brightness(0.7);
  }
  20% {
    clip-path: inset(35% 0 48% 0);
    filter: brightness(1.5);
  }
  30% {
    clip-path: inset(89% 0 3% 0);
    filter: brightness(0.5);
  }
  40% {
    clip-path: inset(5% 0 92% 0);
    filter: brightness(1.8);
  }
  50% {
    clip-path: inset(52% 0 37% 0);
    filter: brightness(0.3);
  }
  60% {
    clip-path: inset(78% 0 14% 0);
    filter: brightness(1.3);
  }
  70% {
    clip-path: inset(23% 0 69% 0);
    filter: brightness(0.9);
  }
  80% {
    clip-path: inset(44% 0 51% 0);
    filter: brightness(1.6);
  }
  90% {
    clip-path: inset(91% 0 2% 0);
    filter: brightness(0.4);
  }
  100% {
    clip-path: inset(0 0 100% 0);
    filter: brightness(1);
  }
}