/* Ocleiria Forum - Animations CSS */
/* Effets visuels et animations pour le style rétro-futuriste / vaporwave */

/* ---------- Effet Glitch ---------- */
.glitch-anim {
    position: relative;
    animation: glitch 2s infinite;
}

@keyframes glitch {
    0% {
        transform: translate(0);
    }
    20% {
        transform: translate(-2px, 2px);
    }
    40% {
        transform: translate(-2px, -2px);
    }
    60% {
        transform: translate(2px, 2px);
    }
    80% {
        transform: translate(2px, -2px);
    }
    100% {
        transform: translate(0);
    }
}

/* ---------- Effet Scanlines ---------- */
.scanlines {
    position: relative;
    overflow: hidden;
}

.scanlines::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(
        to bottom,
        transparent 50%,
        rgba(0, 0, 0, 0.1) 51%
    );
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 10;
    opacity: 0.15;
}

/* ---------- Effet Néon ---------- */
.neon-text {
    color: #fff;
    text-shadow: 
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px #ff00ff,
        0 0 30px #ff00ff,
        0 0 40px #ff00ff,
        0 0 55px #ff00ff,
        0 0 75px #ff00ff;
    animation: neon-pulse 1.5s infinite alternate;
}

@keyframes neon-pulse {
    from {
        text-shadow: 
            0 0 5px #fff,
            0 0 10px #fff,
            0 0 20px #ff00ff,
            0 0 30px #ff00ff,
            0 0 40px #ff00ff,
            0 0 55px #ff00ff,
            0 0 75px #ff00ff;
    }
    to {
        text-shadow: 
            0 0 5px #fff,
            0 0 10px #fff,
            0 0 20px #00ffff,
            0 0 30px #00ffff,
            0 0 40px #00ffff,
            0 0 55px #00ffff,
            0 0 75px #00ffff;
    }
}

/* ---------- Effet Hover Glitch ---------- */
.hover-glitch {
    position: relative;
    transition: all 0.2s ease;
}

.hover-glitch:hover {
    transform: skewX(2deg);
}

.hover-glitch:hover::before {
    content: attr(data-text);
    position: absolute;
    left: 2px;
    top: 0;
    color: #ff00ff;
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    animation: hover-glitch-anim-1 3s infinite linear alternate-reverse;
}

.hover-glitch:hover::after {
    content: attr(data-text);
    position: absolute;
    left: -2px;
    top: 0;
    color: #00ffff;
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    animation: hover-glitch-anim-2 2s infinite linear alternate-reverse;
}

@keyframes hover-glitch-anim-1 {
    0% {
        clip: rect(20px, 9999px, 21px, 0);
    }
    10% {
        clip: rect(42px, 9999px, 44px, 0);
    }
    20% {
        clip: rect(13px, 9999px, 26px, 0);
    }
    30% {
        clip: rect(37px, 9999px, 92px, 0);
    }
    40% {
        clip: rect(2px, 9999px, 5px, 0);
    }
    50% {
        clip: rect(31px, 9999px, 73px, 0);
    }
    60% {
        clip: rect(28px, 9999px, 59px, 0);
    }
    70% {
        clip: rect(15px, 9999px, 39px, 0);
    }
    80% {
        clip: rect(62px, 9999px, 89px, 0);
    }
    90% {
        clip: rect(41px, 9999px, 68px, 0);
    }
    100% {
        clip: rect(17px, 9999px, 34px, 0);
    }
}

@keyframes hover-glitch-anim-2 {
    0% {
        clip: rect(36px, 9999px, 50px, 0);
    }
    10% {
        clip: rect(12px, 9999px, 23px, 0);
    }
    20% {
        clip: rect(54px, 9999px, 73px, 0);
    }
    30% {
        clip: rect(3px, 9999px, 7px, 0);
    }
    40% {
        clip: rect(25px, 9999px, 35px, 0);
    }
    50% {
        clip: rect(18px, 9999px, 41px, 0);
    }
    60% {
        clip: rect(47px, 9999px, 87px, 0);
    }
    70% {
        clip: rect(62px, 9999px, 73px, 0);
    }
    80% {
        clip: rect(11px, 9999px, 19px, 0);
    }
    90% {
        clip: rect(30px, 9999px, 55px, 0);
    }
    100% {
        clip: rect(9px, 9999px, 17px, 0);
    }
}

/* ---------- Effet VHS ---------- */
.vhs-effect {
    position: relative;
    overflow: hidden;
}

.vhs-effect::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        transparent 0%,
        rgba(255, 0, 255, 0.1) 10%,
        transparent 20%,
        rgba(0, 255, 255, 0.1) 30%,
        transparent 40%,
        rgba(255, 0, 255, 0.1) 50%,
        transparent 60%,
        rgba(0, 255, 255, 0.1) 70%,
        transparent 80%,
        rgba(255, 0, 255, 0.1) 90%,
        transparent 100%
    );
    pointer-events: none;
    opacity: 0.3;
    animation: vhs-scan 8s linear infinite;
}

@keyframes vhs-scan {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100%);
    }
}

/* ---------- Effet Flottant ---------- */
.floating {
    animation: floating 3s ease-in-out infinite;
}

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

/* ---------- Effet Rotation Lente ---------- */
.slow-spin {
    animation: slow-spin 20s linear infinite;
}

@keyframes slow-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ---------- Effet Clignotement ---------- */
.flicker {
    animation: flicker 2s linear infinite;
}

@keyframes flicker {
    0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
        opacity: 1;
    }
    20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
        opacity: 0.33;
    }
}

/* ---------- Effet Ondulation ---------- */
.wave-text {
    position: relative;
    display: inline-block;
}

.wave-text span {
    display: inline-block;
    animation: wave-animation 2s infinite;
    animation-delay: calc(0.1s * var(--i));
}

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

/* ---------- Effet Distorsion ---------- */
.distortion {
    animation: distortion 5s ease-in-out infinite alternate;
}

@keyframes distortion {
    0% {
        transform: skew(0deg, 0deg);
    }
    25% {
        transform: skew(2deg, 1deg);
    }
    50% {
        transform: skew(-1deg, 2deg);
    }
    75% {
        transform: skew(-2deg, -1deg);
    }
    100% {
        transform: skew(1deg, -2deg);
    }
}

/* ---------- Effet Pixel ---------- */
.pixel-transition {
    transition: all 0.3s steps(5, end);
}

/* ---------- Effet Synthwave Sun ---------- */
.synthwave-sun {
    position: relative;
    width: 100px;
    height: 50px;
    background: linear-gradient(to top, #ff00ff, #ff8800);
    border-radius: 50% 50% 0 0;
    margin: 0 auto;
    box-shadow: 0 0 20px #ff00ff, 0 0 40px #ff8800;
}

.synthwave-sun::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 10px;
    background: linear-gradient(90deg, transparent, rgba(255, 136, 0, 0.5), transparent);
    bottom: -10px;
    animation: sun-glow 2s infinite;
}

@keyframes sun-glow {
    0%, 100% {
        opacity: 0.5;
        transform: scaleX(1);
    }
    50% {
        opacity: 1;
        transform: scaleX(1.2);
    }
}

/* ---------- Effet Matrice ---------- */
.matrix-rain {
    position: relative;
    overflow: hidden;
}

.matrix-rain::before {
    content: "01010101";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 200%;
    font-family: monospace;
    font-size: 12px;
    color: rgba(0, 255, 0, 0.2);
    pointer-events: none;
    animation: matrix-rain 20s linear infinite;
}

@keyframes matrix-rain {
    0% {
        top: -100%;
    }
    100% {
        top: 0;
    }
}

/* ---------- Effet Chargement Rétro ---------- */
.retro-loading {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 20px;
}

.retro-loading::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    animation: retro-loading 2s infinite;
}

@keyframes retro-loading {
    0% {
        width: 0;
    }
    50% {
        width: 100%;
    }
    100% {
        width: 0;
    }
}

/* ---------- Effet Curseur Clignotant ---------- */
.typing-cursor {
    display: inline-block;
    width: 10px;
    height: 20px;
    background-color: var(--primary);
    animation: typing-cursor 1s step-end infinite;
}

@keyframes typing-cursor {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* ---------- Effet Défilement Horizontal ---------- */
.horizontal-scroll {
    white-space: nowrap;
    overflow: hidden;
}

.horizontal-scroll-content {
    display: inline-block;
    animation: horizontal-scroll 20s linear infinite;
}

@keyframes horizontal-scroll {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* ---------- Effet Disquette ---------- */
.floppy-save {
    position: relative;
    display: inline-block;
}

.floppy-save::before {
    content: "💾";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: all 0.3s ease;
}

.floppy-save:active::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}