/* ═══════════════════════════════════════════════════════
   main.css — Design System Foundation
   SIGNAL // NOISE Portfolio — Haekal Mimtazulfaqhi Zaydan
   ═══════════════════════════════════════════════════════ */

/* ── 1. Custom Properties ── */
:root {
  --void:         #0A0A0F;
  --navy:         #1A1A2E;
  --navy-2:       #12121F;
  --signal:       #00FF88;
  --signal-dim:   rgba(0,255,136,0.12);
  --lime:         #C8FF00;
  --alert:        #FF3A20;
  --amber:        #FF8A00;
  --info:         #00AAFF;
  --white:        #F0F0F0;
  --off-white:    #B0B0C8;
  --gray-1:       #888899;
  --gray-2:       #444455;
  --gray-3:       #22222E;
  --gray-4:       #16161F;

  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body:    'Space Grotesk', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --text-2xs: clamp(0.55rem, 1.2vw, 0.65rem);
  --text-xs:  clamp(0.65rem, 1.5vw, 0.75rem);
  --text-sm:  clamp(0.75rem, 1.8vw, 0.875rem);
  --text-md:  clamp(0.875rem, 2vw, 1rem);
  --text-lg:  clamp(1rem, 2.5vw, 1.15rem);
  --text-xl:  clamp(1.15rem, 3vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 4vw, 2.25rem);
  --text-3xl: clamp(2rem, 5vw, 3.5rem);
  --text-hero:clamp(4.5rem, 10.5vw, 9rem);

  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem;  --s-8: 2rem;    --s-10: 2.5rem;
  --s-12:3rem;    --s-16:4rem;    --s-20:5rem;    --s-24: 6rem;

  --nav-h:         64px;
  --container-w:   1440px;
  --container-px:  clamp(1.25rem, 5vw, 5rem);
  --section-py:    clamp(5rem, 10vw, 10rem);

  --border-subtle:   1px solid rgba(255,255,255,0.06);
  --border-dim:      1px solid rgba(255,255,255,0.10);
  --border-mid:      1px solid rgba(255,255,255,0.15);
  --border-signal:   1px solid rgba(0,255,136,0.25);

  --ease-out-expo:    cubic-bezier(0.16,1,0.3,1);
  --ease-in-out-expo: cubic-bezier(0.87,0,0.13,1);
  --ease-elastic:     cubic-bezier(0.34,1.56,0.64,1);
  --t-fast: 0.2s var(--ease-out-expo);
  --t-base: 0.4s var(--ease-out-expo);
  --t-slow: 0.7s var(--ease-out-expo);

  --z-base:      1;
  --z-overlay:   10;
  --z-nav:       50;
  --z-cursor:    100;
  --z-preloader: 200;
}

/* ── 2. Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:auto; text-size-adjust:100%; -webkit-text-size-adjust:100%; }
body {
  background-color:var(--void); color:var(--white);
  font-family:var(--font-body); font-size:var(--text-md);
  line-height:1.65; overflow-x:hidden; cursor:none;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
body.loading #main-content,
body.loading #nav,
body.loading #footer { visibility:hidden; }
img,video,svg { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; cursor:none; }
button { cursor:none; background:none; border:none; font:inherit; color:inherit; }
ul,ol { list-style:none; }
address { font-style:normal; }
input,textarea,select { font:inherit; color:inherit; background:none; border:none; outline:none; cursor:none; }
textarea { resize:vertical; }

/* ── 3. Scrollbar ── */
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:var(--void); }
::-webkit-scrollbar-thumb { background:var(--gray-2); border-radius:2px; }
::-webkit-scrollbar-thumb:hover { background:var(--signal); }

/* ── 4. Selection ── */
::selection { background:var(--signal); color:var(--void); }

/* ── 5. Focus ── */
:focus-visible { outline:2px solid var(--signal); outline-offset:4px; border-radius:2px; }

/* ── 6. Layout ── */
.container { max-width:var(--container-w); margin-inline:auto; padding-inline:var(--container-px); }
.section { padding-block:var(--section-py); position:relative; overflow:hidden; }
.section--full { height:100svh; min-height:640px; padding:0; display:flex; align-items:center; }

/* ── 7. Type utilities ── */
.font-display { font-family:var(--font-display); letter-spacing:0.04em; }
.font-mono { font-family:var(--font-mono); }
.text-signal { color:var(--signal); }
.text-lime   { color:var(--lime); }
.text-alert  { color:var(--alert); }

/* ── 8. Button System ── */
.btn {
  display:inline-flex; align-items:center; gap:var(--s-3);
  padding:var(--s-4) var(--s-6);
  font-family:var(--font-mono); font-size:var(--text-xs);
  font-weight:500; letter-spacing:0.12em; text-transform:uppercase;
  border:1px solid transparent; border-radius:2px;
  position:relative; overflow:hidden;
  transition:color var(--t-fast),background var(--t-fast),
              border-color var(--t-fast),transform var(--t-fast);
  will-change:transform;
}
.btn--primary { background:var(--signal); color:var(--void); border-color:var(--signal); }
.btn--primary:hover { background:var(--lime); border-color:var(--lime); transform:translateY(-2px); }
.btn--ghost { background:transparent; color:var(--signal); border-color:rgba(0,255,136,0.4); }
.btn--ghost:hover { background:rgba(0,255,136,0.06); border-color:var(--signal); transform:translateY(-2px); }
.btn--full { width:100%; justify-content:center; }
.btn--loading .btn-text { opacity:0.3; }
.btn--loading .btn-loader { opacity:1; }
.btn-loader {
  position:absolute; inset:0; opacity:0;
  background:linear-gradient(90deg,transparent 0%,rgba(0,255,136,0.4) 50%,transparent 100%);
  background-size:200% 100%;
  animation:wave-progress 1s linear infinite;
  transition:opacity var(--t-fast);
}
.btn-icon { font-size:1.1em; }

/* ── 9. Section Header ── */
.section-header { display:flex; align-items:flex-end; gap:var(--s-6); margin-bottom:clamp(3rem,6vw,5rem); }
.section-num { font-family:var(--font-mono); font-size:var(--text-sm); color:var(--gray-2); letter-spacing:0.05em; padding-bottom:var(--s-1); flex-shrink:0; }
.section-title-wrap { display:flex; flex-direction:column; gap:var(--s-1); }
.section-tag { font-family:var(--font-mono); font-size:var(--text-2xs); color:var(--signal); letter-spacing:0.15em; opacity:0.7; }
.section-title { font-family:var(--font-display); font-size:var(--text-3xl); line-height:0.95; letter-spacing:0.04em; color:var(--white); }
.section-title .char { display:inline-block; }
.section-line {
  flex:1; height:1px;
  background:linear-gradient(90deg,var(--signal) 0%,rgba(0,255,136,0.1) 60%,transparent 100%);
  margin-bottom:0.4rem; transform-origin:left center;
}

/* ── 10. Tags ── */
.tag { display:inline-block; padding:var(--s-1) var(--s-3); font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:0.1em; text-transform:uppercase; border:1px solid rgba(0,255,136,0.3); color:var(--signal); border-radius:2px; }
.tag--alt { border-color:rgba(200,255,0,0.3); color:var(--lime); }
.tech-tag { display:inline-block; padding:2px 8px; font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:0.08em; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:2px; color:var(--gray-1); transition:border-color var(--t-fast),color var(--t-fast); }
.tech-tag:hover { border-color:rgba(0,255,136,0.4); color:var(--signal); }