/* ================================================================
   AS SYSTEM — Redesign Preview
   Theme tokens (dark default + light alternative)
   ================================================================ */

:root,
[data-theme="dark"] {
  --bg:           #0A0A0A;
  --bg-elev:      #18181B;
  --bg-section:   #0A0A0A;
  --bg-section-2: #050505;
  --text:         #FFFFFF;
  --text-muted:   rgba(255,255,255,0.65);
  --text-faint:   rgba(255,255,255,0.45);
  --text-mute2:   rgba(255,255,255,0.30);
  --surface:      rgba(255,255,255,0.04);
  --surface-2:    rgba(255,255,255,0.02);
  --surface-h:    rgba(255,255,255,0.06);
  --border:       rgba(255,255,255,0.10);
  --border-soft:  rgba(255,255,255,0.05);
  --border-strong:rgba(255,255,255,0.18);
  --grid-line:    rgba(255,255,255,0.08);
  --shadow-card:  0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 40px -20px rgba(0,0,0,0.5);
  --shadow-glow:  0 1px 0 rgba(255,255,255,0.06) inset, 0 20px 40px -16px rgba(255,140,40,0.30);
  --logo-filter:  none;
  --hero-glow-op: 0.42;
  --invert-on-bg: 0; /* used for icon flips */
}

[data-theme="light"] {
  --bg:           #FAFAFA;
  --bg-elev:      #FFFFFF;
  --bg-section:   #FFFFFF;
  --bg-section-2: #F4F4F5;
  --text:         #0A0A0A;
  --text-muted:   rgba(10,10,10,0.70);
  --text-faint:   rgba(10,10,10,0.50);
  --text-mute2:   rgba(10,10,10,0.35);
  --surface:      rgba(10,10,10,0.035);
  --surface-2:    rgba(10,10,10,0.015);
  --surface-h:    rgba(10,10,10,0.06);
  --border:       rgba(10,10,10,0.10);
  --border-soft:  rgba(10,10,10,0.06);
  --border-strong:rgba(10,10,10,0.20);
  --grid-line:    rgba(10,10,10,0.08);
  --shadow-card:  0 1px 0 rgba(255,255,255,1) inset, 0 18px 38px -22px rgba(0,0,0,0.18);
  --shadow-glow:  0 1px 0 rgba(255,255,255,1) inset, 0 18px 40px -18px rgba(255,140,40,0.45);
  --logo-filter:  none;
  --hero-glow-op: 0.28;
  --invert-on-bg: 1;
}

/* Brand tokens are mode-agnostic */
:root {
  --brand-orange:  #FF7A1A;
  --brand-amber:   #FFC44A;
  --brand-orange-400: #FF9A4A;
  --brand-orange-600: #E5631A;
  --max-w: 1400px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "IBM Plex Sans Thai", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.4s ease, color 0.4s ease;
}
::selection { background: var(--brand-orange); color: #0A0A0A; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-h); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-orange); }

/* Utility class shortcuts that pull from tokens */
.text-prim    { color: var(--text); }
.text-mute    { color: var(--text-muted); }
.text-faint   { color: var(--text-faint); }
.bg-app       { background: var(--bg); }
.bg-section   { background: var(--bg-section); }
.bg-section-2 { background: var(--bg-section-2); }
.surface      { background: var(--surface); }
.surface-2    { background: var(--surface-2); }
.brd          { border: 1px solid var(--border); }
.brd-soft     { border: 1px solid var(--border-soft); }
.brd-b        { border-bottom: 1px solid var(--border); }
.brd-t        { border-top: 1px solid var(--border); }
.shadow-card  { box-shadow: var(--shadow-card); }
.shadow-glow  { box-shadow: var(--shadow-glow); }

/* ================================================================
   Animations
   ================================================================ */
@keyframes vertex-chase {
  0%, 100% {
    opacity: 0.05;
    transform: translate(-50%, -50%) scale(0.5);
    box-shadow: 0 0 0 0 rgba(255,180,80,0);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.4);
    box-shadow: 0 0 8px 1.5px rgba(255,180,80,0.9), 0 0 16px 3px rgba(255,140,40,0.4);
  }
}
@keyframes vertex-chase-cool {
  0%, 100% {
    opacity: 0.04;
    transform: translate(-50%, -50%) scale(0.4);
  }
  50% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1.3);
    box-shadow: 0 0 6px 1px rgba(255,180,80,0.8), 0 0 14px 3px rgba(255,140,40,0.35);
  }
}
@keyframes pixel-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
@keyframes badge-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1);    box-shadow: 0 0 4px rgba(255,140,30,0.10); }
  50%      { opacity: 1;    transform: scale(1.04); box-shadow: 0 0 16px rgba(255,140,30,0.32); }
}
@keyframes badge-pulse-ghost {
  0%, 100% { opacity: 0.30; transform: scale(1); }
  50%      { opacity: 0.65; transform: scale(1.08); }
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.3); }
}
@keyframes fade-slide {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes star-twinkle {
  0%, 100% { opacity: 0.10; transform: translate(-50%, -50%) scale(0.7); box-shadow: 0 0 0 rgba(255,255,255,0); }
  50%      { opacity: 0.95; transform: translate(-50%, -50%) scale(1.25); box-shadow: 0 0 4px 1px rgba(255,255,255,0.55); }
}
@keyframes marquee-rev {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
@keyframes modal-pop {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes gradient-sweep {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes brand-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes brand-shimmer {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255,180,80,0)); }
  50%      { filter: drop-shadow(0 0 14px rgba(255,180,80,0.45)); }
}
@keyframes word-rise {
  from { opacity: 0; transform: translateY(24px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Section reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s, transform 0.8s;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}