/* --- baseline normalize (trimmed) --- */
html{line-height:1.15;-webkit-text-size-adjust:100%}
body{margin:0}
main{display:block}
h1{font-size:2em;margin:0.67em 0}
hr{box-sizing:content-box;height:0;overflow:visible}
pre,code,kbd,samp{font-family:monospace,monospace;font-size:1em}
a{background-color:transparent}
img{border-style:none;max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;margin:0}
[hidden]{display:none}
/* --- end normalize --- */

:root{
  --bg:#0b1220;        /* deep navy */
  --ink:#eaf1fb;       /* off-white */
  --muted:#a5b3c9;     /* cool gray */
  --accent:#60a5fa;    /* softer blue */
  --accent-ink:#071022;
  --card:#0f172a;      /* panel */
  --stroke:#1e293b;    /* border */
  --radius:16px;
  --shadow: 0 14px 60px rgba(6,12,28,.45);
  --max: 1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Subtle grid background */
body{
  margin:0;
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
  background:
    radial-gradient(1000px 600px at 50% -10%, rgba(39,76,119,.06), rgba(139,92,246,.04), transparent 70%),
    linear-gradient(0deg, rgba(255,255,255,.7), rgba(255,255,255,.7)),
    repeating-linear-gradient(0deg, transparent 0 29px, rgba(226,232,240,.6) 29px 30px),
    repeating-linear-gradient(90deg, transparent 0 29px, rgba(226,232,240,.6) 29px 30px);
  color:var(--ink); line-height:1.7;
}

/* Nav */
.site-nav.simple{
  position:sticky; top:0; z-index:10;
  background:#0b0e14; border-bottom:1px solid #111827;
}
.nav-inner{ width:min(94%, var(--max)); margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:12px 0 }
.brand.white{ color:#fff; font-weight:800; text-decoration:none; letter-spacing:.4px }
.nav-links a{ color:#e5e7eb; text-decoration:none; margin-left:16px; padding:8px 10px; border-radius:10px }
.nav-links a:hover, .nav-links a.active{ background:#111827; color:#fff }

/* Layout */
.wrap{ width:min(94%, var(--max)); margin:0 auto; padding:64px 0 }
.page-title{ font-size: clamp(28px, 4vw, 36px); margin:0 0 16px; font-weight:800 }
.page-title.center{ text-align:center }

/* Hero */
.hero.hero-center{
  width:min(94%, var(--max)); margin:0 auto; min-height:70vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:12px; position:relative; overflow:hidden;
}
.hero-innovative .flare{
  position:absolute; width:900px; height:900px; border-radius:50%;
  background: radial-gradient(closest-side, rgba(58,160,255,.25), rgba(139,92,246,.18), transparent 70%);
  filter: blur(20px); top:-200px; left:50%; transform: translateX(-50%);
  animation: float 14s ease-in-out infinite;
}
@keyframes float{
  0%{ transform: translateX(-50%) translateY(0) scale(1) }
  50%{ transform: translateX(-50%) translateY(8px) scale(1.02) }
  100%{ transform: translateX(-50%) translateY(0) scale(1) }
}
.kicker{
  text-transform:uppercase; letter-spacing:.4px; font-size:12px; font-weight:700;
  color:#fff; background:#274c77; padding:8px 12px; border-radius:999px;
}
.tagline{ font-weight:800; font-size: clamp(32px, 6vw, 56px); }
.tagline.big{ max-width:20ch }
.cta-row.center{ display:flex; justify-content:center; gap:12px; margin-top:6px }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 20px; border-radius:12px; text-decoration:none; border:1px solid var(--stroke) }
.btn.primary{ background:var(--accent); color:#fff; border:1px solid #1f3b5b }
.btn.primary.big{ padding:14px 24px; font-size:18px }
.contact-row.center{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:12px }
.contact-row.center.subtle .chip{ background:#f8fafc; color:var(--ink) }
.chip{ display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px; border:1px solid var(--stroke); color:var(--ink); text-decoration:none; background:#fff }

/* Card description above boxes */
.card-desc{ width:min(94%, var(--max)); margin: 18px auto 8px; color:var(--muted); font-size:14px }

/* Portfolio boxes with pop hover */
.box{
  display:block; width:min(94%, var(--max)); margin:0 auto 28px;
  border:1px solid var(--stroke); border-radius:14px; overflow:hidden; background:#fff;
  box-shadow: var(--shadow); transform: translateY(0) scale(1); transition: transform .22s ease, box-shadow .22s ease;
  position:relative;
}
.box:hover{ transform: translateY(-6px) scale(1.01); box-shadow: 0 18px 50px rgba(2,6,23,.14) }
.box picture, .box img{ width:100%; display:block }
.box img{ aspect-ratio: 16/9; object-fit:cover }
.box-overlay{
  position:absolute; left:0; right:0; bottom:0; padding:16px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 100%);
  color:#fff; opacity:.95; pointer-events:none;
}
.box-title{ font-weight:800; font-size:18px }
.box-sub{ font-size:14px; opacity:.9 }

/* Resume frame */
.resume-actions{ display:flex; gap:10px; margin:8px 0 18px }
.card.flat{ border:1px solid var(--stroke); border-radius:14px; background:#fff; box-shadow: var(--shadow); padding:0; overflow:hidden }

/* About page avatar */
.avatar{ position:relative; overflow:hidden; border-radius:20px; }
.avatar img{ width:100%; height:100%; object-fit:cover; display:block }

/* Footer */
.site-footer.minimal{ border-top:1px solid var(--stroke); background:#fff }
.footer-inner{ width:min(94%, var(--max)); margin:0 auto; padding:18px 0; display:flex; align-items:center; justify-content:space-between }
.mini{ color:#64748b; font-size:14px }

@media (max-width:640px){
  .btn.primary.big{ font-size:16px }
  .tagline.big{ font-size: clamp(28px, 8vw, 40px) }
}

/* About Card */
.about-card{
  display:grid; gap:24px; grid-template-columns: 0.85fr 1.15fr;
  align-items:center;
  border:1px solid var(--stroke); border-radius:16px; background:#fff; box-shadow: var(--shadow);
  padding:22px;
}
@media (max-width: 860px){ .about-card{ grid-template-columns:1fr } }
.about-photo{ border-radius:16px; overflow:hidden }
.about-photo img{ width:100%; height:100%; object-fit:cover; display:block }
.about-copy p{ max-width: 70ch }
.about-contacts{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px }

/* Three.js canvas behind hero content */
.hero-bg{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:.85;
}
.hero-innovative .flare{ display:none } /* remove old flare when 3D bg active */
.hero.hero-center > *{ position:relative; z-index:1 }

/* Portfolio: stronger pop + overlay reveal */
.box.pop{ transform: translateY(0) scale(1); }
.box.pop:hover{ transform: translateY(-8px) scale(1.015); }
.box.pop .box-overlay{ transition: opacity .25s ease, transform .25s ease; opacity:.85; }
.box.pop:hover .box-overlay{ opacity:1; transform: translateY(-2px); }

/* Overlay long description line, hidden until hover */
.box-overlay{ display:flex; flex-direction:column; gap:4px }
.box-desc{ display:none; font-size:13px; opacity:.95; margin-top:6px }
.box.pop:hover .box-desc{ display:block }

/* About parallax gradient */
.about-parallax{
  position:relative;
  height:120px;
  margin:-10px 0 12px 0;
  border-radius:16px;
  background:
    radial-gradient(600px 120px at 50% 0%, rgba(39,76,119,.35), rgba(139,92,246,.28), transparent 70%);
  transform: translate3d(0,0,0);
  transition: transform 900ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

/* Typography override */
body{font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial}
h1,h2,h3,.brand,.tagline{font-family:'Sora','Inter',system-ui,sans-serif}

/* Blue/black/white layered background */
body{
  background-color: var(--bg);
  background-image:
    url('../img/bg-grid.svg'),
    radial-gradient(1000px 600px at 50% -10%, rgba(127,183,255,.15), rgba(42,79,127,.10), transparent 70%);
}

/* Hero centering + spacing */
.hero.hero-center{ min-height:100vh; padding-top:10vh; padding-bottom:12vh; }
.kicker{ background: var(--accent); color: var(--accent-ink); }
.btn.primary{ background: var(--accent); color: var(--accent-ink); border-color:#5e9ce0 }
.btn.primary.big{ font-weight:700 }

/* Magnetic CTA micro-interaction */
.btn.primary.big{ position:relative; overflow:hidden; }
.btn.primary.big::after{
  content:''; position:absolute; inset:-40%; background: radial-gradient(300px 300px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.35), transparent 60%);
  opacity:.0; transition:opacity .2s ease;
}
.btn.primary.big:hover::after{ opacity:.25 }

.hero-innovative::before{
  content:''; position:absolute; inset:0; background:url('../img/bg-blob.svg') center/cover no-repeat;
  opacity:.45; mix-blend:screen; pointer-events:none; filter:saturate(120%);
}

/* Alt theme toggled on html.theme-alt */
html.theme-alt{
  --bg:#0c1020;
  --ink:#ffffff;
  --muted:#b8c4d9;
  --accent:#9cd1ff;
  --accent-ink:#0a1322;
  --card:#0f1628;
  --stroke:#24304a;
}


/* Strong hero centering */
.hero.hero-center{
  display:grid;
  place-items:center;
  text-align:center;
  min-height:100vh;
  padding:0;
}
.hero-inner{ max-width: min(92vw, var(--max)); margin: 0 auto; }
.hero .kicker-row{ display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap }
.kicker{ background: var(--accent); color: var(--accent-ink); }

/* Name + headshot chip next to "Digital Marketer" */
.name-chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 12px; border:1px solid var(--stroke); border-radius:999px;
  background:rgba(255,255,255,0.03);
  backdrop-filter: blur(6px);
}
.name-chip img{ width:26px; height:26px; border-radius:999px; object-fit:cover; }

/* Tagline larger and balanced */
.tagline.big{ font-size: clamp(28px, 4.2vw, 56px); line-height:1.12; margin: 12px 0 16px; color: var(--ink) }
.kicker{ font-weight:700 }
.subtle{ color: var(--muted) }

/* CTA button combust effect */
.btn.primary.big{ position:relative; overflow:visible }
@keyframes combustFade{ to{ transform:scale(1.15); opacity:0 } }
.particle{ position: fixed; width:6px; height:6px; border-radius:50%; pointer-events:none; z-index:9999;
  background: var(--accent); box-shadow:0 0 10px rgba(96,165,250,.8);
  animation: combustFade .6s ease forwards;
}

/* Background mode toggle */
.bg-mode{
  position: fixed; right: 14px; bottom: 14px; z-index: 30;
  display:flex; gap:6px; padding:6px; border:1px solid var(--stroke);
  border-radius:12px; background: rgba(10,16,28,.6); color:var(--muted);
}
.bg-mode button{ background: transparent; color: var(--ink); border:1px solid var(--stroke); border-radius:8px; padding:4px 8px; cursor:pointer }
.bg-mode button.active{ background: var(--accent); color: var(--accent-ink); border-color: transparent }

/* Ensure hero layers on top of canvases */
.hero.hero-center > *{ position:relative; z-index:2 }


/* SIZE TUNE */
.tagline.big{ font-size: clamp(32px, 5.2vw, 64px); }
.kicker{ font-size: clamp(14px, 1.6vw, 18px); padding: 6px 10px; }
.contact-row .chip, .contact-row .btn{ font-size: clamp(13px, 1.4vw, 16px); }
.hero-inner{ padding: 20px; }


/* Contrast fixes for chips */
.chip, .btn{ color: var(--ink); }
.chip.accent, .btn.primary{ background: var(--accent); color: #0a1020; border-color: transparent; }
.chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--stroke); border-radius:999px; background: rgba(255,255,255,0.03) }
.contact-row .chip, .contact-row .btn{ margin: 4px }
.chip svg{ width:16px; height:16px }


/* === Animated Geometric Background (CSS-only) === */
html {
  --s: 120px;
  --c1: #0b1220;  /* deep navy */
  --c2: #2a61c9;  /* tuned accent blue */
  --_s: calc(2*var(--s)) calc(2*var(--s));
  --_g: var(--_s) conic-gradient(at 40% 40%, #0000 75%, var(--c1) 0);
  --_p: var(--_s) conic-gradient(at 20% 20%, #0000 75%, var(--c2) 0);
  background:
    calc(.9*var(--s)) calc(.9*var(--s))/var(--_p),
    calc(-.1*var(--s)) calc(-.1*var(--s))/var(--_p),
    calc(.7*var(--s)) calc(.7*var(--s))/var(--_g),
    calc(-.3*var(--s)) calc(-.3*var(--s))/var(--_g),
    conic-gradient(from 90deg at 20% 20%, var(--c2) 25%, var(--c1) 0)
    0 0/var(--s) var(--s);
  animation: backgroundMove 10s infinite linear;
  background-attachment: fixed;
  background-size: var(--_s);
}
@keyframes backgroundMove {
  0% { background-position:
      calc(.9*var(--s)) calc(.9*var(--s)),
      calc(-.1*var(--s)) calc(-.1*var(--s)),
      calc(.7*var(--s)) calc(.7*var(--s)),
      calc(-.3*var(--s)) calc(-.3*var(--s)), 0 0; }
  100% { background-position:
      calc(2.9*var(--s)) calc(-1.1*var(--s)),
      calc(-2.1*var(--s)) calc(1.9*var(--s)),
      calc(2.7*var(--s)) calc(-1.3*var(--s)),
      calc(-2.3*var(--s)) calc(1.7*var(--s)), 0 0; }
}
/* Content readability layer */
body { background-color: rgba(11,18,32,0.80); backdrop-filter: blur(3px); }


/* High-contrast content panels */
.section, .wrap, .card, .box {
  color: var(--ink);
}
.about-bio, .content-panel {
  background: rgba(3,8,20,0.55);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: clamp(14px, 2vw, 24px);
}
.about-bio p { color: var(--ink); }
a, .link { color: var(--accent); }
.chip.accent, .btn.primary { background: var(--accent); color: #0a1020; border-color: transparent; }


/* === Hero avatar + full name === */
.hero-avatar { display:grid; place-items:center; gap:10px; margin-bottom:12px; }
.hero-avatar img { width:88px; height:88px; border-radius:999px; object-fit:cover; border:2px solid var(--ink); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.hero-name { font-size: clamp(18px, 2vw, 22px); font-weight:700; letter-spacing:.02em; color: var(--ink); }

/* Center CTA only */
.cta-row { display:flex; align-items:center; justify-content:center; gap:0; margin-top:16px; }
.btn.primary.big { padding:12px 22px; }

/* Blue bubble chips with black text */
.chips-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; margin-top:14px; }
.chip.bubble { background: var(--accent); color:#0a0a0a; border-color: transparent; box-shadow: 0 6px 24px rgba(96,165,250,.28); }
.chip.bubble a { color:#0a0a0a; text-decoration:none; }
.chip.bubble:hover { transform: translateY(-1px); }

/* About bio readability: light card + black text */
.about-bio, .content-panel { background: rgba(255,255,255,.92) !important; color:#0d0d0d !important; }
.about-bio p, .about-bio li { color:#0d0d0d !important; }
.about-bio h1, .about-bio h2, .about-bio h3 { color:#0d0d0d !important; }

/* Fix tagline spelling area spacing */
.tagline.big { margin-top:6px; }

/* Typewriter caret */
.typer::after{
  content:"";
  display:inline-block;
  width:1px;
  height:1em;
  background: currentColor;
  margin-left:2px;
  animation: caretBlink 1s step-end infinite;
  vertical-align:-2px;
}
@keyframes caretBlink { 50% { opacity: 0; } }


/* === Triangle Explosion Overlay (pre-navigation) === */
.explosion-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  display: grid;
  place-items: center;
  perspective: 800px;
}
.explosion-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.explosion-tri {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0; height: 0;
  filter: grayscale(1);
  opacity: 0;
  transform: translate3d(-50%, -50%, -1500px) scale(0) rotate(0deg);
  will-change: transform, opacity;
}
/* Blue bubble chips with black text on Home */
.chip.bubble { background: var(--accent); color: #0a0a0a; border-color: transparent; }
.chip.bubble a { color: #0a0a0a; text-decoration: none; }


/* High-contrast content panel for About */
.about-bio.content-panel{
  background: rgba(255,255,255,0.94);
  color: #0b0b0b;
  border-radius: 18px;
  padding: clamp(16px, 2.6vw, 32px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.18);
  max-width: 900px;
  margin: clamp(16px, 4vw, 40px) auto;
}
.about-bio.content-panel p{ color:#0b0b0b; line-height:1.7; }

/* Chips: blue bubble with black text */
.chip, .chips-row .chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px; border:1px solid transparent;
  background: var(--accent, #3b82f6); color:#0a0a0a;
  box-shadow: 0 6px 24px rgba(96,165,250,.28);
}
.chip a{ color:#0a0a0a; text-decoration:none; }

/* Triangle Loader Overlay */
.tri-loader {
  position: fixed; inset: 0; z-index: 99999; pointer-events: none;
  display: none; /* shown via js */
  background: radial-gradient(circle at center, white 0%, #222 10%, #000 60%);
  overflow: hidden;
  perspective: 800px;
}
.tri-loader.show { display:block; }
.tri { position:absolute; top:50%; left:50%; width:0; height:0; filter:grayscale(1); opacity:0; }



/* -- About readability (no white panel) -- */
.about-bio{
  background: transparent !important;
  box-shadow: none !important;
  color: #e8edf7 !important;
}
.about-bio p{ color:#e8edf7 !important; }

/* -- Pop-out words effect -- */
.pop-words .word {
  display:inline-block;
  opacity:0;
  transform: translateY(8px) scale(0.96);
  filter: blur(4px);
  will-change: transform, opacity, filter;
}
.pop-words .word.pop-in {
  animation: popWord 700ms cubic-bezier(.2,.9,.2,1) forwards;
}
@keyframes popWord {
  0% { opacity:0; transform: translateY(12px) scale(0.94); filter: blur(6px); }
  60%{ opacity:1; transform: translateY(-2px) scale(1.04); filter: blur(0px); }
  100%{ opacity:1; transform: translateY(0) scale(1); }
}