/*
Theme Name: Melavisions Desk
Theme URI: https://melavisions.tech
Author: Melavisions
Author URI: https://melavisions.tech
Description: โต๊ะทำงานจำลองสไตล์ Skeuomorphic — แป้นพิมพ์ดีดที่กดได้จริง วิทยุที่เล่นเพลงได้ สมุดจดที่เขียนได้ นาฬิกาเดินตามเวลาจริง และโพสต์อิทที่เพิ่ม-ลบได้ ทั้งหมดวาดด้วย CSS ล้วน พร้อมเสียง WebAudio
Version: 1.2.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: MIT License
License URI: https://opensource.org/licenses/MIT
Text Domain: melavisions-desk
Tags: portfolio, custom-background, one-column
*/

/* ธีมนี้ใช้ Tailwind (CDN) สำหรับ utility classes และ CSS ด้านล่างสำหรับพื้นผิวสคิวโอมอร์ฟิกทั้งหมด */

.font-display { font-family: "Chonburi", "Sarabun", sans-serif !important; }
.font-body { font-family: "Sarabun", "Chonburi", sans-serif !important; }
.font-hand { font-family: "Mali", "Sarabun", cursive !important; }
.font-mono { font-family: "IBM Plex Mono", monospace !important; }

body { font-family: "Sarabun", "Chonburi", sans-serif; }
html { scroll-behavior: smooth; }
a:focus-visible, button:focus-visible, textarea:focus-visible, input:focus-visible { outline: 3px solid #f6c453; outline-offset: 4px; }

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
  padding: 12px 2px;
  border-bottom: 1px solid rgba(255, 237, 196, 0.16);
}
.site-mark { color: #fff2d2; font: 500 12px/1 "IBM Plex Mono", monospace; letter-spacing: 0.2em; text-decoration: none; }
.site-mark span { color: #d6a649; }
.site-links { display: flex; gap: clamp(16px, 4vw, 34px); }
.site-links a { color: rgba(255, 242, 210, 0.68); font: 500 11px/1 "IBM Plex Mono", monospace; letter-spacing: 0.12em; text-decoration: none; text-transform: uppercase; transition: color 160ms ease; }
.site-links a:hover { color: #ffd77e; }
.hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.desk-button { min-width: 156px; padding: 12px 18px; border: 1px solid rgba(255, 236, 192, 0.34); border-radius: 7px; color: #fff1d1; font: 600 13px/1 "Sarabun", sans-serif; text-align: center; text-decoration: none; box-shadow: 0 7px 20px rgba(0, 0, 0, 0.22); transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; }
.desk-button.primary { border-color: #d6a649; background: linear-gradient(160deg, #efd48d, #cfa84f 52%, #9d7425); color: #362406; }
.desk-button:hover { transform: translateY(-2px); border-color: #f5c861; }
.about-card { display: grid; grid-template-columns: minmax(130px, .35fr) minmax(0, 1.65fr); gap: clamp(26px, 7vw, 86px); margin: 72px 0 0; padding: clamp(28px, 5vw, 52px); border: 1px solid rgba(255, 237, 196, 0.2); border-radius: 22px; background: rgba(27, 19, 13, 0.58); box-shadow: 0 30px 70px rgba(0,0,0,.24); backdrop-filter: blur(10px); }
.section-kicker { margin: 0; color: #d6a649; font: 500 10px/1.6 "IBM Plex Mono", monospace; letter-spacing: .2em; }
.about-card h2 { max-width: 780px; margin: 0; color: #fff2d2; font: 400 clamp(27px, 4.6vw, 56px)/1.08 "Chonburi", "Sarabun", sans-serif; }
.about-card div p { max-width: 750px; margin: 24px 0 0; color: rgba(255, 242, 210, .62); font-size: clamp(15px, 1.7vw, 19px); line-height: 1.8; }
.work-section { margin-top: 72px; }
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.work-card { display: flex; min-height: 292px; flex-direction: column; padding: 26px; border: 1px solid rgba(255, 237, 196, .2); border-radius: 18px; color: #fff2d2; background: linear-gradient(145deg, rgba(54,39,26,.9), rgba(24,17,12,.88)); text-decoration: none; box-shadow: 0 24px 50px rgba(0,0,0,.26); transition: transform 220ms ease, border-color 220ms ease; }
.work-card:hover { transform: translateY(-6px) rotate(-.35deg); border-color: rgba(238, 192, 94, .72); }
.work-card > span { color: #d6a649; font: 500 10px/1 "IBM Plex Mono", monospace; letter-spacing: .2em; }
.work-card h2 { margin: 42px 0 14px; font: 400 clamp(22px, 2.5vw, 32px)/1.15 "Chonburi", "Sarabun", sans-serif; }
.work-card p { margin: 0; color: rgba(255,242,210,.58); line-height: 1.75; }
.work-card strong { margin-top: auto; padding-top: 28px; color: #efc56b; font: 500 11px/1 "IBM Plex Mono", monospace; letter-spacing: .1em; }
.footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 22px; margin-top: 14px; }
.footer-links a { color: #59410f; font: 600 11px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .site-nav { align-items: flex-start; }
  .site-links { gap: 12px; }
  .site-links a { font-size: 9px; }
  .about-card { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: 1fr; }
  .work-card { min-height: 250px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

::selection { background: #d8a24a; color: #2a1c08; }

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #221a12; }
::-webkit-scrollbar-thumb { background: #6b5638; border-radius: 6px; border: 3px solid #221a12; }

/* ---------- พื้นผิว: ไม้ ---------- */
.wood-bg {
  background-color: #3b2a1c;
  background-image:
    radial-gradient(1200px 620px at 14% 0%, rgba(255, 198, 112, 0.11), transparent 60%),
    radial-gradient(1100px 760px at 92% 104%, rgba(0, 0, 0, 0.38), transparent 65%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.24) 0 2px, rgba(255, 235, 200, 0.035) 2px 4px, transparent 4px 252px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.055) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(88deg, rgba(255, 222, 170, 0.022) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #4b3522, #39281a 55%, #2d1f12);
}

/* ---------- พื้นผิว: หนัง ---------- */
.leather {
  background-color: #241d16;
  background-image:
    radial-gradient(900px 500px at 25% 0%, rgba(255, 214, 150, 0.055), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E"),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.14) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 5px);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.06),
    inset 0 -16px 44px rgba(0, 0, 0, 0.55),
    0 40px 80px rgba(0, 0, 0, 0.55),
    0 10px 24px rgba(0, 0, 0, 0.45);
}

.stitched { position: relative; }
.stitched::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px dashed rgba(214, 180, 122, 0.45);
  border-radius: 18px;
  pointer-events: none;
}

/* ---------- พื้นผิว: โลหะ ---------- */
.metal {
  background-image:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0 1px, rgba(0, 0, 0, 0.045) 1px 2px, transparent 2px 3px),
    linear-gradient(180deg, #f7f7f5, #d5d5d3 32%, #a7a7a5 58%, #cfcfcd 78%, #8e8e8c);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 5px rgba(0, 0, 0, 0.28),
    0 6px 14px rgba(0, 0, 0, 0.4);
}

.metal-dark {
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #686e76, #41464d 40%, #2b2f35 70%, #4a5058);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -3px 8px rgba(0, 0, 0, 0.5),
    0 12px 26px rgba(0, 0, 0, 0.45);
}

.brass-plate {
  background: linear-gradient(160deg, #efd48d, #cfa84f 32%, #a37c2c 55%, #dcb96a 78%, #8f6a22);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 214, 0.65),
    inset 0 -2px 5px rgba(0, 0, 0, 0.35),
    0 5px 12px rgba(0, 0, 0, 0.5);
}

.engrave-dark { color: #59410f; text-shadow: 0 1px 0 rgba(255, 240, 196, 0.55); }
.engrave-light { color: #ccd2d9; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.14); }

/* ---------- พื้นผิว: กระดาษ / คอร์ก ---------- */
.paper {
  background-color: #f7f1e1;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23p)' opacity='0.05'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(120, 90, 40, 0.06));
}

.cork {
  background-color: #9a6a42;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23c)' opacity='0.22'/%3E%3C/svg%3E"),
    radial-gradient(rgba(58, 33, 13, 0.42) 1px, transparent 1.7px);
  background-size: 140px 140px, 8px 10px;
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.5);
}

/* ---------- โอเวอร์เลย์บรรยากาศ ---------- */
.grain-overlay {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.6'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  opacity: 0.15;
}

.vignette { background: radial-gradient(ellipse 92% 82% at 50% 38%, transparent 52%, rgba(10, 6, 2, 0.58) 100%); }

.lamp-glow {
  background: radial-gradient(62% 48% at 15% 5%, rgba(255, 198, 98, 0.32), rgba(255, 160, 60, 0.13) 46%, transparent 72%);
  animation: flicker 9s linear infinite;
}

/* ---------- Keyframes ---------- */
@keyframes flicker {
  0%, 100% { opacity: 1; }
  7% { opacity: 0.9; }
  8% { opacity: 1; }
  46% { opacity: 0.96; }
  47.5% { opacity: 1; }
  78% { opacity: 0.88; }
  79.5% { opacity: 1; }
}

@keyframes steamRise {
  0% { transform: translateY(8px) translateX(0) scale(0.85); opacity: 0; }
  25% { opacity: 0.55; }
  60% { opacity: 0.32; }
  100% { transform: translateY(-28px) translateX(5px) scale(1.3); opacity: 0; }
}

@keyframes spin360 { to { transform: rotate(360deg); } }

@keyframes vuNeedle {
  0%, 100% { transform: rotate(-40deg); }
  15% { transform: rotate(14deg); }
  32% { transform: rotate(-12deg); }
  48% { transform: rotate(27deg); }
  64% { transform: rotate(0deg); }
  82% { transform: rotate(18deg); }
}

@keyframes eqBar {
  0%, 100% { transform: scaleY(0.2); }
  50% { transform: scaleY(1); }
}

@keyframes popIn {
  0% { opacity: 0; transform: scale(0.5) rotate(var(--rot, 0deg)); }
  65% { opacity: 1; transform: scale(1.07) rotate(var(--rot, 0deg)); }
  100% { opacity: 1; transform: scale(1) rotate(var(--rot, 0deg)); }
}
.pop-in { animation: popIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

@keyframes tearFly {
  0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(130%) translateX(12%) rotate(11deg); opacity: 0; }
}
.tearing { animation: tearFly 0.5s ease-in forwards; }

@keyframes moteDrift {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: 0.75; }
  85% { opacity: 0.4; }
  100% { transform: translate(48px, -140px); opacity: 0; }
}

@keyframes ledBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.9, 0.35, 1);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- Glow mode (เปิดจากแผงควบคุม) ---------- */
body.glow .keycap { text-shadow: 0 0 14px rgba(255, 196, 90, 0.95), 0 0 3px rgba(255, 240, 200, 0.9); }
body.glow .desk-heading { text-shadow: 0 0 22px rgba(255, 190, 90, 0.55); }
body.glow .clock-face { box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.28), 0 0 42px rgba(255, 192, 92, 0.4); }

/* ---------- Tuner slider ---------- */
input[type="range"].tuner {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 30px;
  border-radius: 6px;
  border: 1px solid #060302;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 205, 120, 0.35) 0 1px, transparent 1px 26px),
    linear-gradient(180deg, #120c07, #26180a 60%, #191008);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer;
}
input[type="range"].tuner::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 9px;
  height: 24px;
  border-radius: 2px;
  background: linear-gradient(180deg, #ff8a70, #d92f1c);
  border: 1px solid #7a150a;
  box-shadow: 0 0 9px rgba(255, 70, 40, 0.9), 0 2px 4px rgba(0, 0, 0, 0.6);
}
input[type="range"].tuner::-moz-range-thumb {
  width: 9px;
  height: 24px;
  border-radius: 2px;
  background: linear-gradient(180deg, #ff8a70, #d92f1c);
  border: 1px solid #7a150a;
  box-shadow: 0 0 9px rgba(255, 70, 40, 0.9), 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* ---------- Keycaps ---------- */
.keycap {
  position: relative;
  height: 40px;
  width: 40px;
  border-radius: 8px;
  font-family: "Chonburi", sans-serif;
  font-size: 18px;
  color: #292524;
  background: linear-gradient(180deg, #fdf7e6, #e7dabb 60%, #d8c7a1);
  box-shadow: 0 5px 0 #a3926d, 0 9px 16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(0);
  transition: transform 0.07s;
  cursor: pointer;
  user-select: none;
  border: none;
}
@media (min-width: 640px) {
  .keycap { height: 48px; width: 48px; border-radius: 12px; font-size: 20px; }
}
.keycap.down {
  box-shadow: 0 1px 0 #8f8262, inset 0 3px 7px rgba(0, 0, 0, 0.35);
  transform: translateY(4px);
}