/* ============================================
   BLACKSILV PORTFOLIO v2 — style.css
   Warm amber | Glassmorphism | Editorial
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Clash+Display:wght@400;500;600;700&family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&family=Space+Mono:wght@400;700&display=swap');

/* ── TOKENS ─────────────────────────────── */
:root {
  --ink:       #080705;
  --ink2:      #100e0a;
  --ink3:      #181410;
  --glass:     rgba(255,255,255,0.04);
  --glass2:    rgba(255,255,255,0.07);
  --border:    rgba(255,255,255,0.08);
  --border-hi: rgba(232,160,48,0.45);
  --gold:      #e8a030;
  --gold2:     #f5c04a;
  --gold3:     #c07820;
  --ember:     #d4622a;
  --cream:     #f2e8d5;
  --cream2:    #c8b48a;
  --muted:     #6a5e48;
  --success:   #4caf72;
  --r:         14px;
  --r2:        22px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:'DM Sans',sans-serif;
  line-height:1.7;
  overflow-x:hidden;
  cursor:none;
}

/* ── ANIMATED MESH BG ───────────────────── */
body::before{
  content:'';
  position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 20%, rgba(232,160,48,0.055) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 75%, rgba(212,98,42,0.045) 0%, transparent 50%),
    radial-gradient(ellipse 50% 70% at 50% 100%, rgba(232,160,48,0.03) 0%, transparent 60%);
  animation:meshShift 12s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes meshShift{
  0%  {background-position:0% 0%,100% 100%,50% 100%}
  100%{background-position:30% 20%,70% 60%,60% 80%}
}

/* Noise grain */
body::after{
  content:'';
  position:fixed;inset:0;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events:none;opacity:.5;
}

/* ── CUSTOM CURSOR ──────────────────────── */
.cursor{
  width:9px;height:9px;
  background:var(--gold);border-radius:50%;
  position:fixed;top:0;left:0;z-index:9999;
  pointer-events:none;
  transition:transform .12s,background .2s;
  mix-blend-mode:difference;
}
.cursor-ring{
  width:34px;height:34px;
  border:1.5px solid rgba(232,160,48,.5);
  border-radius:50%;
  position:fixed;top:0;left:0;z-index:9998;
  pointer-events:none;
  transition:width .2s,height .2s,opacity .2s;
}
.cursor.big{transform:translate(-50%,-50%) scale(2.8);background:var(--ember)}
.cursor-ring.big{width:52px;height:52px;opacity:.2}

/* ── NAV ────────────────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 6%;
  transition:padding .35s,background .35s,border-color .35s;
  border-bottom:1px solid transparent;
}
nav.stuck{
  padding:14px 6%;
  background:rgba(8,7,5,.88);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-color:var(--border);
}
.nav-logo{
  font-family:'Syne',sans-serif;
  font-weight:800;font-size:1.15rem;
  color:var(--cream);text-decoration:none;
  letter-spacing:.01em;
}
.nav-logo em{color:var(--gold);font-style:normal}
.nav-links{display:flex;gap:34px;list-style:none}
.nav-links a{
  color:var(--cream2);text-decoration:none;
  font-size:.83rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  position:relative;transition:color .3s;
}
.nav-links a::after{
  content:'';position:absolute;bottom:-3px;left:0;
  width:0;height:1.5px;background:var(--gold);
  transition:width .3s;
}
.nav-links a:hover,
.nav-links a.active{color:var(--gold)}
.nav-links a:hover::after,
.nav-links a.active::after{width:100%}
.nav-cta{
  padding:9px 22px;
  border:1.5px solid var(--border-hi);
  border-radius:50px;
  color:var(--gold);
  font-size:.82rem;font-weight:600;
  text-decoration:none;
  transition:.3s;
  backdrop-filter:blur(8px);
}
.nav-cta:hover{background:var(--gold);color:var(--ink)}

/* ── HAMBURGER ──────────────────────────── */
.ham{
  display:none;background:none;border:none;
  flex-direction:column;gap:5px;cursor:pointer;padding:4px;
}
.ham span{
  display:block;width:22px;height:2px;
  background:var(--cream);border-radius:2px;transition:.3s;
}
.ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ham.open span:nth-child(2){opacity:0}
.ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── MOBILE OVERLAY ─────────────────────── */
.mob-nav{
  position:fixed;inset:0;z-index:490;
  background:rgba(8,7,5,.97);
  backdrop-filter:blur(30px);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:44px;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.mob-nav.open{opacity:1;pointer-events:all}
.mob-nav a{
  font-family:'Syne',sans-serif;font-size:2.4rem;font-weight:700;
  color:var(--cream);text-decoration:none;transition:color .25s;
}
.mob-nav a:hover{color:var(--gold)}

/* ── GLASS CARD ─────────────────────────── */
.glass{
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:var(--r2);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:border-color .3s,transform .3s,box-shadow .3s;
}
.glass:hover{
  border-color:var(--border-hi);
  transform:translateY(-5px);
  box-shadow:0 24px 48px rgba(0,0,0,.35),0 0 0 1px rgba(232,160,48,.08);
}

/* ── SECTION BASICS ─────────────────────── */
section,.section{position:relative;z-index:2;padding:110px 6%}
.section-label{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Space Mono',monospace;font-size:.7rem;
  color:var(--gold);letter-spacing:.22em;text-transform:uppercase;
  margin-bottom:18px;
}
.section-label::before{
  content:'';width:28px;height:1px;background:var(--gold);display:block;
}
h1.big,h2.big{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:clamp(2.6rem,7vw,5.5rem);
  line-height:1.0;color:var(--cream);
}
h2.med{
  font-family:'Syne',sans-serif;font-weight:700;
  font-size:clamp(1.8rem,4vw,3rem);line-height:1.1;color:var(--cream);
}
.gold{color:var(--gold)}
.divider{
  width:50px;height:3px;
  background:linear-gradient(90deg,var(--ember),var(--gold));
  border-radius:2px;margin:22px 0 44px;
}

/* ── BUTTONS ────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 32px;border-radius:50px;
  font-family:'DM Sans',sans-serif;font-weight:600;
  font-size:.9rem;letter-spacing:.03em;
  text-decoration:none;border:none;cursor:pointer;transition:.3s;
}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--gold2);transform:translateY(-2px);box-shadow:0 14px 32px rgba(232,160,48,.28)}
.btn-ghost{background:transparent;color:var(--cream);border:1.5px solid var(--border)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}

/* ── TAG PILL ───────────────────────────── */
.tag{
  display:inline-block;padding:4px 13px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);border-radius:50px;
  font-family:'Space Mono',monospace;
  font-size:.72rem;color:var(--cream2);letter-spacing:.04em;
}

/* ── SCROLL REVEAL ──────────────────────── */
.sr{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s ease}
.sr.vis{opacity:1;transform:none}
.sr-l{opacity:0;transform:translateX(-30px);transition:opacity .75s ease,transform .75s ease}
.sr-l.vis{opacity:1;transform:none}
.sr-r{opacity:0;transform:translateX(30px);transition:opacity .75s ease,transform .75s ease}
.sr-r.vis{opacity:1;transform:none}

/* ── PAGE FADE IN ───────────────────────── */
.page-wrap{opacity:0;animation:pageFade .6s .05s ease forwards}
@keyframes pageFade{to{opacity:1}}

/* ── FOOTER ─────────────────────────────── */
footer{
  position:relative;z-index:2;
  border-top:1px solid var(--border);
  padding:36px 6%;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
}
footer p{font-size:.8rem;color:var(--muted);font-family:'Space Mono',monospace}
.foot-links{display:flex;gap:22px}
.foot-links a{font-size:.8rem;color:var(--muted);text-decoration:none;transition:color .3s}
.foot-links a:hover{color:var(--gold)}

/* ── BADGES ─────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 14px;border-radius:50px;
  font-family:'Space Mono',monospace;font-size:.68rem;letter-spacing:.07em;
}
.badge-live{background:rgba(76,175,114,.1);color:#4caf72;border:1px solid rgba(76,175,114,.25)}
.badge-building{background:rgba(232,160,48,.1);color:var(--gold);border:1px solid rgba(232,160,48,.25)}
.badge-ai{background:rgba(140,100,255,.1);color:#b09aff;border:1px solid rgba(140,100,255,.25)}
.badge-hot{background:rgba(212,98,42,.12);color:var(--ember);border:1px solid rgba(212,98,42,.28)}
.dot-pulse{
  width:7px;height:7px;border-radius:50%;background:currentColor;
  animation:dotPulse 2s infinite;
}
@keyframes dotPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}

/* ── RESPONSIVE ─────────────────────────── */
@media(max-width:900px){
  .nav-links,.nav-cta{display:none}
  .ham{display:flex}
  section,.section{padding:80px 5%}
  body{cursor:auto}
  .cursor,.cursor-ring{display:none}
}
@media(max-width:600px){
  section,.section{padding:64px 5%}
}

/* ── SHARED THEME VARIABLES (used by inline page styles) ── */
:root {
  --amber:   #e8a030;
  --amber2:  #f5c04a;
  --orange:  #d4622a;
  --bg:      #080705;
  --bg2:     #0e0c09;
  --bg3:     #161310;
  --surface: rgba(255,255,255,0.04);
  --radius:  10px;
  --radius-lg: 16px;
}

/* ── BTN ALIASES ── */
.btn-primary {
  background: var(--amber);
  color: var(--bg);
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 32px; border-radius: 50px;
  font-weight: 700; font-size: 0.9rem;
  text-decoration: none; border: none; cursor: pointer;
  transition: 0.3s;
}
.btn-primary:hover { background: var(--amber2); transform: translateY(-2px); }
.btn-outline {
  background: transparent;
  color: var(--cream);
  border: 1.5px solid rgba(255,255,255,0.12);
  display: inline-flex; align-items: center;
  padding: 14px 32px; border-radius: 50px;
  font-weight: 600; font-size: 0.9rem;
  text-decoration: none; cursor: pointer;
  transition: 0.3s;
}
.btn-outline:hover { border-color: var(--amber); color: var(--amber); transform: translateY(-2px); }

/* ── SECTION TITLES (page-level) ── */
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--cream);
  line-height: 1.15;
  margin-bottom: 12px;
}
.section-title em { font-style: italic; color: var(--cream2); }

/* ── REVEAL ANIMATION ── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ── DIVIDER ── */
.divider { width: 50px; height: 3px; background: linear-gradient(90deg, var(--orange), var(--amber)); border-radius: 2px; margin: 16px 0 40px; }

/* ── TAG ── */
.tag {
  display: inline-block; padding: 4px 13px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50px;
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem; color: var(--cream2); letter-spacing: 0.04em;
}

/* ── SECTION LABEL ── */
.section-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Space Mono', monospace; font-size: 0.7rem;
  color: var(--amber); letter-spacing: 0.22em; text-transform: uppercase;
  margin-bottom: 18px;
}
.section-label::before { content: ''; width: 28px; height: 1px; background: var(--amber); display: block; }

/* ── MOBILE NAV ── */
.mobile-nav {
  position: fixed; inset: 0; z-index: 490;
  background: rgba(8,7,5,0.97); backdrop-filter: blur(30px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 36px;
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.mobile-nav.open { opacity: 1; pointer-events: all; }
.mobile-nav a { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 700; color: var(--cream); text-decoration: none; }
.mobile-nav a:hover { color: var(--amber); }
.mobile-close { background: none; border: none; color: var(--cream2); font-size: 1.2rem; cursor: pointer; position: absolute; top: 28px; right: 6%; }

/* ── NAV MENU BTN ── */
.nav-menu-btn {
  display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 4px;
}
.nav-menu-btn span { display: block; width: 22px; height: 2px; background: var(--cream); border-radius: 2px; }
@media (max-width: 900px) {
  .nav-links { display: none !important; }
  .nav-menu-btn { display: flex; }
}

/* ── FOOTER LINKS ── */
.footer-links { display: flex; gap: 22px; }
.footer-links a { font-size: 0.8rem; color: var(--muted); text-decoration: none; transition: color 0.3s; }
.footer-links a:hover { color: var(--amber); }

/* ── NAV LOGO SPAN ── */
.nav-logo span { color: var(--amber); }

/* ── NAV SCROLLED ── */
nav.scrolled {
  background: rgba(8,7,5,0.9); backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* ── Playfair import ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&display=swap');