/* ============================================================
   Ritsak Yernburee — Premium Portfolio
   Design: Deep Navy · Gold Accent · Kanit Typography
   ============================================================ */

:root {
  --bg-1: #060912;
  --bg-2: #0C1020;
  --bg-3: #111830;

  --ink:     #E8EBF5;
  --ink-dim: #A8B2CC;
  --muted:   #5C6480;

  --gold:    #C8A05A;
  --gold-lt: #DDB870;
  --gold-dk: #8A6830;
  --gold-bg: rgba(200, 160, 90, 0.10);

  --line:    rgba(255, 255, 255, 0.07);
  --line-md: rgba(255, 255, 255, 0.12);
  --card:    rgba(12, 16, 32, 0.72);
  --card-hv: rgba(18, 24, 48, 0.90);

  --font: "Kanit", "Helvetica Neue", system-ui, sans-serif;
  --r: 14px;
  --r-sm: 8px;
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-weight: 400;
  background-color: var(--bg-1);
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -5%, rgba(75, 100, 220, 0.07) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 95% 105%, rgba(200, 160, 90, 0.04) 0%, transparent 65%);
  background-attachment: fixed;
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.01em;
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

::selection { background: rgba(200,160,90,0.25); color: #fff; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-dk), var(--gold));
  border-radius: 99px;
  border: 2px solid var(--bg-1);
}

/* ============================================================
   HEADER
   ============================================================ */
header.tech-bg {
  position: sticky !important;
  top: 0;
  z-index: 50;
  background: rgba(6, 9, 18, 0.85) !important;
  backdrop-filter: saturate(160%) blur(18px) !important;
  -webkit-backdrop-filter: saturate(160%) blur(18px) !important;
  border-bottom: 1px solid var(--line) !important;
  overflow: visible;
}

header.tech-bg::before { display: none !important; }

/* Logo */
header .text-2xl.font-bold {
  font-family: var(--font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 1.1rem !important;
}

/* Gradient text in logo */
header .gradient-text { font-weight: 700; }

/* Nav links */
header nav a {
  font-family: var(--font) !important;
  font-weight: 400 !important;
  font-size: 0.875rem !important;
  color: var(--ink-dim) !important;
  letter-spacing: 0.05em;
  position: relative;
  padding-bottom: 4px;
  transition: color 0.25s !important;
}

header nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1.5px;
  background: var(--gold);
  border-radius: 99px;
  transition: width 0.3s ease;
}

header nav a:hover { color: var(--gold) !important; }
header nav a:hover::after { width: 100%; }
header nav a.text-indigo-300 { color: var(--gold) !important; }
header nav a.text-indigo-300::after { width: 100%; }

/* ============================================================
   GRADIENT TEXT
   ============================================================ */
.gradient-text {
  background: linear-gradient(115deg, #ffffff 0%, var(--gold-lt) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ============================================================
   CARDS
   ============================================================ */
.tech-card {
  background: var(--card) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.03) inset,
    0 20px 50px -24px rgba(0,0,0,0.7);
  transition: border-color 0.32s, background 0.32s, box-shadow 0.32s, transform 0.32s !important;
  position: relative;
}

.tech-card::before { display: none !important; }

.tech-card:hover {
  border-color: rgba(200,160,90,0.22) !important;
  background: var(--card-hv) !important;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.04) inset,
    0 28px 60px -20px rgba(0,0,0,0.8),
    0 0 0 1px rgba(200,160,90,0.07) !important;
  transform: translateY(-5px) !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */
a.bg-indigo-600,
button.bg-indigo-600,
button[type="submit"].bg-indigo-600 {
  background: var(--gold) !important;
  background-image: none !important;
  color: #07090F !important;
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.06em;
  border: 1px solid transparent !important;
  box-shadow: 0 8px 24px -8px rgba(200,160,90,0.40) !important;
  transition: background 0.25s, transform 0.2s, box-shadow 0.25s !important;
}

a.bg-indigo-600:hover,
button.bg-indigo-600:hover,
button[type="submit"].bg-indigo-600:hover {
  background: var(--gold-lt) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px -8px rgba(200,160,90,0.55) !important;
  filter: none !important;
}

a.border-indigo-400 {
  background: transparent !important;
  color: var(--gold) !important;
  font-family: var(--font) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.06em;
  border: 1px solid rgba(200,160,90,0.38) !important;
  transition: border-color 0.25s, background 0.25s, transform 0.2s !important;
  box-shadow: none !important;
}

a.border-indigo-400:hover {
  border-color: var(--gold) !important;
  background: rgba(200,160,90,0.08) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px -12px rgba(200,160,90,0.35) !important;
}

/* ============================================================
   EYEBROW LABEL
   ============================================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

.eyebrow::before,
.eyebrow::after {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: var(--gold);
  opacity: 0.55;
}

/* ============================================================
   STAT NUMBERS
   ============================================================ */
.stat-number {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.04em;
}

.stat-label {
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--muted);
  letter-spacing: 0.06em;
  margin-top: 6px;
}

/* ============================================================
   PROFILE RING
   ============================================================ */
.profile-ring {
  position: relative;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-ring::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: var(--gold);
  border-right-color: rgba(200,160,90,0.28);
  animation: spin 14s linear infinite;
}

.profile-ring::after {
  content: '';
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  border: 1px dashed rgba(200,160,90,0.13);
  animation: spin 28s linear infinite reverse;
}

/* ============================================================
   SECTION GLOWS (hero)
   ============================================================ */
.hero-glow-a {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 55% at 15% 45%, rgba(75,100,220,0.07) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
}

.hero-glow-b {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 50% at 85% 60%, rgba(200,160,90,0.05) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
}

/* ============================================================
   CODE CHIP — hidden (not suitable for SEO branding)
   ============================================================ */
.code-text { display: none !important; }

/* Floating tech icons — hidden */
.fixed.top-0.left-0.w-full.h-full.pointer-events-none.z-0 { display: none !important; }

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline-item {
  position: relative;
  padding-left: 2.8rem;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: 1.1rem;
  top: 28px;
  bottom: -2.5rem;
  width: 1px;
  background: linear-gradient(to bottom, rgba(200,160,90,0.45), rgba(200,160,90,0.03));
}

.timeline-item:last-child::before { display: none; }

.timeline-dot {
  position: absolute;
  left: 0.83rem;
  top: 0.72rem;
  width: 0.52rem;
  height: 0.52rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,160,90,0.18), 0 0 14px rgba(200,160,90,0.55);
}

/* ============================================================
   SKILL BARS
   ============================================================ */
.skill-bar {
  height: 5px;
  border-radius: 99px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  border: none !important;
}

.skill-progress {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--gold-dk) 0%, var(--gold) 65%, var(--gold-lt) 100%) !important;
  box-shadow: 0 0 10px rgba(200,160,90,0.45);
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ============================================================
   CONTACT FORM
   ============================================================ */
.contact-input {
  background: rgba(6,9,18,0.65) !important;
  border: 1px solid var(--line-md) !important;
  color: var(--ink) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font) !important;
  font-size: 0.9rem !important;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.contact-input::placeholder { color: var(--muted) !important; }

.contact-input:focus {
  outline: none;
  border-color: rgba(200,160,90,0.5) !important;
  box-shadow: 0 0 0 3px rgba(200,160,90,0.09) !important;
}

/* ============================================================
   TAGS & BADGES
   ============================================================ */
.project-tag {
  display: inline-block;
  background: rgba(200,160,90,0.08) !important;
  color: rgba(221,184,112,0.85) !important;
  border: 1px solid rgba(200,160,90,0.18) !important;
  padding: 3px 12px;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-right: 5px;
  margin-bottom: 5px;
}

.role-badge {
  display: inline-block;
  background: rgba(60,200,130,0.10) !important;
  color: #5DDFA0 !important;
  border: 1px solid rgba(60,200,130,0.20) !important;
  padding: 3px 12px;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-left: 8px;
}

/* override colorful Tailwind tags on index/skills pages */
span.bg-green-600\/20, span.text-green-300 { background: rgba(200,160,90,0.08) !important; color: rgba(221,184,112,0.85) !important; border: 1px solid rgba(200,160,90,0.18) !important; }
span.bg-yellow-600\/20, span.text-yellow-300 { background: rgba(200,160,90,0.08) !important; color: rgba(221,184,112,0.85) !important; border: 1px solid rgba(200,160,90,0.18) !important; }
span.bg-indigo-600\/20, span.text-indigo-300 { background: rgba(200,160,90,0.08) !important; color: rgba(221,184,112,0.85) !important; border: 1px solid rgba(200,160,90,0.18) !important; }
span.bg-purple-600\/20, span.text-purple-300 { background: rgba(200,160,90,0.08) !important; color: rgba(221,184,112,0.85) !important; border: 1px solid rgba(200,160,90,0.18) !important; }

/* ============================================================
   SWIPER
   ============================================================ */
.swiper-button-next, .swiper-button-prev {
  color: var(--gold) !important;
  background: rgba(6,9,18,0.78);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line-md);
  width: 40px; height: 40px;
  border-radius: 50%;
  transition: all 0.3s;
}

.swiper-button-next:hover, .swiper-button-prev:hover {
  background: rgba(200,160,90,0.14);
  border-color: var(--gold);
}

.swiper-button-next::after,
.swiper-button-prev::after { font-size: 1rem !important; font-weight: 700; }

.swiper-pagination-bullet { background: #e2e8f0 !important; opacity: 0.35; }
.swiper-pagination-bullet-active {
  background: var(--gold) !important;
  opacity: 1;
  box-shadow: 0 0 8px rgba(200,160,90,0.7);
}

/* ============================================================
   MOBILE MENU
   ============================================================ */
.mobile-menu {
  position: fixed;
  top: 0; right: -100%;
  width: 80%; max-width: 300px;
  height: 100vh;
  background: rgba(6,9,18,0.97);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-left: 1px solid var(--line);
  box-shadow: -20px 0 60px rgba(0,0,0,0.6);
  transition: right 0.35s cubic-bezier(0.22,1,0.36,1);
  z-index: 100;
  padding: 24px;
  overflow-y: auto;
}

.mobile-menu.open { right: 0; }

.mobile-menu a {
  display: block;
  padding: 14px 8px;
  color: var(--ink-dim);
  font-family: var(--font);
  font-weight: 400;
  font-size: 1rem;
  border-bottom: 1px solid var(--line);
  transition: color 0.25s, padding-left 0.25s;
}

.mobile-menu a:hover,
.mobile-menu a.text-indigo-300 { color: var(--gold); padding-left: 14px; }

.menu-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(2px);
  z-index: 99;
  opacity: 0; visibility: hidden;
  transition: all 0.3s;
}

.menu-overlay.active { opacity: 1; visibility: visible; }

.close-menu {
  position: absolute; top: 18px; right: 18px;
  color: var(--ink-dim);
  font-size: 1.5rem;
  background: transparent; border: none;
  cursor: pointer;
  transition: color 0.3s, transform 0.3s;
}

.close-menu:hover { color: var(--gold); transform: rotate(90deg); }

/* ============================================================
   TECH-BG sections
   ============================================================ */
.tech-bg { position: relative; overflow: visible; }
.tech-bg::before { display: none !important; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-16px); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-spin-slow         { animation: spin 20s linear infinite; }
.animate-spin-slow-reverse { animation: spin 25s linear infinite reverse; }

/* ============================================================
   SKILL TOOLS (bg overrides for tool icons)
   ============================================================ */
.bg-indigo-600\/20, .bg-green-600\/20, .bg-purple-600\/20,
.bg-yellow-600\/20, .bg-blue-600\/20, .bg-orange-600\/20,
.bg-red-600\/20, .bg-pink-600\/20 {
  background: rgba(200,160,90,0.10) !important;
}

.text-indigo-300, .text-green-300, .text-purple-300,
.text-yellow-300, .text-blue-300, .text-orange-300,
.text-red-300, .text-pink-300 {
  color: var(--gold) !important;
}

/* But keep specific gold + green on badges */
.role-badge .text-green-300 { color: #5DDFA0 !important; }

/* Timeline company name & date override */
h3.text-indigo-200, h3.text-lg.text-indigo-200 { color: var(--ink-dim) !important; }
span.text-indigo-400 { color: var(--muted) !important; }

/* About info icons */
.text-indigo-200 { color: var(--ink-dim) !important; }

/* Section heading text */
h2.text-indigo-300 { color: var(--gold) !important; }
h3.text-lg.font-semibold.text-indigo-300, h3.font-semibold.text-indigo-300 { color: var(--gold) !important; }

/* Input labels */
label.text-gray-300 { color: var(--ink-dim) !important; font-family: var(--font) !important; font-size: 0.875rem !important; }

/* Text colors */
.text-gray-300 { color: var(--ink-dim) !important; }
.text-gray-400 { color: var(--muted) !important; }
.text-indigo-300 { color: var(--gold) !important; }

/* Tool item row */
.flex.items-center.p-4.bg-\[#0F172A\]\/50.rounded-lg {
  background: rgba(12,16,32,0.55) !important;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color 0.25s;
}

.flex.items-center.p-4.bg-\[#0F172A\]\/50.rounded-lg:hover {
  border-color: rgba(200,160,90,0.2);
}

/* ============================================================
   FOOTER
   ============================================================ */
footer { border-top-color: var(--line) !important; }
footer .text-sm { color: var(--muted) !important; font-family: var(--font) !important; }
footer a i { color: var(--muted) !important; transition: color 0.25s; }
footer a:hover i { color: var(--gold) !important; }

/* ============================================================
   PAGE TITLE HEADING
   ============================================================ */
h1.gradient-text {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Education list items */
ul.list-disc li { color: var(--ink-dim); font-size: 0.9rem; }

/* ============================================================
   MISC OVERRIDES
   ============================================================ */
.bg-\[#0F172A\]\/50 { background: rgba(12,16,32,0.55) !important; }