/* ═══════════════════════════════════════════════
   IMPERIUM TECHS — VISUAL EFFECTS
   Animations | Glitch | Decrypt | Scanline | Particles | Theme
══════════════════════════════════════════════════ */

/* ─── CORE ANIMATIONS ─── */
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

@keyframes particleFloat {
    0% { opacity: 0; transform: translateY(100vh) scale(0); }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { opacity: 0; transform: translateY(-10vh) scale(1); }
}

@keyframes hudRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(10px); }
}

@keyframes lineAppear {
    to { opacity: 1; }
}

@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes bootLineReveal {
    to { opacity: 1; transform: translateX(0); }
}

@keyframes glitchTransition {
    0% { opacity: 0; }
    20% { opacity: 1; background: var(--ultraviolet); }
    40% { opacity: 1; background: var(--obsidian); transform: translateX(-5px); }
    60% { opacity: 1; background: var(--amber); transform: translateX(5px); }
    80% { opacity: 1; background: var(--obsidian); transform: translateX(0); }
    100% { opacity: 0; }
}

@keyframes charReveal {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes charDecrypt {
    0% { color: var(--obsidian-lighter); text-shadow: 0 0 4px var(--ultraviolet); }
    50% { color: var(--ultraviolet); text-shadow: 0 0 8px var(--ultraviolet-glow); }
    100% { color: inherit; text-shadow: none; }
}

@keyframes glitch-1 {
    0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
    20% { clip-path: inset(20% 0 60% 0); transform: translate(-3px, 2px); }
    40% { clip-path: inset(50% 0 30% 0); transform: translate(3px, -2px); }
    60% { clip-path: inset(10% 0 80% 0); transform: translate(-2px, 1px); }
    80% { clip-path: inset(70% 0 10% 0); transform: translate(2px, -1px); }
}

@keyframes glitch-2 {
    0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
    20% { clip-path: inset(60% 0 20% 0); transform: translate(3px, -2px); }
    40% { clip-path: inset(30% 0 50% 0); transform: translate(-3px, 2px); }
    60% { clip-path: inset(80% 0 10% 0); transform: translate(2px, 1px); }
    80% { clip-path: inset(10% 0 70% 0); transform: translate(-2px, -1px); }
}

@keyframes lockPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.7; }
}

@keyframes radarSweep {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes blipFade {
    0%, 100% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1); }
}

@keyframes scanlineSweep {
    to { left: 100%; }
}

/* ─── DECRYPT TYPOGRAPHY ─── */
.decrypt-text {
    display: inline-block;
    position: relative;
}

.decrypt-char {
    display: inline-block;
    opacity: 0;
    animation: charReveal 0.05s ease forwards;
}

.decrypt-char.hidden {
    opacity: 1;
    color: var(--obsidian-lighter);
    text-shadow: 0 0 2px var(--ultraviolet);
    animation: charDecrypt 0.4s ease forwards;
}

/* ─── GLITCH TEXT ─── */
.glitch-text {
    position: relative;
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.glitch-text.active::before {
    animation: glitch-1 0.3s linear;
    color: var(--ultraviolet);
    z-index: -1;
    opacity: 0.8;
}

.glitch-text.active::after {
    animation: glitch-2 0.3s linear;
    color: var(--amber);
    z-index: -2;
    opacity: 0.8;
}

/* ─── SCANLINE REVEAL ─── */
.scanline-reveal {
    position: relative;
    overflow: hidden;
}

.scanline-reveal::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(112, 0, 255, 0.1), transparent);
    animation: scanlineSweep 1.2s ease-out forwards;
    pointer-events: none;
    z-index: 1;
}

/* ─── PARALLAX ─── */
.parallax-layer {
    will-change: transform;
}

.parallax-slow {
    transform: translateZ(-2px) scale(1.5);
}

.parallax-fast {
    transform: translateZ(1px) scale(0.9);
}

/* ─── MOTION BLUR ─── */
.motion-blur {
    filter: blur(0px);
    transition: filter 0.15s ease;
}

.motion-blur.active {
    filter: blur(2px);
}

/* ─── ALERT MODE THEME ─── */
body.alert-mode {
    --ultraviolet: #ff3366;
    --ultraviolet-glow: rgba(255, 51, 102, 0.4);
    --border-subtle: rgba(255, 51, 102, 0.15);
    --border-active: rgba(255, 51, 102, 0.5);
}

body.alert-mode .site-header {
    border-bottom-color: rgba(255, 51, 102, 0.3);
}

body.alert-mode .tactical-grid {
    background-image: 
        linear-gradient(rgba(255, 51, 102, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 51, 102, 0.03) 1px, transparent 1px);
}

body.alert-mode .hero-title .highlight {
    background: linear-gradient(135deg, #ff3366, #ff6b6b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ─── CURSOR HOVER STATES ─── */
body.hovering-node .cursor-scan {
    width: 120px;
    height: 120px;
    border-color: var(--amber);
    background: rgba(255, 51, 102, 0.05);
}

body.hovering-link .tactical-cursor::before,
body.hovering-link .tactical-cursor::after {
    background: var(--amber);
}