/* ============================================================
 * effects.css — แอนิเมชัน + เอฟเฟกต์หน้าเว็บทั้งหมด (100%)
 *   : Keyframes / Reveal on scroll / Parallax / Glitch / Marquee /
 *     Hover การ์ด / Confetti / Particles / Cursor glow / Shine
 * ============================================================ */

/* ---------- [1] Keyframes หลัก ---------- */
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes floatSlow { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-26px) rotate(4deg); } }
@keyframes pulseGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(247,201,72,.45); } 70% { box-shadow: 0 0 0 16px rgba(247,201,72,0); } }
@keyframes glowText { 0%,100% { text-shadow: 0 0 12px rgba(247,201,72,.35); } 50% { text-shadow: 0 0 30px rgba(247,201,72,.75); } }
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }
@keyframes preloaderSlide { 0% { margin-left: -45%; } 100% { margin-left: 105%; } }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes flashIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes toastIn { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(60px); } }
@keyframes heroZoom { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes shimmer { 0% { background-position: -600px 0; } 100% { background-position: 600px 0; } }
@keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes typewriterBlink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes swing { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes popIn { 0% { transform: scale(.5); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
@keyframes glitchClip {
    0% { clip-path: inset(0 0 85% 0); transform: translate(-3px, 0); }
    20% { clip-path: inset(60% 0 10% 0); transform: translate(3px, 0); }
    40% { clip-path: inset(30% 0 50% 0); transform: translate(-3px, 0); }
    60% { clip-path: inset(80% 0 2% 0); transform: translate(3px, 0); }
    80% { clip-path: inset(10% 0 70% 0); transform: translate(-3px, 0); }
    100% { clip-path: inset(0 0 85% 0); transform: translate(0, 0); }
}
/* ประตู opacity: ดีบ (glitch สั้น ๆ) ~0.5 วิ ทุก ๆ 5 วินาที ไม่ต้องเอาเมาส์ไปชี้ */
@keyframes glitchBurst {
    0%, 86% { opacity: 0; }
    87%, 94% { opacity: .85; }
    95%, 100% { opacity: 0; }
}
@keyframes confettiFall {
    0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(70vh) rotate(720deg); opacity: 0; }
}
@keyframes borderBeam { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

/* ---------- [2] Reveal on Scroll (แสดงเมื่อเลื่อนมาเจอ) ---------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    transition-delay: var(--rd, 0s);
    will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-46px); }
[data-reveal="right"] { transform: translateX(46px); }
[data-reveal="zoom"]  { transform: scale(.88); }
[data-reveal].revealed { opacity: 1; transform: none; }
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.revealed { opacity: 1; transform: none; }

/* หมายเหตุ: ไม่ใช้ prefers-reduced-motion ปิดแอนิเมชัน — เว็บเกมต้องการเอฟเฟกต์เสมอ
   (เครื่องที่ปิด "Animation effects" ใน Windows จะยังเห็น ticker/reveal เคลื่อนไหวปกติ) */

/* ---------- [3] Hover การ์ด ---------- */
.card-tilt { transform-style: preserve-3d; transition: transform .25s var(--ease); }
.card-tilt .shine { position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.12), transparent 42%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.card-tilt:hover .shine { opacity: 1; }

.hover-lift { transition: transform .35s var(--ease), box-shadow .35s; }
.hover-lift:hover { transform: translateY(-8px); box-shadow: 0 26px 54px rgba(0,0,0,.5); }

.hover-glow:hover { box-shadow: 0 0 0 2px rgba(247,201,72,.5), 0 18px 44px rgba(0,0,0,.45); }

/* ขอบไล่สีวิ่ง */
.border-beam { position: relative; }
.border-beam::before {
    content: ''; position: absolute; inset: -2px; border-radius: inherit; z-index: -1;
    background: linear-gradient(90deg, var(--gold), var(--pink), var(--cyan), var(--gold));
    background-size: 200% 100%;
    animation: borderBeam 4s linear infinite;
    opacity: 0; transition: opacity .3s;
}
.border-beam:hover::before { opacity: 1; }

/* ---------- [4]  Glitch หัวข้อ ---------- */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
    content: attr(data-text); position: absolute; inset: 0;
    overflow: hidden; opacity: 0; pointer-events: none;
}
/* ออโต้: glitch เด้งสั้น ๆ ทุก 5 วินาที ไม่ต้องเอาเมาส์ไปชี้ */
.glitch::before { color: var(--cyan); animation: glitchClip .5s steps(2, end) infinite, glitchBurst 5s linear infinite; }
.glitch::after { color: var(--pink); animation: glitchClip .45s steps(2, end) reverse infinite, glitchBurst 5s linear infinite; }
/* เมาส์ชี้ = เข้มต่อเนื่องเต็มรูปแบบ (สถานะพิเศษ) */
.glitch:hover::before { color: var(--cyan); animation: glitchClip .5s steps(2, end) infinite; opacity: .85; }
.glitch:hover::after { color: var(--pink); animation: glitchClip .45s steps(2, end) reverse infinite; opacity: .85; }

/* ---------- [5] Marquee (แถบวิ่งประกาศ) ---------- */
.marquee {
    position: relative; overflow: hidden;
    background: linear-gradient(90deg, rgba(247,201,72,.14), rgba(157,123,255,.14));
    border-block: 1px solid var(--line);
    padding: 10px 0;
}
.marquee-track { display: inline-flex; gap: 60px; white-space: nowrap; animation: marquee 26s linear infinite; padding-right: 60px; }
/* ไม่มี pause ตอน hover — วิ่งอัตโนมัติตลอดเวลา ไม่ต้องเอาเมาส์ไปชี้ */
.marquee-item { display: inline-flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--txt-2); }
.marquee-item i { color: var(--gold); }
.marquee-item b { color: #fff; }

/* ---------- [6] Floating elements ---------- */
.float { animation: floatY 5s ease-in-out infinite; }
.float-slow { animation: floatSlow 8s ease-in-out infinite; }
.float-delay { animation-delay: 1.6s; }
.swing { animation: swing 3.5s ease-in-out infinite; transform-origin: top center; }

/* ---------- [7] Glow / Pulse ---------- */
.glow-gold { animation: glowText 2.6s ease-in-out infinite; }
.pulse { animation: pulseGlow 2s infinite; }
.spin { animation: spin 1s linear infinite; }

/* ---------- [8] Parallax layers (เลื่อนตามเมาส์/สกรอล) ---------- */
.parallax-layer { will-change: transform; transition: transform .35s var(--ease); }

/* ---------- [9] Particles canvas ---------- */
#particles-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
#confetti-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2500; }

/* ---------- [10] ตัวหนังสือวิ่ง (Typing effect) ---------- */
.type-target .type-caret { display: inline-block; width: 2px; height: 1em; background: var(--gold); margin-left: 3px; vertical-align: -2px; animation: typewriterBlink .8s infinite; }

/* ---------- [11] Skeleton (โหลดข้อมูล) ---------- */
.skeleton { position: relative; overflow: hidden; background: rgba(255,255,255,.06); border-radius: 8px; min-height: 16px; }
.skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent); animation: shimmer 1.4s infinite; }

/* ---------- [12] Cursor glow (ตามเมาส์) ---------- */
.cursor-glow {
    position: fixed; width: 340px; height: 340px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(247,201,72,.10), transparent);
    pointer-events: none; z-index: 5; transform: translate(-50%, -50%);
    left: var(--cx, 50%); top: var(--cy, 50%);
    transition: opacity .4s; opacity: 0;
}
body.has-cursor .cursor-glow { opacity: 1; }

/* ---------- [13] Confetti สำเร็จ ---------- */
.confetti-piece {
    position: fixed; top: -20px; width: 10px; height: 16px; z-index: 2600;
    animation: confettiFall 2.6s cubic-bezier(.3,.6,.6,1) forwards;
    pointer-events: none;
}

/* ---------- [14] Numeral counter (ค่าที่กำลังนับ) ---------- */
.counting { font-variant-numeric: tabular-nums; }

/* ---------- [15] Image โชว์บนหน้าแรก ---------- */
.zoom-in-wrap { overflow: hidden; border-radius: var(--rad); }
.zoom-in-wrap img { transition: transform .7s var(--ease); }
.zoom-in-wrap:hover img { transform: scale(1.08); }

/* ---------- [16] เส้นคั่นหัวข้อแบบพิเศษ ---------- */
.divider-ornament { display: flex; align-items: center; gap: 16px; color: var(--gold); margin: 30px 0; }
.divider-ornament::before, .divider-ornament::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(247,201,72,.5), transparent); }

/* ---------- [17] สถานะโหลดปุ่ม ---------- */
.btn.loading { color: transparent !important; pointer-events: none; position: relative; }
.btn.loading::after {
    content: ''; position: absolute; width: 20px; height: 20px;
    border: 2.5px solid rgba(255,255,255,.3); border-top-color: #fff;
    border-radius: 50%; animation: spin .7s linear infinite;
}