body {
    margin: 0;
    background: #000;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}

/* ===== Line ===== */
.line {
    height: 2px;
    background: #999;
    margin: 5px 5px;
    width: 100%;
}

/* ===== HEADER WITH HALF-WIDTH SUBTLE ANIMATION ===== */
.light-anim-bg {
    position: relative;
    overflow: hidden;
    height: 140px;
    background: url('/assets/image/head.png') center / cover no-repeat;
    /*background: url('~/Image/head.png') center/cover no-repeat;*/
}

    /* LEFT HALF ANIMATION */
    .light-anim-bg::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 50%; /* left half only */
        background: linear-gradient( to right, transparent 40%, rgba(255,255,255,0.22) 50%, /* slightly more visible */
        transparent 60% );
        animation: leftHalf 4s ease-in-out infinite;
        z-index: 1;
        pointer-events: none;
    }

    /* RIGHT HALF ANIMATION */
    .light-anim-bg::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 50%; /* right half only */
        background: linear-gradient( to left, transparent 40%, rgba(255,255,255,0.22) 50%, /* slightly more visible */
        transparent 60% );
        animation: rightHalf 4s ease-in-out infinite;
        z-index: 1;
        pointer-events: none;
    }

    /* content above animation */
    .light-anim-bg > * {
        position: relative;
        z-index: 2;
    }

/* LEFT HALF KEYFRAMES */
@keyframes leftHalf {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    50% {
        transform: translateX(30%); /* half-width, fade before center */
        opacity: 0.22; /* slightly stronger */
    }

    70% {
        transform: translateX(30%);
        opacity: 0; /* fade out before center */
    }

    100% {
        transform: translateX(30%);
        opacity: 0;
    }
}

/* RIGHT HALF KEYFRAMES */
@keyframes rightHalf {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    50% {
        transform: translateX(-30%); /* half-width, fade before center */
        opacity: 0.22; /* slightly stronger */
    }

    70% {
        transform: translateX(-30%);
        opacity: 0; /* fade out before center */
    }

    100% {
        transform: translateX(-30%);
        opacity: 0;
    }
}
/* set time out */
.setTime {
    height: 0; /* hide completely */
    opacity: 0;
    overflow: hidden; /* hide content inside */
    transition: height 1s ease, opacity 1s ease; /* smooth height + fade */
}

    .setTime.show {
        height: auto; /* show full height */
        opacity: 1;
    }