@charset "utf-8";
* { padding: 0; margin: 0; box-sizing: border-box; }

body {
    font-family: 'Sarabun', sans-serif;
    height: 100vh; overflow: hidden;
    background-image: url("/image/5532862.jpg");
    background-position: center; background-attachment: fixed;
    background-repeat: no-repeat; background-size: cover;
    display: flex; justify-content: center; align-items: center;
}

.overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    /* พื้นหลังดำโปร่งแสง เน้น Logo */
    background: rgba(0, 0, 0, 0.6); 
    backdrop-filter: blur(5px); z-index: 1;
}

.container { position: relative; z-index: 2; text-align: center; }
.logo-link { text-decoration: none; display: flex; flex-direction: column; align-items: center; transition: 0.5s; }

.img-wrapper {
    position: relative; width: 560px; height: 560px;
    border-radius: 50%; 
    background: rgba(255,255,255,0.1); /* วงกลมใส */
    backdrop-filter: blur(10px);
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    animation: float 3s ease-in-out infinite;
}

.img-wrapper img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5); 
    border: 2px solid rgba(255, 215, 0, 0.7); /* ขอบทอง */
    transition: 0.5s;
}

.enter-text {
    margin-top: 30px; 
    color: #fff; font-size: 1.6rem; letter-spacing: 3px; font-weight: 500;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8); transition: 0.3s;
    background: rgba(255,255,255,0.1); padding: 10px 30px; border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.2);
}

/* Animations */
@keyframes float {
    0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); }
}

.pulse-ring {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 100%; height: 100%; border-radius: 50%;
    border: 2px solid rgba(255, 215, 0, 0.5);
    animation: pulse 2.5s infinite; z-index: -1;
}

@keyframes pulse {
    0% { width: 100%; height: 100%; opacity: 0.8; }
    100% { width: 140%; height: 140%; opacity: 0; }
}

/* Hover Effect - สวยแพง */
.logo-link:hover .img-wrapper { transform: scale(1.05); box-shadow: 0 0 50px rgba(255, 215, 0, 0.3); }
.logo-link:hover .img-wrapper img { border-color: #fff; }
.logo-link:hover .enter-text { 
    background: #FFD700; color: #5A0000; letter-spacing: 5px; font-weight: bold;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}