/* ============================================================
   SHARED CSS v2 — Mahadi Hasan Tusher Portfolio
   Enhanced: 3-Mode Theme · Preloader · Premium Animations
   ============================================================ */

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

/* ── DARK THEME (default) ────────────────────────────────── */
:root, [data-theme="dark"] {
  --bg:        #020810;
  --bg2:       #050d1a;
  --bg3:       #071224;
  --neon:      #00ff88;
  --neon2:     #00d4ff;
  --neon3:     #7b2fff;
  --accent:    #ff3e6c;
  --text:      #c8e6ff;
  --dim:       #4a6a8a;
  --border:    rgba(0,255,136,0.12);
  --glass:     rgba(0,18,45,0.55);
  --card-bg:   rgba(5,13,26,0.7);
  --input-bg:  rgba(2,8,16,0.7);
  --nav-bg:    rgba(2,8,16,0.92);
  --shadow:    rgba(0,0,0,0.5);
  --scanline:  rgba(0,0,0,0.04);
  --title-col: #ffffff;
  --glow-g: 0 0 20px rgba(0,255,136,0.4),0 0 60px rgba(0,255,136,0.1);
  --glow-b: 0 0 20px rgba(0,212,255,0.4),0 0 60px rgba(0,212,255,0.1);
  color-scheme: dark;
}

/* ── LIGHT THEME ─────────────────────────────────────────── */
[data-theme="light"] {
  --bg:        #f0f4f8;
  --bg2:       #e2eaf4;
  --bg3:       #d8e4f0;
  --neon:      #007a44;
  --neon2:     #0077bb;
  --neon3:     #5500cc;
  --accent:    #cc0044;
  --text:      #0f1e2e;
  --dim:       #4a6a8a;
  --border:    rgba(0,122,68,0.18);
  --glass:     rgba(255,255,255,0.7);
  --card-bg:   rgba(255,255,255,0.85);
  --input-bg:  rgba(255,255,255,0.95);
  --nav-bg:    rgba(240,244,248,0.95);
  --shadow:    rgba(0,40,80,0.12);
  --scanline:  transparent;
  --title-col: #0a1828;
  --glow-g: 0 4px 20px rgba(0,122,68,0.18);
  --glow-b: 0 4px 20px rgba(0,119,187,0.18);
  color-scheme: light;
}

/* ── BASE ────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}

body {
  background: var(--bg); color: var(--text);
  font-family:'Exo 2',sans-serif;
  overflow-x:hidden; cursor:none; min-height:100vh;
  transition: background .45s ease, color .45s ease;
}

/* ── PRELOADER ───────────────────────────────────────────── */
#preloader {
  position:fixed;inset:0;z-index:999999;background:#020810;
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:28px;
  transition: opacity .55s ease, transform .55s ease;
}
#preloader.hide { opacity:0; transform:scale(1.03); pointer-events:none; }

.pl-logo {
  font-family:'Orbitron',sans-serif;font-size:30px;font-weight:900;
  color:#00ff88;letter-spacing:5px;
  animation:plGlow 1.6s ease-in-out infinite alternate;
}
@keyframes plGlow {
  from{text-shadow:0 0 20px rgba(0,255,136,0.4)}
  to  {text-shadow:0 0 50px rgba(0,255,136,0.9),0 0 100px rgba(0,255,136,0.25)}
}

.pl-binary {
  width:340px;height:60px;overflow:hidden;
  font-family:'Share Tech Mono',monospace;font-size:11px;
  color:rgba(0,255,136,0.25);letter-spacing:3px;line-height:1.6;
}
.pl-binary-row { white-space:nowrap; }

.pl-bar-wrap { width:260px; }
.pl-bar-track { height:2px;background:rgba(0,255,136,0.08);border-radius:1px;overflow:hidden; }
.pl-bar-fill {
  height:100%;width:0;background:linear-gradient(90deg,#00ff88,#00d4ff);
  box-shadow:0 0 12px #00ff88;
  animation:plLoad 2.5s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes plLoad{0%{width:0}25%{width:40%}70%{width:75%}100%{width:100%}}

.pl-status {
  font-family:'Share Tech Mono',monospace;font-size:11px;
  color:rgba(0,255,136,0.55);letter-spacing:3px;
  animation:plBlink .9s step-end infinite;
}
@keyframes plBlink{50%{opacity:.15}}

/* ── PAGE TRANSITION ─────────────────────────────────────── */
#page-transition {
  position:fixed;inset:0;z-index:99999;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;transition:opacity .35s ease;
}
#page-transition.active{opacity:1;pointer-events:all}
.pt-inner {
  font-family:'Share Tech Mono',monospace;font-size:12px;color:var(--neon);
  letter-spacing:3px;display:flex;flex-direction:column;align-items:center;gap:14px;
}
.pt-bar{width:200px;height:1px;background:rgba(0,255,136,0.1);overflow:hidden}
.pt-fill{
  height:100%;width:0;background:var(--neon);box-shadow:0 0 8px var(--neon);
  animation:ptFill .45s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes ptFill{to{width:100%}}

/* ── CURSOR ──────────────────────────────────────────────── */
.cursor {
  position:fixed;width:10px;height:10px;background:var(--neon);border-radius:50%;
  pointer-events:none;z-index:9998;transform:translate(-50%,-50%);
  box-shadow:0 0 12px var(--neon),0 0 28px rgba(0,255,136,.25);
  transition:width .2s,height .2s,background .2s;
}
.cursor.hovering{width:24px;height:24px;background:transparent;border:1.5px solid var(--neon)}
.cursor-ring {
  position:fixed;width:36px;height:36px;
  border:1px solid rgba(0,255,136,.3);border-radius:50%;
  pointer-events:none;z-index:9997;transform:translate(-50%,-50%);
  transition:all .12s ease;
}
[data-theme="light"] .cursor{box-shadow:0 0 10px var(--neon)}
[data-theme="light"] .cursor-ring{border-color:rgba(0,122,68,.22)}

/* ── SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--neon),var(--neon2));border-radius:2px}

/* ── NAVBAR ──────────────────────────────────────────────── */
.navbar {
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 48px;height:68px;
  background:var(--nav-bg);
  backdrop-filter:blur(24px) saturate(1.8);
  border-bottom:1px solid var(--border);
  transition:background .45s,border-color .45s;
}
.nav-logo {
  font-family:'Share Tech Mono',monospace;font-size:15px;color:var(--neon);
  letter-spacing:3px;text-decoration:none;display:flex;align-items:center;gap:10px;
  transition:color .3s;
}
.nav-logo .bracket{color:var(--dim);transition:color .3s}
.nav-pulse{width:6px;height:6px;background:var(--neon);border-radius:50%;animation:pulse 2s infinite;flex-shrink:0}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,255,136,.7)}60%{box-shadow:0 0 0 8px rgba(0,255,136,0)}}

.nav-links{display:flex;list-style:none;gap:2px}
.nav-links a {
  font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:600;
  color:var(--dim);text-decoration:none;letter-spacing:1.5px;
  text-transform:uppercase;padding:8px 13px;border-radius:2px;
  position:relative;transition:color .3s,background .3s;
  display:flex;align-items:center;gap:5px;
}
.nav-links a .nav-num{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--neon);opacity:0;transition:opacity .3s}
.nav-links a:hover .nav-num,.nav-links a.active .nav-num{opacity:1}
.nav-links a:hover{color:var(--text);background:rgba(0,255,136,.05)}
.nav-links a.active{color:var(--neon);background:rgba(0,255,136,.08)}
.nav-links a.active::after{
  content:'';position:absolute;bottom:0;left:13px;right:13px;
  height:2px;background:var(--neon);border-radius:1px;box-shadow:0 0 8px var(--neon);
}

.nav-right{display:flex;align-items:center;gap:12px}
.nav-status{font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--neon);display:flex;align-items:center;gap:7px}

/* THEME TOGGLE WIDGET */
.theme-toggle {
  display:flex;align-items:center;gap:2px;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:20px;padding:3px;transition:background .45s,border-color .45s;
}
.tt-btn {
  width:28px;height:28px;border-radius:50%;border:none;
  background:transparent;cursor:none;display:flex;align-items:center;
  justify-content:center;font-size:13px;transition:all .3s;
  position:relative;
}
.tt-btn.active{background:var(--neon);box-shadow:0 0 10px rgba(0,255,136,.4)}
.tt-btn:hover:not(.active){background:rgba(0,255,136,.08)}
.tt-tip {
  position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);
  font-family:'Share Tech Mono',monospace;font-size:9px;color:var(--neon);
  white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none;
  background:var(--bg2);padding:2px 6px;border-radius:2px;border:1px solid var(--border);
}
.tt-btn:hover .tt-tip{opacity:1}

.nav-hire {
  padding:7px 18px;background:rgba(0,255,136,.1);
  border:1px solid rgba(0,255,136,.3);color:var(--neon);
  font-family:'Rajdhani',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;text-decoration:none;
  border-radius:2px;transition:all .3s;cursor:none;
}
.nav-hire:hover{background:var(--neon);color:#000;box-shadow:var(--glow-g)}

.nav-toggle{display:none;flex-direction:column;gap:5px;cursor:none;padding:4px;background:none;border:none}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--neon);transition:all .3s;border-radius:1px}
.nav-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ── LAYOUT ──────────────────────────────────────────────── */
.page-wrap{padding-top:68px}
.container{max-width:1200px;margin:0 auto;padding:0 48px}
section{padding:100px 0}

.section-tag {
  font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--neon);
  letter-spacing:4px;text-transform:uppercase;margin-bottom:14px;
  display:flex;align-items:center;gap:14px;
}
.section-tag::before{content:'';width:36px;height:1px;background:linear-gradient(90deg,var(--neon),transparent)}
.section-title {
  font-family:'Orbitron',sans-serif;font-size:clamp(28px,4vw,50px);
  font-weight:700;letter-spacing:-1px;color:var(--title-col);line-height:1.1;
  transition:color .4s;
}
.section-title .hl{color:var(--neon)}
.section-header{margin-bottom:64px}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn-primary {
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 36px;background:var(--neon);color:#000;
  font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:2.5px;text-transform:uppercase;text-decoration:none;
  border:none;border-radius:2px;cursor:none;
  position:relative;overflow:hidden;transition:all .3s;box-shadow:var(--glow-g);
}
.btn-primary::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:translateX(-100%);transition:transform .6s;
}
.btn-primary:hover::before{transform:translateX(100%)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 0 40px rgba(0,255,136,.5)}
.btn-primary:active{transform:translateY(-1px) scale(.98)}

.btn-ghost {
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 36px;background:transparent;color:var(--neon2);
  font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:2.5px;text-transform:uppercase;text-decoration:none;
  border:1px solid rgba(0,212,255,.4);border-radius:2px;cursor:none;transition:all .3s;
}
.btn-ghost:hover{background:rgba(0,212,255,.08);box-shadow:var(--glow-b);transform:translateY(-3px)}

/* ── REVEAL ANIMATIONS ───────────────────────────────────── */
.reveal {
  opacity:0;transform:translateY(28px);
  transition:opacity .75s cubic-bezier(.4,0,.2,1),transform .75s cubic-bezier(.4,0,.2,1);
}
.reveal.from-left  {transform:translateX(-30px)}
.reveal.from-right {transform:translateX(30px)}
.reveal.scale-in   {transform:scale(.93)}
.reveal.visible    {opacity:1;transform:none}

/* stagger grid children */
.stagger > * {
  opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .6s ease;
}
.stagger.visible > *:nth-child(1){transition-delay:.04s;opacity:1;transform:none}
.stagger.visible > *:nth-child(2){transition-delay:.11s;opacity:1;transform:none}
.stagger.visible > *:nth-child(3){transition-delay:.18s;opacity:1;transform:none}
.stagger.visible > *:nth-child(4){transition-delay:.25s;opacity:1;transform:none}
.stagger.visible > *:nth-child(5){transition-delay:.32s;opacity:1;transform:none}
.stagger.visible > *:nth-child(6){transition-delay:.39s;opacity:1;transform:none}
.stagger.visible > *:nth-child(n+7){transition-delay:.46s;opacity:1;transform:none}

/* ── GLITCH TEXT ─────────────────────────────────────────── */
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;
}
.glitch::before{
  color:var(--neon2);clip-path:polygon(0 0,100% 0,100% 35%,0 35%);
  animation:g1 4s infinite linear;
}
.glitch::after{
  color:var(--accent);clip-path:polygon(0 65%,100% 65%,100% 100%,0 100%);
  animation:g2 4s infinite linear;
}
@keyframes g1{0%,88%,100%{transform:none;opacity:0}90%{transform:translateX(-3px);opacity:.8}92%{transform:translateX(2px);opacity:0}94%{transform:translateX(-1px);opacity:.5}96%{opacity:0}}
@keyframes g2{0%,89%,100%{transform:none;opacity:0}91%{transform:translateX(3px);opacity:.7}93%{transform:translateX(-2px);opacity:0}95%{transform:translateX(1px);opacity:.4}97%{opacity:0}}

/* ── CERT SLIDER ─────────────────────────────────────────── */
.cert-slider-section{
  padding:56px 0;overflow:hidden;
  background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  transition:background .45s;
}
.cert-slider-label{
  font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--neon);
  letter-spacing:4px;text-align:center;margin-bottom:32px;opacity:.65;
}
.cert-slider-track{
  display:flex;gap:20px;width:max-content;
  animation:sliderScroll 30s linear infinite;
}
.cert-slider-track:hover{animation-play-state:paused}
@keyframes sliderScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.cert-slide {
  width:268px;flex-shrink:0;
  padding:22px 20px;border:1px solid var(--border);
  background:var(--card-bg);backdrop-filter:blur(16px);
  border-radius:4px;cursor:none;transition:all .3s;
  position:relative;overflow:hidden;
}
.cert-slide::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--neon),transparent);
  transform:scaleX(0);transition:transform .4s;
}
.cert-slide:hover{border-color:rgba(0,255,136,.35);transform:translateY(-4px);box-shadow:0 16px 40px var(--shadow)}
.cert-slide:hover::before{transform:scaleX(1)}
.cs-icon{font-size:26px;margin-bottom:10px}
.cs-name{font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;color:var(--title-col);margin-bottom:6px;line-height:1.3;transition:color .3s}
.cs-issuer{font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--neon);margin-bottom:10px}
.cs-status{font-family:'Share Tech Mono',monospace;font-size:10px;padding:3px 10px;border-radius:2px;display:inline-block;letter-spacing:1px}
.cs-status.active {color:#00ff88;border:1px solid rgba(0,255,136,.3);background:rgba(0,255,136,.06)}
.cs-status.planned{color:#7b2fff;border:1px solid rgba(123,47,255,.3);background:rgba(123,47,255,.06)}
.cs-status.goal   {color:#ff3e6c;border:1px solid rgba(255,62,108,.3);background:rgba(255,62,108,.06)}

/* ── CERT MODAL ──────────────────────────────────────────── */
.cert-modal-overlay{
  position:fixed;inset:0;z-index:99990;
  background:rgba(2,8,16,.94);backdrop-filter:blur(14px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .35s ease;
}
.cert-modal-overlay.open{opacity:1;pointer-events:all}
.cert-modal{
  width:min(500px,90vw);background:var(--bg2);
  border:1px solid var(--border);border-radius:8px;padding:40px;
  position:relative;
  transform:scale(.88) translateY(24px);
  transition:transform .38s cubic-bezier(.4,0,.2,1);
}
.cert-modal-overlay.open .cert-modal{transform:scale(1) translateY(0)}
.cm-close{
  position:absolute;top:14px;right:14px;width:32px;height:32px;
  border:1px solid var(--border);background:transparent;color:var(--dim);
  font-size:16px;border-radius:50%;cursor:none;display:flex;
  align-items:center;justify-content:center;transition:all .3s;
}
.cm-close:hover{border-color:var(--accent);color:var(--accent)}
.cm-icon{font-size:48px;margin-bottom:14px;text-align:center}
.cm-title{font-family:'Orbitron',sans-serif;font-size:19px;font-weight:700;color:var(--title-col);margin-bottom:6px;transition:color .3s}
.cm-issuer{font-family:'Share Tech Mono',monospace;font-size:12px;color:var(--neon);margin-bottom:14px}
.cm-desc{font-size:14px;color:var(--dim);line-height:1.75;margin-bottom:22px}
.cm-meta{display:flex;gap:10px;flex-wrap:wrap}
.cm-tag{font-family:'Share Tech Mono',monospace;font-size:11px;padding:4px 11px;border:1px solid var(--border);color:var(--dim);border-radius:2px}

/* ── FOOTER ──────────────────────────────────────────────── */
.site-footer{
  padding:32px 48px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--dim);
  background:var(--bg);transition:background .45s,border-color .45s;
}
.site-footer .hl{color:var(--neon)}
.footer-links{display:flex;gap:24px}
.footer-links a{color:var(--dim);text-decoration:none;transition:color .3s}
.footer-links a:hover{color:var(--neon)}

/* ── SCANLINES ───────────────────────────────────────────── */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9990;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,var(--scanline) 2px,var(--scanline) 4px);
}

/* ── LIGHT MODE OVERRIDES ────────────────────────────────── */
[data-theme="light"] .terminal{background:#e8f0f8 !important;border-color:rgba(0,122,68,.15) !important}
[data-theme="light"] .terminal-header{background:#dce8f4 !important;border-color:rgba(0,122,68,.12) !important}
[data-theme="light"] .terminal-body .cmd{color:var(--text) !important}
[data-theme="light"] body::after{opacity:0}
[data-theme="light"] .name-line1{
  background:linear-gradient(135deg,#0a1828,#1a3a6a);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
[data-theme="light"] .skill-card,[data-theme="light"] .project-card,
[data-theme="light"] .cert-card,[data-theme="light"] .tl-card,
[data-theme="light"] .lesson-card,[data-theme="light"] .comp-row,
[data-theme="light"] .cl-item,[data-theme="light"] .contact-form,
[data-theme="light"] .cert-slide,[data-theme="light"] .roadmap,
[data-theme="light"] .strip-item{background:var(--card-bg) !important;border-color:rgba(0,122,68,.15) !important}
[data-theme="light"] .tool-chip{background:var(--card-bg) !important;border-color:rgba(0,122,68,.15) !important}
[data-theme="light"] .form-input,[data-theme="light"] .form-textarea,[data-theme="light"] .form-select{
  background:var(--input-bg);border-color:rgba(0,122,68,.2);color:var(--text)
}
[data-theme="light"] .nav-links.open{background:rgba(240,244,248,.98)}
[data-theme="light"] .cert-modal-overlay{background:rgba(220,235,248,.92)}
[data-theme="light"] .cert-modal{background:var(--bg2)}
[data-theme="light"] .sh-grid{opacity:.15}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:900px){
  .navbar{padding:0 20px}
  .container{padding:0 20px}
  .nav-links,.nav-hire,.nav-status{display:none}
  .nav-toggle{display:flex}
  .nav-links.open{
    display:flex;flex-direction:column;
    position:absolute;top:68px;left:0;right:0;
    background:var(--nav-bg);backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);padding:12px 0;gap:0;
  }
  .nav-links.open a{padding:13px 20px;border-radius:0}
  .site-footer{padding:20px;flex-direction:column;text-align:center}
}
@media(max-width:480px){
  .btn-primary,.btn-ghost{padding:12px 22px;font-size:12px}
}