/* =========================================
   1. SETUP & FONTS
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&display=swap');

:root {
    --theme-red-dark: #8B0000;
    --theme-gold-light: #F9F295;
    --theme-gold-medium: #E0AA3E;
    --theme-gold-dark: #B88A44;
}

body {
    font-family: 'Prompt', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: #f8fafc;
}

html {
    scroll-behavior: smooth;
}

/* =========================================
   2. HERO SECTION & ANIMATION
   ========================================= */
@keyframes heroZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}

.hero-wrapper {
    position: relative;
    height: 650px;
    overflow: hidden;
    margin-top: 80px; /* เว้นระยะให้ Navbar */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2c0b0e;
}

.hero-bg-fixed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background-color: #5f0a0a;
    
    /* รูปพื้นหลัง (ตรวจสอบ path รูปภาพของคุณ: w.jpg หรือ project.jpg) */
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6)), url('../images/V1.jpg');
    
    background-size: cover;
    background-position: center;
    z-index: 0;
    
    /* Animation ซูมเข้า-ออก */
    animation: heroZoom 25s infinite alternate ease-in-out;
    will-change: transform;
}

.hero-content {
    position: relative;
    z-index: 10;
    width: 100%;
    text-align: center;
}

/* =========================================
   3. TEXT THEME (GOLD-RED LUXURY)
   ========================================= */
.text-gold-red-theme {
    background: linear-gradient(
        to bottom, 
        #F9F295 0%,   /* ทองสว่างสุด */
        #E0AA3E 40%,  /* ทองเข้ม */
        #C5582D 70%,  /* ส้มทองแดง */
        #8B0000 100%  /* แดงเลือดหมู */
    );
    
    -webkit-background-clip: text;
    background-clip: text; 
    
    -webkit-text-fill-color: transparent;
    color: transparent;
    
    /* เงาฟุ้งเล็กน้อยเพื่อให้อ่านง่าย */
    filter: drop-shadow(0px 2px 2px rgba(139, 0, 0, 0.3));
    letter-spacing: 0.05em;
}

/* =========================================
   4. ANIMATIONS (Fade Up & Shine)
   ========================================= */
@keyframes luxuryFadeInUp {
    0% { opacity: 0; transform: translateY(40px); filter: blur(5px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.animate-luxury { 
    opacity: 0; 
    animation: luxuryFadeInUp 1.5s cubic-bezier(0.25, 1, 0.5, 1) both; 
}

.delay-300 { animation-delay: 0.3s; }

/* Shine Effect */
@keyframes shine-pass {
    0% { left: -100%; opacity: 0; }
    20% { opacity: 0.6; }
    100% { left: 100%; opacity: 0; }
}

.hover-shine { 
    position: relative; 
    overflow: hidden; 
}

.hover-shine::before {
    content: ''; 
    position: absolute; 
    top: 0; 
    left: -100%; 
    width: 50%; 
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: skewX(-25deg); 
    pointer-events: none;
}

.group:hover .hover-shine::before { 
    animation: shine-pass 0.8s ease-in-out forwards; 
}

/* =========================================
   5. SPECIAL EFFECTS: GOLD BORDER SPIN
   ========================================= */
/* ต้องกำหนด @property เพื่อให้ transition smooth ใน modern browser */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes spin-border {
    to { --angle: 360deg; }
}

.animated-gold-border {
    position: relative;
    z-index: 0;
    overflow: hidden;
    padding: 2px; /* ความหนาของเส้นขอบ */
    border-radius: 1rem;
}

.animated-gold-border::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from var(--angle, 0deg),
        #059669, 
        #d1fae5,
        #059669
    );
    animation: spin-border 7s linear infinite;
}

/* Fallback สำหรับ Browser เก่าที่ไม่รองรับ @property */
@supports not (background: paint(something)) {
    .animated-gold-border::before {
        animation: spin-fallback 4s linear infinite;
    }
    @keyframes spin-fallback {
        100% { transform: rotate(360deg); }
    }
}