/* รอรูป/ฟอนต์โหลดเสร็จก่อนค่อยเริ่มอนิเมชัน (JS ใส่ .sd-ready; ถ้าไม่มี JS ไม่ถูกหยุด) */
.sd-js:not(.sd-ready) .shadowDreamMainLayout,
.sd-js:not(.sd-ready) .shadowDreamMainLayout *,
.sd-js:not(.sd-ready) .shadowDreamMainLayout::after {
    animation-play-state: paused !important;
}

.shadowDreamMainLayout {
    overflow: hidden;
    overflow: clip;
    --mx: 0;
    --my: 0;
}

/* ม่านดำ: เริ่มมืดสนิทแล้วค่อยเปิด */
.shadowDreamMainLayout::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 50;
    background: #000000be;
    pointer-events: none;
    animation: sdCurtain 2.4s ease-out .1s forwards;
}

@keyframes sdCurtain {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes sdIn {
    0% {
        opacity: 0;
        translate: var(--fx, 0) var(--fy, 40px);
        scale: var(--fs, .9);
        filter: blur(14px);
    }

    100% {
        opacity: var(--o, 1);
        translate: 0 0;
        scale: 1;
        filter: blur(0);
    }
}

@keyframes sdInNF {

    /* ไม่มี filter ใช้กับชิ้นที่มี filter อยู่แล้ว */
    0% {
        opacity: 0;
        translate: var(--fx, 0) var(--fy, 40px);
        scale: var(--fs, .9);
    }

    100% {
        opacity: var(--o, 1);
        translate: 0 0;
        scale: 1;
    }
}

@keyframes sdBreath {

    0%,
    100% {
        scale: 1;
        rotate: 0deg;
    }

    50% {
        scale: 1.025;
        rotate: .4deg;
    }
}

@keyframes sdBob {

    0%,
    100% {
        translate: 0 0;
        rotate: 0deg;
    }

    50% {
        translate: 0 -14px;
        rotate: -.8deg;
    }
}

@keyframes sdDriftA {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 40px 12px;
    }
}

@keyframes sdDriftB {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: -46px -10px;
    }
}

@keyframes sdSwing {
    from {
        rotate: -1.3deg;
    }

    to {
        rotate: 1.3deg;
    }
}

@keyframes sdLine {
    from {
        scale: 0 1;
        opacity: 0;
    }

    to {
        scale: 1 1;
        opacity: 1;
    }
}

/* ----- Objects (หมอก/เถาวัลย์) : เข้าก่อน ----- */
.shadowDreamObject_1 {
    --d: .3s;
    --o: .8;
    --fy: 120px;
    --fs: 1;
    animation: sdInNF 2s ease-out var(--d) backwards;
}

.shadowDreamObject_2 {
    --d: .5s;
    --o: .7;
    --fx: -200px;
    --fy: 0px;
    --fs: 1;
    animation: sdInNF 2.2s ease-out var(--d) backwards, sdDriftA 20s ease-in-out calc(var(--d) + 2.2s) infinite;
}

.shadowDreamObject_3 {
    --d: .7s;
    --o: .7;
    --fx: 200px;
    --fy: 0px;
    --fs: 1;
    animation: sdInNF 2.2s ease-out var(--d) backwards, sdDriftB 22s ease-in-out calc(var(--d) + 2.2s) infinite;
}

/* ----- Characters : ตัวใหญ่ก่อน แล้วทยอยตัวเล็ก ----- */
.shadowDreamCharacter_main {
    --d: 1s;
    --fy: 30px;
    --fs: .78;
    animation: sdIn 1.8s cubic-bezier(.2, .8, .2, 1) var(--d) backwards,
        sdBreath 7s ease-in-out calc(var(--d) + 1.8s) infinite;
}

.shadowDreamCharacter_2 {
    --d: 1.7s;
    --fx: -180px;
    --fy: 40px;
    --fs: 1;
    animation: sdIn 1.2s cubic-bezier(.3, 1.4, .5, 1) var(--d) backwards,
        sdBob 5.5s ease-in-out calc(var(--d) + 1.2s) infinite;
}

.shadowDreamCharacter_3 {
    --d: 2s;
    --fx: 180px;
    --fy: 40px;
    --fs: 1;
    animation: sdIn 1.2s cubic-bezier(.3, 1.4, .5, 1) var(--d) backwards,
        sdBob 6.3s ease-in-out calc(var(--d) + 1.2s + 1s) infinite;
}

/* ----- Logo : ตกลงมาพร้อมแฟลชกระพริบ แล้วเรืองแสงหายใจ ----- */
.shadowDreamLogo {
    --d: 2.5s;
    animation: sdLogo 1.5s ease-out var(--d) backwards,
        sdGlow 7s linear calc(var(--d) + 1.5s) infinite;
}

@keyframes sdLogo {
    0% {
        opacity: 0;
        translate: 0 -70px;
        scale: 1.5;
    }

    40% {
        opacity: 1;
        translate: 0 4px;
        scale: .97;
    }

    48% {
        opacity: .2;
    }

    54% {
        opacity: 1;
    }

    60% {
        opacity: .4;
        translate: -5px 0;
    }

    66% {
        opacity: 1;
        translate: 4px 0;
    }

    100% {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

@keyframes sdGlow {

    /* เรืองเขียวซีดแบบไฟเสีย กระพริบไม่สม่ำเสมอ + แดงอมดำสลับ */
    0%,
    11%,
    16%,
    58%,
    64%,
    100% {
        filter: drop-shadow(0 0 6px rgba(87, 149, 48, .7)) brightness(1);
    }

    12%,
    62% {
        filter: drop-shadow(0 0 2px rgba(87, 149, 48, .25)) brightness(.45);
    }

    14% {
        filter: drop-shadow(0 0 4px rgba(87, 149, 48, .5)) brightness(.9);
    }

    38% {
        filter: drop-shadow(0 0 14px rgba(120, 200, 90, .6)) brightness(1.1);
    }
}

/* glitch (JS สุ่มเรียก) */
.shadowDreamLogo.sd-glitch img {
    animation: sdGlitch .6s steps(1) 1;
}

@keyframes sdGlitch {
    0% {
        translate: 0 0;
        filter: none;
    }

    15% {
        translate: -5px 1px;
        filter: drop-shadow(-5px 0 0 rgba(210, 255, 225, .7)) drop-shadow(5px 0 0 rgba(60, 200, 120, .6));
    }

    30% {
        translate: 6px -1px;
        filter: drop-shadow(5px 0 0 rgba(210, 255, 225, .7)) drop-shadow(-5px 0 0 rgba(60, 200, 120, .6));
    }

    45% {
        translate: 0 0;
        filter: brightness(1.8);
    }

    60% {
        translate: -3px 0;
        filter: drop-shadow(-3px 0 0 rgba(210, 255, 225, .7));
    }

    100% {
        translate: 0 0;
        filter: none;
    }
}

/* ----- ปุ่มเข้าสู่เว็บไซต์ (animate ที่ตัวห่อ ไม่ชน hover ของปุ่ม) ----- */
.shadowDreamContentMainLayout>.shadowDreamBtnIn {
    --d: 3.4s;
    --fy: 30px;
    --fs: .9;
    animation: sdInNF 1s ease-out var(--d) backwards;
}

/* ----- Menu : ป้ายไม้สไลด์เข้าจากขวาทีละอัน แล้วแกว่งเบาๆ ----- */
.shadowDreamMenu {
    --fx: 120px;
    --fy: 0px;
    --fs: 1;
    transform-origin: 50% 0;
    animation: sdInNF .9s cubic-bezier(.2, .9, .3, 1.1) var(--d, 3s) backwards,
        sdSwing 5s ease-in-out calc(var(--d, 3s) + .9s) infinite alternate;
}

.shadowDreamMenu:nth-of-type(1) {
    --d: 3s;
}

.shadowDreamMenu:nth-of-type(2) {
    --d: 3.2s;
}

.shadowDreamMenu:nth-of-type(3) {
    --d: 3.4s;
}

.shadowDreamMenu:nth-of-type(2) {
    animation-duration: .9s, 5.8s;
}

.shadowDreamMenu:nth-of-type(3) {
    animation-duration: .9s, 6.6s;
}

.shadowDreamMenuHr {
    animation: sdLine .8s ease-out 3.7s backwards;
}

.shadowDreamMenuMainLayout>.d-flex:last-child {
    --d: 3.9s;
    --fx: 80px;
    --fy: 0px;
    --fs: 1;
    animation: sdInNF .9s ease-out var(--d) backwards;
}

/* ----- Parallax ตามเมาส์ (ใช้ transform เลยไม่ชน translate ด้านบน) ----- */
.shadowDreamCharacter_main {
    transform: translate(calc(-50% + var(--mx) * -14px), calc(-50% + var(--my) * -8px));
}

.shadowDreamCharacter_2 {
    transform: translate(calc(var(--mx) * -26px), calc(var(--my) * -10px));
}

.shadowDreamCharacter_3 {
    transform: translate(calc(var(--mx) * -30px), calc(var(--my) * -10px));
}

.shadowDreamObject_1 {
    transform: translate(calc(var(--mx) * 14px), calc(var(--my) * 6px));
}

.shadowDreamObject_2 {
    transform: translate(calc(var(--mx) * -40px), calc(var(--my) * -14px));
}

.shadowDreamObject_3 {
    transform: translate(calc(var(--mx) * -36px), calc(var(--my) * -12px));
}

.shadowDreamLogo {
    transform: translate(calc(var(--mx) * 10px), calc(var(--my) * 6px));
}