/* APLab — shared global styles across all pages */

/* ===== Theme tokens (channel RGB so Tailwind alpha works) ===== */
:root {
  --c-ink: 20 33 61;
  --c-paper: 246 247 249;
  --c-fog: 237 239 243;
  --c-line: 226 229 235;
  --c-slatey: 91 99 115;
  --c-gray2: 153 153 154;
  --c-surface: 255 255 255;   /* card / input surface */
}

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { font-family: "Anuphan","IBM Plex Sans Thai",system-ui,sans-serif; background: rgb(var(--c-paper)); color: rgb(var(--c-ink)); -webkit-font-smoothing:antialiased; margin:0; transition: background-color .3s ease, color .3s ease; }
::selection { background: rgba(240,80,30,.18); }

.eyebrow { font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.22em; text-transform:uppercase; }

/* Lucide inline svg */
.lic { display:inline-flex; align-items:center; justify-content:center; flex:none; }
.lic > svg { width:100%; height:100%; display:block; }

/* striped placeholder */
.ph { position:relative; overflow:hidden; background-color:#EDEFF3; background-image:repeating-linear-gradient(135deg, rgba(20,33,61,.045) 0 10px, transparent 10px 20px); }
.ph-navy { background-color:#1B2C50; background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px); }
.ph-tag { font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; }

/* reveal — visible by default; transform-only entrance so nothing can get stuck hidden */
.reveal { opacity:1; }
.reveal.in { animation: revealRise .6s cubic-bezier(.22,1,.36,1); }
@keyframes revealRise { from { transform: translateY(16px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal.in { animation:none; } }

/* card hover */
.ucard { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease, background-color .3s ease; }
.ucard:hover { transform: translateY(-6px); }

/* nav underline */
.nav-link { position:relative; }
.nav-link::after { content:""; position:absolute; left:0; right:100%; bottom:-5px; height:2px; background:#F0501E; transition:right .25s ease; }
.nav-link:hover::after, .nav-link[data-active="true"]::after { right:0; }
.nav-link[data-active="true"] { color:#F0501E; }

/* mesh */
.mesh-line { stroke: currentColor; stroke-width:1.3; opacity:.5; vector-effect:non-scaling-stroke; }
.mesh-dot { fill: currentColor; }

/* modal */
.modal-bg { backdrop-filter: blur(4px); }
.modal-card { animation: modalIn .32s cubic-bezier(.22,1,.36,1); }
@keyframes modalIn { from { opacity:0; transform: translateY(14px) scale(.985); } to { opacity:1; transform:none; } }

.hide-scroll::-webkit-scrollbar { display:none; } .hide-scroll { -ms-overflow-style:none; scrollbar-width:none; }

/* range inputs */
input[type=range] { -webkit-appearance:none; appearance:none; height:6px; border-radius:999px; background:#E2E5EB; outline:none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:999px; background:#F0501E; border:3px solid #fff; box-shadow:0 1px 6px rgba(240,80,30,.5); cursor:pointer; }
input[type=range]::-moz-range-thumb { width:20px; height:20px; border-radius:999px; background:#F0501E; border:3px solid #fff; cursor:pointer; }

/* toast */
.toast-wrap { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast { background:#14213D; color:#fff; padding:12px 18px; border-radius:12px; font-size:14px; box-shadow:0 14px 34px -12px rgba(20,33,61,.5); display:flex; align-items:center; gap:10px; animation: toastIn .28s cubic-bezier(.22,1,.36,1); }
@keyframes toastIn { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform:none; } }

.drag-on { border-color:#F0501E !important; background:rgba(240,80,30,.05) !important; }
.pricepop { animation: countpop .3s ease; }
@keyframes countpop { 0% { transform: scale(.96); opacity:.5 } 100% { transform: scale(1); opacity:1 } }

.clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Home hero brand mark */
.hero-logo-stage {
  width: 86%;
  aspect-ratio: 1.12 / 1;
  margin-inline: auto;
  display: grid;
  place-items: center;
  border-radius: 24px;
  overflow: hidden;
}
.hero-logo {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* smooth the swap on big surfaces */
header > *, footer, section { transition: background-color .3s ease, border-color .3s ease; }