.sd-fx {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    --cx: 50%;
    --cy: 50%;
}

/* หมอกเทาเขียวซีด ลอยต่ำ (ไม่ใช้แสงเรือง) */
.sd-fog {
    position: absolute;
    z-index: 3;
    width: 160%;
    height: 50%;
    left: -30%;
    filter: blur(40px);
    opacity: 0;
}

.sd-fog.a {
    bottom: -10%;
    background: radial-gradient(ellipse at 30% 60%, rgba(160, 185, 170, .30), transparent 60%),
        radial-gradient(ellipse at 80% 50%, rgba(120, 140, 130, .22), transparent 55%);
    animation: sdFogIn 4s ease 1.5s forwards, sdFogMove 30s ease-in-out infinite alternate;
}

.sd-fog.b {
    top: 28%;
    background: radial-gradient(ellipse at 55% 50%, rgba(120, 140, 130, .17), transparent 60%);
    animation: sdFogIn 4s ease 2.5s forwards, sdFogMove 42s ease-in-out infinite alternate-reverse;
}

@keyframes sdFogIn {
    to {
        opacity: 1;
    }
}

@keyframes sdFogMove {
    from {
        translate: -7% 0;
    }

    to {
        translate: 7% -3%;
    }
}

/* ไฟฉาย: มืดทั้งฉาก เหลือวงสว่างรอบเมาส์ (อยู่ใต้โลโก้/เมนู จึงอ่านได้ปกติ) */
.sd-dark {
    position: absolute;
    inset: 0;
    z-index: 4;
    opacity: 0;
    background: radial-gradient(circle 460px at var(--cx) var(--cy), transparent 0, rgba(0, 0, 0, .04) 50%, rgba(0, 0, 0, .34) 100%);
    animation: sdFogIn 3s ease 2s forwards;
}

.sd-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 6;
}

/* ขอบมืดบางๆ */
.sd-vignette {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 4, 2, .45) 100%);
}

/* ไฟฟ้าช็อต: แฟลชซีด / ไฟดับกระพริบ */
.sd-flash {
    position: absolute;
    inset: 0;
    z-index: 8;
    opacity: 0;
    background: #d5e4dd;
}

.sd-flash.on {
    animation: sdFlash .9s ease-out;
}

@keyframes sdFlash {
    0% {
        opacity: 0
    }

    5% {
        opacity: .6
    }

    9% {
        opacity: .04
    }

    15% {
        opacity: .4
    }

    100% {
        opacity: 0
    }
}

.sd-flash.out {
    background: #000;
    animation: sdOut 1.1s linear;
}

@keyframes sdOut {
    0% {
        opacity: 0
    }

    8% {
        opacity: .55
    }

    16% {
        opacity: 0
    }

    30% {
        opacity: .45
    }

    40% {
        opacity: .1
    }

    48% {
        opacity: .6
    }

    62% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

/* เกรนฟิล์ม + scanline */
.sd-grain {
    position: absolute;
    inset: -120px;
    z-index: 9;
    opacity: .1;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    animation: sdGrain .6s steps(1) infinite;
}

@keyframes sdGrain {
    0% {
        translate: 0 0
    }

    20% {
        translate: -60px 40px
    }

    40% {
        translate: 50px -70px
    }

    60% {
        translate: -30px -40px
    }

    80% {
        translate: 70px 60px
    }
}

.sd-scan {
    position: absolute;
    inset: 0;
    z-index: 9;
    opacity: .12;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 3px);
}

/* ไฟดวงที่ 2: เดินเอง เฉพาะจอ <= 991px (ไฟฉายหลักที่ตามเมาส์/นิ้วยังอยู่เหมือนเดิม) */
.sd-lamp {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 4;
    mix-blend-mode: screen;
    background: radial-gradient(circle 280px at var(--ax, -999px) var(--ay, -999px),
            rgba(205, 255, 190, .42) 0, rgba(130, 210, 110, .16) 45%, transparent 72%);
}

@media (max-width: 991.98px) {
    .sd-lamp {
        display: block;
    }
}