/* FULLSCREEN BACKGROUND BEHIND TEXT */
.work-preview {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 1; /* belakang */
}

.work-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    opacity: 0;
    transform: scale(1.25);
    transition: opacity .3s ease-out, transform 4s ease-out;

    filter: brightness(55%);
}

/* TEXT LAYER TENGAH */
.work-list {
    position: relative;
    z-index: 10; /* depan */
    height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: center; /* vertical center */
    align-items: center;     /* horizontal center */

    gap: 10px;
}

.work-item {
    font-size: 4rem;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    opacity: .5;
    transition: .2s ease-out;
    color: #bfbfbf;

    /* efek halus getaran */
    animation: idleFloat 6s infinite ease-in-out;
}

.work-item:hover {
    opacity: 1;
    transform: scale(1.05);
}

/* ghost stroke text */
.text-ghost {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(5px, 5px);
    pointer-events: none;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,0.2);
}

/* =====================================
   NEON BLUE HOVER – CYBERPUNK EFFECT
   ===================================== */

/* teks utama */
.work-item .text-base {
    font-size: 4rem;
    font-weight: 800;
    letter-spacing: 3px;
    color: #9e9e9e;
    transition: 0.25s ease-in-out;
}

/* ghost text */
.work-item .text-ghost {
    font-size: 4rem;
    font-weight: 800;
    letter-spacing: 3px;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(5px, 5px);
    opacity: 0.05;
    pointer-events: none;
    transition: 0.25s ease-in-out;
    -webkit-text-stroke: 1px rgba(255,255,255,0.2);
}

/* ========================
   🔥 HOVER EFFECT
   ======================== */
.work-item:hover .text-base,
.work-item:hover .text-ghost {
    color: #00d7ff;
    text-shadow:
        0 0 6px #00d7ff,
        0 0 12px #00eaff,
        0 0 22px #00faff,
        0 0 38px #00faff;
}

.work-item:hover .text-base {
    transform: scale(1.08);
    opacity: 1;
}

.work-item:hover .text-ghost {
    opacity: 0.25;
    transform: translate(5px, 5px) scale(1.12);
}

/* supaya default tetap abu-abu samar */
.work-item {
    opacity: 0.5;
    transition: opacity .25s ease-out, transform .25s ease-out;
}

.work-item:hover {
    opacity: 1 !important;
}