/* ============================================
   PORTFOLIO — main.css
   Base: variables, reset, typography, layout
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Rajdhani:wght@400;500;600;700&family=Sarabun:wght@300;400;600&display=swap');

/* ---- VARIABLES ---- */
:root {
  --bg:        #030a0f;
  --bg2:       #060f1a;
  --bg3:       #091828;
  --card:      #071420;
  --accent:    #00ff88;
  --accent2:   #00cfff;
  --accent3:   #ff3c6e;
  --accent4:   #ffb700;
  --text:      #b8d8e8;
  --text-dim:  #5a8a9a;
  --border:    #0d2f3f;
  --border2:   #1a4a5e;
  --mono:      'Share Tech Mono', monospace;
  --head:      'Rajdhani', sans-serif;
  --body:      'Sarabun', sans-serif;
  --radius:    4px;
  --transition: 0.3s ease;
}

/* ---- RESET ---- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  overflow-x: hidden;
  cursor: none;
  line-height: 1.7;
}
img { display:block; max-width:100%; }
a  { color: inherit; text-decoration:none; cursor:none; }
ul { list-style:none; }
button { cursor:none; font-family: inherit; }

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius:2px; }

/* ---- SELECTION ---- */
::selection { background: rgba(0,255,136,0.2); color: var(--accent); }

/* ---- SCANLINES overlay ---- */
body::after {
  content:'';
  position:fixed; inset:0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,255,136,0.012) 2px,
    rgba(0,255,136,0.012) 4px
  );
  pointer-events:none;
  z-index:900;
}

/* ---- TYPOGRAPHY ---- */
h1,h2,h3,h4 { font-family: var(--head); font-weight:700; line-height:1.1; }
h1 { font-size: clamp(2.8rem, 6vw, 5rem); }
h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
h3 { font-size: 1.2rem; }
p  { line-height: 1.85; }

/* ---- LAYOUT UTILS ---- */
.container { max-width:1200px; margin:0 auto; padding:0 5%; }
.section    { padding: 7rem 5%; position:relative; z-index:2; }
.section--dark { background: var(--bg2); }

/* ---- SECTION HEADER ---- */
.s-tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--accent3);
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom:.5rem;
}
.s-title {
  font-family: var(--head);
  font-size: clamp(1.8rem,3vw,2.6rem);
  font-weight:700;
  color:#fff;
  margin-bottom:.75rem;
}
.s-title span { color: var(--accent); }
.s-line {
  width:50px; height:2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  margin-bottom: 3rem;
}

/* ---- CORNER DECO ---- */
.corner { position:absolute; width:18px; height:18px; }
.corner--tl { top:0; left:0; border-top:2px solid var(--accent); border-left:2px solid var(--accent); }
.corner--tr { top:0; right:0; border-top:2px solid var(--accent); border-right:2px solid var(--accent); }
.corner--bl { bottom:0; left:0; border-bottom:2px solid var(--accent); border-left:2px solid var(--accent); }
.corner--br { bottom:0; right:0; border-bottom:2px solid var(--accent); border-right:2px solid var(--accent); }

/* ---- BUTTONS ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 2rem;
  font-family: var(--head);
  font-size: .95rem;
  font-weight:600;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid transparent;
  clip-path: polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%);
  transition: all var(--transition);
  position:relative;
  overflow:hidden;
}
.btn::before {
  content:'';
  position:absolute; inset:0;
  background: var(--accent);
  transform: translateX(-110%) skewX(-15deg);
  transition: transform .35s ease;
  z-index:0;
}
.btn:hover::before { transform: translateX(0) skewX(-15deg); }
.btn > * { position:relative; z-index:1; }

.btn--primary { border-color: var(--accent); color: var(--accent); }
.btn--primary:hover { color: var(--bg); }

.btn--ghost { border-color: var(--border2); color: var(--text-dim); }
.btn--ghost::before { background: var(--border2); }
.btn--ghost:hover { color: var(--text); border-color: var(--accent2); }

/* ---- TAG PILLS ---- */
.tag {
  display:inline-block;
  padding: 2px 9px;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing:1px;
  border-radius: 2px;
}
.tag--green { background: rgba(0,255,136,.1); border:1px solid rgba(0,255,136,.25); color: var(--accent); }
.tag--blue  { background: rgba(0,207,255,.1); border:1px solid rgba(0,207,255,.25); color: var(--accent2); }
.tag--red   { background: rgba(255,60,110,.1); border:1px solid rgba(255,60,110,.25); color: var(--accent3); }
.tag--gold  { background: rgba(255,183,0,.1); border:1px solid rgba(255,183,0,.25); color: var(--accent4); }

/* ---- ANIMATIONS ---- */
@keyframes fadeUp   { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes blink    { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes spin     { to{transform:rotate(360deg)} }
@keyframes spinRev  { to{transform:rotate(-360deg)} }
@keyframes pulse    { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.8)} }
@keyframes scanMove { 0%{top:-10%} 100%{top:110%} }
@keyframes glitch1  { 0%,100%{clip-path:inset(0 0 95% 0)} 25%{clip-path:inset(30% 0 50% 0)} 50%{clip-path:inset(60% 0 10% 0)} 75%{clip-path:inset(10% 0 80% 0)} }
@keyframes typeIn   { from{width:0} to{width:100%} }
@keyframes float    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

.anim-fade-up { opacity:0; animation: fadeUp .7s ease forwards; }
.blink { animation: blink 1s step-end infinite; }

/* ---- REVEAL ON SCROLL ---- */
.reveal { opacity:0; transform:translateY(32px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }

/* ---- RESPONSIVE ---- */
@media (max-width:900px) {
  .section { padding: 5rem 5%; }
}
@media (max-width:640px) {
  h1 { font-size:2.2rem; }
  .section { padding: 4rem 4%; }
}