/* Section Title Glitch Effect */
.section-title {
    position: relative;
}

.section-title img {
    position: relative;
    z-index: 2;
    display: inline-block;
}

.section-title::before,
.section-title::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: auto;
    height: 24px;
    background-size: auto 24px;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    pointer-events: none;
}

.section-title::before {
    animation: glitch-effect-1 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite both;
    filter: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(7471%) hue-rotate(346deg) brightness(101%) contrast(107%);
    mix-blend-mode: screen;
    z-index: 1;
}

.section-title::after {
    animation: glitch-effect-2 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite reverse both;
    filter: brightness(0) saturate(100%) invert(84%) sepia(87%) saturate(2686%) hue-rotate(140deg) brightness(103%) contrast(101%);
    mix-blend-mode: screen;
    z-index: 1;
}

/* Individual title background images */
.about .section-title::before,
.about .section-title::after {
    background-image: url('../img/common/title_01_01.svg?v=20251030');
}

.latest-news .section-title::before,
.latest-news .section-title::after {
    background-image: url('../img/common/title_01_02.svg?v=20251030');
}

.search-products .section-title::before,
.search-products .section-title::after,
.search-section .section-title::before,
.search-section .section-title::after {
    background-image: url('../img/common/title_01_03.svg?v=20251030');
}

.new-products .section-title::before,
.new-products .section-title::after {
    background-image: url('../img/common/title_01_04.svg?v=20251030');
}

.suggest-products .section-title::before,
.suggest-products .section-title::after {
    background-image: url('../img/common/title_01_05.svg?v=20251030');
}

@keyframes glitch-effect-1 {
    0% {
        opacity: 0;
        transform: translate(0, 0);
    }
    2% {
        opacity: 0.8;
        transform: translate(-2px, 3px);
    }
    4% {
        opacity: 0.8;
        transform: translate(-2px, -3px);
    }
    6% {
        opacity: 0.8;
        transform: translate(2px, 2px);
    }
    8% {
        opacity: 0;
        transform: translate(0, 0);
    }
    10% {
        opacity: 0.8;
        transform: translate(3px, -2px);
    }
    12% {
        opacity: 0;
        transform: translate(0, 0);
    }
    14% {
        opacity: 0.8;
        transform: translate(-1px, 4px);
    }
    16% {
        opacity: 0;
        transform: translate(0, 0);
    }
    18% {
        opacity: 0.8;
        transform: translate(-3px, -3px);
    }
    20% {
        opacity: 0;
        transform: translate(0, 0);
    }
    22% {
        opacity: 0.8;
        transform: translate(2px, -2px);
    }
    24%, 100% {
        opacity: 0;
        transform: translate(0, 0);
    }
}

@keyframes glitch-effect-2 {
    0% {
        opacity: 0;
        transform: translate(0, 0);
    }
    2% {
        opacity: 0.7;
        transform: translate(2px, -3px);
    }
    4% {
        opacity: 0.7;
        transform: translate(2px, 3px);
    }
    6% {
        opacity: 0.7;
        transform: translate(-1px, -2px);
    }
    8% {
        opacity: 0;
        transform: translate(0, 0);
    }
    10% {
        opacity: 0.7;
        transform: translate(-3px, 2px);
    }
    12% {
        opacity: 0;
        transform: translate(0, 0);
    }
    14% {
        opacity: 0.7;
        transform: translate(1px, -3px);
    }
    16% {
        opacity: 0;
        transform: translate(0, 0);
    }
    18% {
        opacity: 0.7;
        transform: translate(3px, 3px);
    }
    20% {
        opacity: 0;
        transform: translate(0, 0);
    }
    22% {
        opacity: 0.7;
        transform: translate(-2px, 2px);
    }
    24%, 100% {
        opacity: 0;
        transform: translate(0, 0);
    }
}