/* ============================================
   TRAURIGER PILZ - EFFECTS.CSS
   Glitch, CRT, Scanlines, alle Animationen
   DAS HERZ DER EDGINESS
   ============================================ */

/* === CRT SCANLINES === */
#scanlines::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(
            rgba(18, 16, 16, 0) 50%,
            rgba(0, 0, 0, 0.25) 50%
        ),
        linear-gradient(
            90deg,
            rgba(255, 0, 0, 0.03),
            rgba(0, 255, 0, 0.02),
            rgba(0, 0, 255, 0.03)
        );
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
    z-index: 9998;
}

/* === SCREEN FLICKER === */
#scanlines::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(18, 16, 16, 0.1);
    opacity: 0;
    pointer-events: none;
    z-index: 9998;
    animation: flicker 0.15s infinite;
}

@keyframes flicker {
    0%   { opacity: 0.27861; }
    5%   { opacity: 0.34769; }
    10%  { opacity: 0.23604; }
    15%  { opacity: 0.90626; }
    20%  { opacity: 0.18128; }
    25%  { opacity: 0.83891; }
    30%  { opacity: 0.65583; }
    35%  { opacity: 0.67807; }
    40%  { opacity: 0.26559; }
    45%  { opacity: 0.84693; }
    50%  { opacity: 0.96019; }
    55%  { opacity: 0.08594; }
    60%  { opacity: 0.20313; }
    65%  { opacity: 0.71988; }
    70%  { opacity: 0.53455; }
    75%  { opacity: 0.37288; }
    80%  { opacity: 0.71428; }
    85%  { opacity: 0.70419; }
    90%  { opacity: 0.7003; }
    95%  { opacity: 0.36108; }
    100% { opacity: 0.24387; }
}

/* === GLITCH TEXT EFFECT === */
.glitch-text {
    position: relative;
    display: inline-block;
}

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

.glitch-text::before {
    color: var(--neon-cyan);
    animation: glitchBefore 3s infinite linear alternate-reverse;
    clip-path: inset(0 0 65% 0);
    left: 2px;
    text-shadow: -2px 0 var(--neon-red);
}

.glitch-text::after {
    color: var(--neon-red);
    animation: glitchAfter 2s infinite linear alternate-reverse;
    clip-path: inset(40% 0 0 0);
    left: -2px;
    text-shadow: 2px 0 var(--neon-cyan);
}

@keyframes glitchBefore {
    0%   { clip-path: inset(0 0 85% 0); transform: translate(-3px, 0); }
    5%   { clip-path: inset(15% 0 65% 0); transform: translate(3px, 0); }
    10%  { clip-path: inset(50% 0 20% 0); transform: translate(-2px, 0); }
    15%  { clip-path: inset(5% 0 70% 0); transform: translate(0px, 0); }
    20%  { clip-path: inset(60% 0 10% 0); transform: translate(2px, 0); }
    25%  { clip-path: inset(25% 0 55% 0); transform: translate(-1px, 0); }
    30%  { clip-path: inset(70% 0 5% 0); transform: translate(3px, 0); }
    35%  { clip-path: inset(10% 0 60% 0); transform: translate(-3px, 0); }
    40%  { clip-path: inset(40% 0 30% 0); transform: translate(2px, 0); }
    45%  { clip-path: inset(80% 0 0% 0); transform: translate(-2px, 0); }
    50%  { clip-path: inset(0% 0 80% 0); transform: translate(1px, 0); }
    55%  { clip-path: inset(35% 0 45% 0); transform: translate(-1px, 0); }
    60%  { clip-path: inset(55% 0 15% 0); transform: translate(3px, 0); }
    65%  { clip-path: inset(20% 0 50% 0); transform: translate(-3px, 0); }
    70%  { clip-path: inset(75% 0 5% 0); transform: translate(2px, 0); }
    75%  { clip-path: inset(5% 0 75% 0); transform: translate(-2px, 0); }
    80%  { clip-path: inset(45% 0 25% 0); transform: translate(1px, 0); }
    85%  { clip-path: inset(65% 0 10% 0); transform: translate(-1px, 0); }
    90%  { clip-path: inset(10% 0 70% 0); transform: translate(3px, 0); }
    95%  { clip-path: inset(30% 0 40% 0); transform: translate(-3px, 0); }
    100% { clip-path: inset(50% 0 20% 0); transform: translate(1px, 0); }
}

@keyframes glitchAfter {
    0%   { clip-path: inset(40% 0 0 0); transform: translate(2px, 0); }
    5%   { clip-path: inset(10% 0 50% 0); transform: translate(-2px, 0); }
    10%  { clip-path: inset(60% 0 10% 0); transform: translate(1px, 0); }
    15%  { clip-path: inset(0% 0 80% 0); transform: translate(-3px, 0); }
    20%  { clip-path: inset(45% 0 15% 0); transform: translate(3px, 0); }
    25%  { clip-path: inset(20% 0 40% 0); transform: translate(-1px, 0); }
    30%  { clip-path: inset(70% 0 5% 0); transform: translate(2px, 0); }
    35%  { clip-path: inset(30% 0 35% 0); transform: translate(-2px, 0); }
    40%  { clip-path: inset(5% 0 65% 0); transform: translate(3px, 0); }
    45%  { clip-path: inset(55% 0 20% 0); transform: translate(-3px, 0); }
    50%  { clip-path: inset(15% 0 55% 0); transform: translate(1px, 0); }
    55%  { clip-path: inset(75% 0 0% 0); transform: translate(-1px, 0); }
    60%  { clip-path: inset(25% 0 45% 0); transform: translate(2px, 0); }
    65%  { clip-path: inset(50% 0 25% 0); transform: translate(-2px, 0); }
    70%  { clip-path: inset(0% 0 70% 0); transform: translate(3px, 0); }
    75%  { clip-path: inset(35% 0 30% 0); transform: translate(-3px, 0); }
    80%  { clip-path: inset(65% 0 10% 0); transform: translate(1px, 0); }
    85%  { clip-path: inset(10% 0 60% 0); transform: translate(-1px, 0); }
    90%  { clip-path: inset(80% 0 0% 0); transform: translate(2px, 0); }
    95%  { clip-path: inset(40% 0 35% 0); transform: translate(-2px, 0); }
    100% { clip-path: inset(20% 0 50% 0); transform: translate(1px, 0); }
}

/* === NEON GLOW === */
.neon-glow-red {
    text-shadow:
        0 0 7px var(--neon-red),
        0 0 10px var(--neon-red),
        0 0 21px var(--neon-red),
        0 0 42px var(--neon-red-glow),
        0 0 82px var(--neon-red-glow);
}

.neon-glow-cyan {
    text-shadow:
        0 0 7px var(--neon-cyan),
        0 0 10px var(--neon-cyan),
        0 0 21px var(--neon-cyan),
        0 0 42px var(--neon-cyan-glow);
}

.neon-glow-green {
    text-shadow:
        0 0 7px var(--neon-green),
        0 0 10px var(--neon-green),
        0 0 21px var(--neon-green),
        0 0 42px var(--neon-green-glow);
}

/* === NEON FLICKER === */
.neon-flicker {
    animation: neonFlicker 1.5s infinite alternate;
}

@keyframes neonFlicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow:
            0 0 4px var(--neon-red),
            0 0 11px var(--neon-red),
            0 0 19px var(--neon-red),
            0 0 40px var(--neon-red-glow);
        opacity: 1;
    }
    20%, 24%, 55% {
        text-shadow: none;
        opacity: 0.6;
    }
}

/* === FLOAT ANIMATION === */
.float-animation {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33%      { transform: translateY(-15px) rotate(1deg); }
    66%      { transform: translateY(-8px) rotate(-1deg); }
}

/* === SCREEN SHAKE === */
.shake-hover:hover {
    animation: shake 0.5s ease-in-out;
}

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

/* === GLOBAL GLITCH BURST (triggered via JS) === */
.glitch-burst {
    animation: glitchBurst 0.2s steps(1) forwards;
}

@keyframes glitchBurst {
    0%   { filter: none; transform: translate(0); }
    10%  { filter: hue-rotate(90deg) saturate(2); transform: translate(-3px, 2px); }
    20%  { filter: hue-rotate(180deg) invert(0.1); transform: translate(4px, -1px); }
    30%  { filter: hue-rotate(270deg) saturate(3); transform: translate(-2px, -3px); }
    40%  { filter: hue-rotate(45deg) brightness(1.5); transform: translate(3px, 1px); }
    50%  { filter: hue-rotate(135deg) contrast(1.5); transform: translate(-4px, 2px); }
    60%  { filter: hue-rotate(225deg) saturate(2); transform: translate(2px, -2px); }
    70%  { filter: hue-rotate(315deg) invert(0.05); transform: translate(-1px, 3px); }
    80%  { filter: hue-rotate(60deg) brightness(0.8); transform: translate(3px, -3px); }
    90%  { filter: hue-rotate(30deg); transform: translate(-2px, 1px); }
    100% { filter: none; transform: translate(0); }
}

/* === TYPING CURSOR === */
.typewriter::after {
    content: "_";
    animation: blinkCursor 0.7s step-end infinite;
    color: var(--neon-green);
}

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

/* === PULSE ANIMATION === */
.pulse {
    animation: pulseAnim 2s ease-in-out infinite;
}

@keyframes pulseAnim {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 65, 0.7); }
    50%      { box-shadow: 0 0 0 10px rgba(0, 255, 65, 0); }
}

/* === CURSOR PARTICLE STYLES === */
.cursor-particle {
    position: fixed;
    pointer-events: none;
    border-radius: 50%;
    z-index: 9999;
    will-change: transform, opacity;
}

/* === CUSTOM CROSSHAIR CURSOR ELEMENT === */
#custom-cursor {
    position: fixed;
    width: 32px;
    height: 32px;
    pointer-events: none;
    z-index: 10003;
    transform: translate(-50%, -50%);
    will-change: transform;
    mix-blend-mode: difference;
}

#custom-cursor::before,
#custom-cursor::after {
    content: '';
    position: absolute;
    background: var(--neon-red);
    box-shadow: 0 0 5px var(--neon-red-glow);
}

#custom-cursor::before {
    width: 2px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
}

#custom-cursor::after {
    width: 100%;
    height: 2px;
    top: 50%;
    transform: translateY(-50%);
}

#cursor-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--neon-cyan);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 5px var(--neon-cyan-glow);
}

/* === GALLERY HOVER GLITCH === */
.gallery-item:hover .gallery-img:not(.filter-glitch) {
    animation: galleryGlitch 0.3s steps(2) infinite;
}

@keyframes galleryGlitch {
    0%   { filter: none; transform: translate(0) scale(1); }
    25%  { filter: hue-rotate(90deg); transform: translate(-2px, 1px) scale(1.02); }
    50%  { filter: hue-rotate(180deg); transform: translate(2px, -1px) scale(0.98); }
    75%  { filter: hue-rotate(270deg); transform: translate(-1px, -2px) scale(1.01); }
    100% { filter: hue-rotate(360deg); transform: translate(1px, 2px) scale(1); }
}

/* === ENTRANCE SCREEN SHAKE === */
#entrance-screen.shaking {
    animation: entranceShake 0.5s ease-in-out;
}

@keyframes entranceShake {
    0%, 100% { transform: translate(0) rotate(0); }
    10%  { transform: translate(-10px, -5px) rotate(-1deg); }
    20%  { transform: translate(10px, 5px) rotate(1deg); }
    30%  { transform: translate(-8px, 3px) rotate(-0.5deg); }
    40%  { transform: translate(8px, -3px) rotate(0.5deg); }
    50%  { transform: translate(-5px, -8px) rotate(-1deg); }
    60%  { transform: translate(5px, 8px) rotate(1deg); }
    70%  { transform: translate(-3px, 5px) rotate(-0.5deg); }
    80%  { transform: translate(3px, -5px) rotate(0.5deg); }
    90%  { transform: translate(-2px, 2px) rotate(0deg); }
}

/* === KONAMI FLASH === */
#konami-overlay.flash {
    animation: konamiFlash 3s forwards;
}

@keyframes konamiFlash {
    0%   { opacity: 0; background: rgba(0, 255, 65, 0.3); }
    10%  { opacity: 1; background: rgba(0, 255, 65, 0.2); }
    20%  { opacity: 0.5; background: rgba(255, 0, 64, 0.2); }
    30%  { opacity: 1; background: rgba(0, 255, 65, 0.15); }
    40%  { opacity: 0.7; }
    80%  { opacity: 1; background: rgba(0, 0, 0, 0.9); }
    100% { opacity: 0; }
}

/* === TEXT SHADOW FLICKER FOR SECTION TITLES === */
.section-title {
    animation: titleGlow 4s ease-in-out infinite;
}

@keyframes titleGlow {
    0%, 100% {
        text-shadow: 0 0 5px var(--neon-red-dim), 0 0 10px transparent;
    }
    50% {
        text-shadow: 0 0 10px var(--neon-red), 0 0 30px var(--neon-red-dim), 0 0 50px var(--neon-red-dim);
    }
}

/* === SECTION DIVIDER SCROLL ANIMATION === */
.section-divider {
    animation: dividerPulse 5s ease-in-out infinite;
}

@keyframes dividerPulse {
    0%, 100% { color: var(--text-dim); border-color: var(--bg-card-border); }
    50% { color: var(--text-secondary); border-color: var(--neon-red-dim); }
}

/* === BASS-REACTIVE EFFECTS === */

/* === SLOW RGB RAINBOW GLOW (HvH Style) === */
@keyframes rgbRainbow {
    0%   { --rgb-hue: 0; }
    100% { --rgb-hue: 360; }
}

@property --rgb-hue {
    syntax: '<number>';
    initial-value: 0;
    inherits: true;
}

body.music-playing {
    animation: rgbRainbow 12s linear infinite;
}

/* === 808 LIGHTNING STRIKE: Screen Shake === */
.lightning-shake {
    animation: lightningShake 0.15s ease-out;
}

@keyframes lightningShake {
    0%   { transform: translate(0, 0); }
    12%  { transform: translate(-5px, 3px); }
    25%  { transform: translate(4px, -4px); }
    37%  { transform: translate(-3px, -2px); }
    50%  { transform: translate(5px, 2px); }
    62%  { transform: translate(-2px, -3px); }
    75%  { transform: translate(3px, 1px); }
    87%  { transform: translate(-1px, -2px); }
    100% { transform: translate(0, 0); }
}

/* === 808 LIGHTNING STRIKE: Text Flash + Glitch === */
.lightning-flash * {
    transition: none !important;
}

.lightning-flash .section-title,
.lightning-flash .glitch-text,
.lightning-flash .stat-number,
.lightning-flash .hero-name {
    animation: textLightningFlash 0.15s steps(3);
}

.lightning-flash .glitch-text::before,
.lightning-flash .glitch-text::after {
    opacity: 1;
    filter: brightness(2);
}

.lightning-flash .section-divider {
    text-shadow: 0 0 12px currentColor;
}

@keyframes textLightningFlash {
    0%   { filter: brightness(2.5); transform: translate(0); color: white; }
    25%  { filter: brightness(1) hue-rotate(90deg); transform: translate(-2px, 1px); }
    50%  { filter: brightness(3); transform: translate(1px, -1px); color: white; }
    75%  { filter: brightness(1) hue-rotate(-60deg); transform: translate(-1px, -1px); }
    100% { filter: brightness(1); transform: translate(0); }
}

/* === LOADING STATE === */
body.loading #scanlines,
body.loading #vignette,
body.loading #blood-drip-top {
    display: none;
}

/* === CHROMATIC ABERRATION ON WHOLE PAGE (subtle) === */
@keyframes chromaticAberration {
    0% { text-shadow: 1px 0 rgba(255,0,0,0.1), -1px 0 rgba(0,255,255,0.1); }
    50% { text-shadow: -1px 0 rgba(255,0,0,0.1), 1px 0 rgba(0,255,255,0.1); }
    100% { text-shadow: 1px 0 rgba(255,0,0,0.1), -1px 0 rgba(0,255,255,0.1); }
}

/* === RAIN EFFECT FOR KONAMI SAD MODE === */
.rain-drop {
    position: fixed;
    width: 2px;
    background: linear-gradient(transparent, rgba(100, 150, 255, 0.6));
    pointer-events: none;
    z-index: 10001;
    animation: rainFall linear infinite;
}

@keyframes rainFall {
    0% { transform: translateY(-100vh); opacity: 1; }
    100% { transform: translateY(100vh); opacity: 0.3; }
}

/* === BIO CARD SCAN LINE EFFECT === */
.about-bio::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--neon-cyan);
    opacity: 0.3;
    animation: scanLine 4s linear infinite;
    pointer-events: none;
}

.about-bio {
    position: relative;
    overflow: hidden;
}

@keyframes scanLine {
    0% { top: 0%; }
    100% { top: 100%; }
}

/* === DISTORTION ON HOVER FOR ABOUT IMAGE === */
.about-image:hover .about-img {
    animation: distortImage 0.5s ease-in-out;
}

@keyframes distortImage {
    0% { filter: grayscale(0%) contrast(1.3) brightness(1.1); }
    20% { filter: grayscale(0%) contrast(2) brightness(1.5) hue-rotate(45deg); }
    40% { filter: grayscale(100%) contrast(3) brightness(0.5); }
    60% { filter: grayscale(0%) contrast(1.5) brightness(1.3) hue-rotate(-45deg); }
    80% { filter: grayscale(50%) contrast(2) brightness(1.2); }
    100% { filter: grayscale(0%) contrast(1.3) brightness(1.1); }
}

/* === STAT CARD BORDER ANIMATION === */
.stat-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--neon-red), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.stat-card:hover::after {
    opacity: 1;
    animation: borderFlow 2s linear infinite;
}

@keyframes borderFlow {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* === MUSIC PLAYER GLOW PULSE === */
.music-player {
    animation: playerGlow 4s ease-in-out infinite;
}

@keyframes playerGlow {
    0%, 100% { box-shadow: 0 0 20px var(--neon-red-dim); }
    50% { box-shadow: 0 0 40px var(--neon-red-dim), 0 0 60px rgba(255, 0, 64, 0.1); }
}

/* === CONTACT ITEM GLITCH ON HOVER === */
.contact-item:hover .contact-value {
    animation: contactGlitch 0.3s steps(3);
}

@keyframes contactGlitch {
    0%   { transform: translate(0); opacity: 1; }
    33%  { transform: translate(-3px, 1px); opacity: 0.8; }
    66%  { transform: translate(2px, -1px); opacity: 0.9; }
    100% { transform: translate(0); opacity: 1; }
}

/* === FOOTER COUNTER GLOW === */
.counter-display {
    animation: counterGlow 2s ease-in-out infinite;
}

@keyframes counterGlow {
    0%, 100% { text-shadow: 0 0 5px var(--neon-green-glow); }
    50% { text-shadow: 0 0 15px var(--neon-green-glow), 0 0 25px rgba(0, 255, 65, 0.3); }
}