/* =========================================================
   พื้นที่ครอบปุ่มเมนูทั้งหมด
   ========================================================= */

.top-menu {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    /*
    ป้องกันพื้นที่ว่างของ .top-menu
    บังการคลิกองค์ประกอบอื่น
    */
    pointer-events: none;

    /*
    ต้องสูงกว่า Background
    ปรับเพิ่มหรือลดตามโครงสร้างหน้าเว็บ
    */
    z-index: 100;
}


/* =========================================================
   รูปแบบพื้นฐานของปุ่มทุกปุ่ม
   ========================================================= */

.menu-btn {
    /*
    ค่าเริ่มต้น ปรับแยกใน .menu1 - .menu5
    */
    --button-left: 0px;
    --button-top: 0px;
    --button-width: 140px;
    --button-height: 40px;

    /*
    ความหนาของเส้นแสง
    ปรับแยกแต่ละปุ่มได้
    */
    --light-size: 3px;

    /*
    ความมนของมุมกรอบ
    0px = เหลี่ยม
    */
    --light-radius: 5px;

    /*
    ความเร็วของแสงวิ่ง
    ค่าน้อย = วิ่งเร็ว
    ค่ามาก = วิ่งช้า
    */
    --light-speed: 1.8s;

    /*
    สีของแสง
    ปรับแยกแต่ละปุ่มได้
    */
    --light-color: #ffffff;
    --light-color-soft: rgba(255, 255, 255, 0.45);

    position: absolute;

    left: var(--button-left);
    top: var(--button-top);

    width: var(--button-width);
    height: var(--button-height);

    display: block;
    box-sizing: border-box;

    /*
    ตัวปุ่มโปร่งใส
    */
    background: transparent;
    border: 0;
    border-radius: var(--light-radius);

    text-decoration: none;
    cursor: pointer;

    /*
    เปิดให้เฉพาะตัวปุ่มรับการคลิก
    */
    pointer-events: auto;

    /*
    ป้องกันแสงล้นออกมาบังพื้นที่อื่น
    */
    isolation: isolate;

    /*
    ปิดกรอบ Focus เริ่มต้นของ Browser
    */
    outline: none;

    /*
    การขยายและย่อเวลาชี้หรือกด
    */
    transition:
        transform 0.15s ease,
        filter 0.15s ease;
}


/* =========================================================
   ชั้นแสงที่วิ่งรอบกรอบ
   ========================================================= */

.menu-btn::before {
    content: "";

    position: absolute;
    inset: 0;

    box-sizing: border-box;
    border-radius: var(--light-radius);

    /*
    แสงหลักที่หมุนรอบปุ่ม
    ส่วนโปร่งใสทำให้เห็นเป็นช่วงแสงที่กำลังวิ่ง
    */
    background: conic-gradient(
        from 0deg,

        transparent 0deg,
        transparent 250deg,

        var(--light-color-soft) 285deg,
        var(--light-color) 320deg,
        var(--light-color) 340deg,

        transparent 360deg
    );

    /*
    เจาะตรงกลางออก เหลือเฉพาะขอบตามค่า --light-size
    */
    padding: var(--light-size);

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite: xor;

    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    mask-composite: exclude;

    /*
    ซ่อนไว้ตอนปกติ
    */
    opacity: 0;

    pointer-events: none;

    animation: topmenu-running-light var(--light-speed) linear infinite;
    animation-play-state: paused;

    transition: opacity 0.15s ease;
}


/* =========================================================
   ชั้นแสงฟุ้งด้านนอก
   ========================================================= */

.menu-btn::after {
    content: "";

    position: absolute;

    /*
    ขยายแสงออกจากกรอบเล็กน้อย
    */
    inset: calc(var(--light-size) * -1);

    border: var(--light-size) solid var(--light-color);
    border-radius: calc(var(--light-radius) + var(--light-size));

    opacity: 0;

    pointer-events: none;

    /*
    ทำให้แสงมีความฟุ้ง
    */
    filter: blur(5px);

    box-shadow:
        0 0 5px var(--light-color),
        0 0 10px var(--light-color),
        0 0 18px var(--light-color-soft);

    transition: opacity 0.15s ease;
}


/* =========================================================
   เมื่อเอาเมาส์ชี้
   ========================================================= */

.menu-btn:hover {
    transform: scale(1.02);
}

.menu-btn:hover::before {
    opacity: 1;
    animation-play-state: running;
}

.menu-btn:hover::after {
    opacity: 0.65;
}


/* =========================================================
   เมื่อกดปุ่ม
   ========================================================= */

.menu-btn:active {
    /*
    ทำให้รู้สึกว่าปุ่มถูกกดลง
    */
    transform: scale(0.97);

    filter: brightness(1.35);
}

.menu-btn:active::before {
    opacity: 1;

    /*
    เวลากดให้แสงวิ่งเร็วขึ้น
    */
    animation-duration: 0.65s;
    animation-play-state: running;
}

.menu-btn:active::after {
    opacity: 1;

    filter: blur(7px);

    box-shadow:
        0 0 7px var(--light-color),
        0 0 14px var(--light-color),
        0 0 25px var(--light-color);
}


/* =========================================================
   เมื่อเลือกปุ่มด้วย Keyboard
   ========================================================= */

.menu-btn:focus-visible::before {
    opacity: 1;
    animation-play-state: running;
}

.menu-btn:focus-visible::after {
    opacity: 0.65;
}


/* =========================================================
   Animation แสงวิ่งรอบกรอบ
   ========================================================= */

@keyframes topmenu-running-light {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   MENU 1
   ========================================================= */

.menu1 {
    /*
    พิกัดของปุ่ม
    */
    --button-left: 410px;
    --button-top: 10px;

    /*
    ความกว้างและความสูงของกรอบแสง
    */
    --button-width: 140px;
    --button-height: 60px;

    /*
    รูปแบบแสงของปุ่มนี้
    */
    --light-size: 3px;
    --light-radius: 5px;
    --light-speed: 1.8s;

    --light-color: #ffffff;
    --light-color-soft: rgba(255, 255, 255, 0.45);
}


/* =========================================================
   MENU 2
   ========================================================= */

.menu2 {
    --button-left: 565px;
    --button-top: 10px;

    --button-width: 180px;
    --button-height: 60px;

    --light-size: 3px;
    --light-radius: 5px;
    --light-speed: 1.8s;

    --light-color: #ffffff;
    --light-color-soft: rgba(255, 255, 255, 0.45);
}


/* =========================================================
   MENU 3
   ========================================================= */

.menu3 {
    --button-left: 770px;
    --button-top: 10px;

    --button-width: 160px;
    --button-height: 60px;

    --light-size: 3px;
    --light-radius: 5px;
    --light-speed: 1.8s;

    --light-color: #ffffff;
    --light-color-soft: rgba(255, 255, 255, 0.45);
}


/* =========================================================
   MENU 4
   ========================================================= */

.menu4 {
    --button-left: 960px;
    --button-top: 10px;

    --button-width: 140px;
    --button-height: 60px;

    --light-size: 3px;
    --light-radius: 5px;
    --light-speed: 1.8s;

    --light-color: #ffffff;
    --light-color-soft: rgba(255, 255, 255, 0.45);
}


/* =========================================================
   MENU 5
   ========================================================= */

.menu5 {
    --button-left: 1125px;
    --button-top: 10px;

    --button-width: 160px;
    --button-height: 60px;

    --light-size: 3px;
    --light-radius: 5px;
    --light-speed: 1.8s;

    --light-color: #ffffff;
    --light-color-soft: rgba(255, 255, 255, 0.45);
}


/* =========================================================
   MENU 6
   ========================================================= */

.menu6 {
    --button-left: 1305px;
    --button-top: 10px;

    --button-width: 180px;
    --button-height: 60px;

    --light-size: 3px;
    --light-radius: 5px;
    --light-speed: 1.8s;

    --light-color: #ffffff;
    --light-color-soft: rgba(255, 255, 255, 0.45);
}


/* =========================================================
   ลด Animation สำหรับผู้ใช้ที่ตั้งค่าปิดการเคลื่อนไหว
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .menu-btn,
    .menu-btn::before,
    .menu-btn::after {
        animation: none;
        transition: none;
    }

    .menu-btn:hover::before,
    .menu-btn:active::before,
    .menu-btn:focus-visible::before {
        opacity: 1;
    }
}