/* --- PROTOCOLO DE UNIDAD CORRUPTA --- */ @keyframes not-available { 0% { transform: translate(0); } 33% { transform: translate(1px, -1px); } 66% { transform: translate(-1px, 1px); } 100% { transform: translate(0); } } @keyframes glitch-open { 0% { transform: scaleY(0.005) scaleX(0); opacity: 0; filter: hue-rotate(90deg); } 20% { transform: scaleY(0.005) scaleX(1.1); background: var(--verde-base); } 40% { transform: scaleY(1) scaleX(0.9); clip-path: inset(10% 0 40% 0); } 60% { clip-path: inset(30% 0 10% 0); transform: translateX(-10px) skewX(5deg); } 80% { clip-path: inset(0% 0 70% 0); transform: translateX(10px) skewX(-5deg); } 100% { transform: scale(1) skewX(0); opacity: 1; clip-path: inset(0 0 0 0); } } @keyframes glitch-close { 0% { transform: scale(1) skewX(0); opacity: 1; clip-path: inset(0 0 0 0); } 30% { transform: skewX(20deg) scaleY(1.2); filter: hue-rotate(-90deg); clip-path: inset(20% 0 50% 0); } 60% { transform: skewX(-40deg) scaleY(0.5); background: var(--rojo-error); clip-path: inset(80% 0 0 0); } 80% { transform: scaleY(0.005) scaleX(1.5); opacity: 0.8; } 100% { transform: scaleY(0) scaleX(0); opacity: 0; } } @keyframes glitch-color { 0% { transform: translate(5px, -5px); background: #3f00ff; clip-path: inset(20% 0 80% 0); } 25% { transform: translate(-5px, 5px); background: #ff00ff; clip-path: inset(50% 0 20% 0); } 50% { transform: translate(10px, 0); background: #00ffff; clip-path: inset(10% 0 60% 0); } 75% { transform: translate(-10px, 2px); background: var(--verde-high); clip-path: inset(70% 0 10% 0); } } @keyframes full-glitch { 0% { clip-path: inset(50% 0 30% 0); transform: translate(-5px, 5px); background-color: #222; } 20% { clip-path: inset(10% 0 60% 0); transform: translate(5px, -5px); background-color: var(--verde-base); } 40% { clip-path: inset(80% 0 5% 0); transform: translate(-5px, 0); background-color: #fff; } 60% { clip-path: inset(0 0 0 0); transform: translate(0, 5px); background-color: #000; } 80% { clip-path: inset(40% 0 20% 0); transform: translate(5px, 0); } 100% { clip-path: inset(0 0 0 0); transform: translate(0, 0); background-color: transparent; } } /* Animación de deslizamiento */ @keyframes slide-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes legacy-laser-scan { 0% { top: 0%; } 100% { top: 100%; } } /* Simula la curvatura de una cinta vieja estirándose suavemente */ @keyframes legacy-vhs-slow-drift { 0%, 100% { transform: scale(1) skewX(0deg); } 50% { transform: scale(1.01) skewX(1deg); } } /* El láser sube y baja de forma pausada */ @keyframes legacy-laser-slow { 0% { top: 0%; opacity: 0.2; } 50% { top: 100%; opacity: 0.5; } 100% { top: 0%; opacity: 0.2; } } /* --- ANIMACIÓN DE ALERTA DE BÚNKER (LENTA) --- */ @keyframes unity-containment-pulse { 0%, 100% { border-color: #4a0000; box-shadow: inset 0 0 10px rgba(74, 0, 0, 0.5); } 50% { border-color: #ff0000; /* Rojo vibrante solo en el borde */ box-shadow: inset 0 0 25px rgba(255, 0, 0, 0.2), 0 0 15px rgba(255, 0, 0, 0.3); } } /* --- ANIMACIÓN DE ADVERTENCIA ODRADEK (RÍTMICA) --- */ @keyframes bridges-odradek-alert { 0%, 100% { border-color: #993300; /* Naranja apagado */ filter: saturate(1); } 50% { border-color: #ff6600; /* Naranja brillante */ box-shadow: 0 0 15px rgba(255, 102, 0, 0.4), inset 0 0 10px rgba(255, 102, 0, 0.2); filter: saturate(2); } } @keyframes deus-glitch-flicker { 0% { opacity: 1; filter: brightness(1); transform: translateX(0); } 10% { opacity: 0.8; filter: brightness(2); transform: translateX(1px); } 20% { opacity: 1; filter: brightness(1.2); transform: translateX(-1px); } 30% { opacity: 0.9; filter: brightness(3); transform: translateX(0); } 40% { opacity: 1; filter: brightness(1.5); transform: translateX(2px); } 50% { opacity: 0.7; filter: brightness(1); transform: translateX(-2px); } 80% { opacity: 1; filter: brightness(2.5); transform: translateX(1px); } 100% { opacity: 1; filter: brightness(1); transform: translateX(0); } } @keyframes static-shiver { 0% { transform: translate(0,0); } 50% { transform: translate(-1px, 1px); } 100% { transform: translate(1px, -1px); } } /* Vibración seca y rápida */ @keyframes ex-data-decay { 0% { transform: translate(0,0); } 25% { transform: translate(-1px, 1px); } 75% { transform: translate(1px, -1px); } 100% { transform: translate(0,0); } } /* El texto de error salta por la tarjeta */ @keyframes ex-text-glitch { 0% { top: 50%; left: 50%; } 10% { top: 48%; left: 51%; } 20% { top: 52%; left: 49%; } 40% { top: 45%; left: 50%; } 60% { top: 50%; left: 50%; } } /* Desgarro horizontal de la imagen */ @keyframes ex-image-tear { 0% { clip-path: inset(0 0 0 0); } 30% { clip-path: inset(20% 0 50% 0); transform: translateX(5px); } 60% { clip-path: inset(80% 0 0 0); transform: translateX(-5px); } 100% { clip-path: inset(0 0 0 0); } } @keyframes rapidium-rise { 0% { background-position: 0% 100%; } 100% { background-position: 0% 0%; } } @keyframes rapidium-pulse { 0%, 100% { opacity: 0.5; height: 30vh; } 50% { opacity: 0.8; height: 35vh; } } @keyframes alter-instability { 0% { transform: translate(0, 0); filter: hue-rotate(0deg); } 25% { transform: translate(1px, 1px); filter: hue-rotate(10deg); } 50% { transform: translate(-1px, -1px); filter: hue-rotate(-10deg); } 75% { transform: translate(-1px, 1px); } 100% { transform: translate(0, 0); } } /* --- ANIMACIONES TÉCNICAS DEL TEMA FRAGMENTED --- */ /* Movimiento del láser */ @keyframes fragmented-scan-loop { 0% { top: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }