@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap');

:root {
    --studio-cyan: #00d2ff;
    --studio-bg: #02111a;
    --card-bg: rgba(255, 255, 255, 0.03);
    --border: rgba(255, 255, 255, 0.1);
}

* {
    margin: 0; padding: 0; box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    background-color: var(--studio-bg);
    color: white;
    font-family: 'Inter', sans-serif;
    line-height: 1.7;
}

/* ตกแต่ง Code Block ให้เหมือน VS Code */
pre {
    background: #050c12 !important;
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid var(--border);
    font-family: 'Fira Code', monospace;
    font-size: 0.9rem;
    margin: 1.5rem 0;
    overflow-x: auto;
    position: relative;
}

pre::before {
    content: "CODE VIEW";
    position: absolute; top: 5px; right: 15px;
    font-size: 10px; color: var(--studio-cyan);
    font-weight: bold; opacity: 0.5;
}

.glass-nav {
    background: rgba(2, 17, 26, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.article-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.article-card:hover {
    transform: translateY(-10px);
    border-color: var(--studio-cyan);
    box-shadow: 0 10px 30px rgba(0, 210, 255, 0.1);
}

html {
    scroll-behavior: smooth;
}

/* เพิ่มแสง Glow อ่อนๆ ให้กับหัวข้อเมื่อ Hover */
h2:hover span {
    text-shadow: 0 0 15px rgba(0, 210, 255, 0.5);
    transition: 0.3s;
}

/* ใส่ในไฟล์ CSS */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ตัวอย่างโค้ดใน style.css ตรงส่วนที่ทำแสง Shine */
.group {
    position: relative;
}

/* ส่วนที่เป็นแสง (วงกลมฟุ้งๆ) */
.group::before {
    content: "";
    position: absolute;
    inset: 0;
    /* ใช้ตัวแปรจาก JS */
    background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(0, 210, 255, 0.15), transparent 40%);
    
    /* แก้จุดนี้: เริ่มต้นให้ไม่เห็นแสง */
    opacity: 0; 
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1;
}

/* เมื่อเอาเมาส์วาง ค่อยโชว์แสง */
.group:hover::before {
    opacity: 1;
}

header {
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(0, 210, 255, 0.1) 0%, transparent 50%),
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 100% 100%, 30px 30px, 30px 30px;
}