/* --- Coin Flip Styles --- */

/* 1. สร้างพื้นที่ 3D (The "Stage") */
#coin-container {
    width: 150px;
    height: 150px;
    margin: 30px auto; /* เว้นระยะห่างจากปุ่ม */
    
    /* perspective: สร้าง "ความลึก" 3 มิติ
      ถ้าไม่มีตัวนี้ แอนิเมชันจะดูแบน
    */
    perspective: 1000px; 
}

/* 2. ตัวเหรียญ (The 3D Object) */
#coin {
    width: 100%;
    height: 100%;
    position: relative;
    
    /* transform-style: preserve-3d;
      บอกว่า "ลูกๆ" (หน้าเหรียญ) ของฉันจะอยู่ในโลก 3D นะ
    */
    transform-style: preserve-3d;
    
    /* นี่คือการตั้งค่า "การเปลี่ยน" สถานะเริ่มต้น 
      เราจะใช้ animation ตอนคลิก แต่ใส่ transition ไว้เผื่อ
    */
    transition: transform 1.5s ease-out;
}

/* 3. หน้าเหรียญ (ทั้งสองด้าน) */
.coin-face {
    width: 100%;
    height: 100%;
    position: absolute; /* ทำให้หน้าเหรียญทับกันสนิท */
    
    /* backface-visibility: hidden;
      นี่คือหัวใจ! ซ่อนด้านหลังของเหรียญเมื่อมันพลิกไป
    */
    backface-visibility: hidden;
    
    border-radius: 50%; /* ทำให้กลม */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* เพิ่มเงาให้ดูสมจริง */

    /* จัดข้อความ (H/T) ให้อยู่กลางเหรียญ */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5rem;
    font-weight: bold;
}

/* 4. หน้าหัว (Heads) */
.coin-heads {
    background: linear-gradient(45deg, #ffd700, #ffec80); /* สีทอง */
    color: #b8860b;
}
/* (ทางเลือก: ถ้าคุณมีรูป) 
   background-image: url('../assets/images/coin_heads.png'); 
   background-size: cover; 
*/


/* 5. หน้าก้อย (Tails) */
.coin-tails {
    background: linear-gradient(45deg, #c0c0c0, #e0e0e0); /* สีเงิน */
    color: #666;
    
    /* สำคัญ: หน้าก้อยต้องหันหลังให้เราในตอนเริ่มต้น
      (หมุนไป 180 องศา)
    */
    transform: rotateY(180deg);
}
/* (ทางเลือก: ถ้าคุณมีรูป) 
   background-image: url('../assets/images/coin_tails.png'); 
   background-size: cover; 
*/


/* * 6. แอนิเมชันการหมุน (The Spin Animation) 
 * (เราใช้ @keyframes เพื่อให้มันหมุนหลายๆ ตลบได้)
*/

/* ท่าหมุน 1: หมุนหลายตลบ (5 ตลบ) และจบที่ "หัว" (1800 องศา) */
@keyframes spin-to-heads {
    from {
        transform: rotateY(0deg);
    }
    to {
        /* 360 * 5 = 1800 */
        transform: rotateY(1800deg); 
    }
}

/* ท่าหมุน 2: หมุนหลายตลบ (5.5 ตลบ) และจบที่ "ก้อย" (1980 องศา) */
@keyframes spin-to-tails {
    from {
        transform: rotateY(0deg);
    }
    to {
        /* (360 * 5) + 180 = 1980 */
        transform: rotateY(1980deg);
    }
}


/* 7. สั่งให้เล่นแอนิเมชันเมื่อ JS เพิ่มคลาส */
/* (ชื่อแอนิเมชัน / เวลา 2 วินาที / ease-out (ช้าลงตอนจบ) / forwards (ค้างท่าสุดท้ายไว้)) */

#coin.flip-heads {
    animation: spin-to-heads 2s ease-out forwards;
}

#coin.flip-tails {
    animation: spin-to-tails 2s ease-out forwards;
}