/* ============================================================
   Apon — Portfolio | Bootstrap 5 edition
   Green accent, PT Sans / DM Sans pairing, soft rounded cards,
   scroll reveals, plus a light / dark / hacker (terminal-green) theme.
   ============================================================ */

:root{
  --accent:#ff4a02;
  --accent-light:#ff7a3d;
  --accent-rgb:255,74,2;
  --bs-font-sans-serif:'DM Sans',system-ui,sans-serif;
  --page-transition:.5s cubic-bezier(.4,0,.2,1);

  /* zinc neutral scale — matches the original design's palette */
  --zinc-50:#fafafa; --zinc-100:#f4f4f5; --zinc-200:#e4e4e7; --zinc-300:#d4d4d8;
  --zinc-400:#a1a1aa; --zinc-500:#71717a; --zinc-600:#52525b; --zinc-700:#3f3f46;
  --zinc-800:#27272a; --zinc-900:#18181b; --zinc-950:#09090b;
}

/* ---------- Light theme: rebind Bootstrap vars to zinc scale ---------- */
[data-bs-theme="light"]{
  --bs-body-bg:#ffffff;
  --bs-body-color:var(--zinc-900);
  --bs-secondary-color:var(--zinc-500);
  --bs-border-color:var(--zinc-100);
  --bs-tertiary-bg:var(--zinc-50);
  --bs-secondary-bg:var(--zinc-100);
  --bs-dark:var(--zinc-900);
  --bs-dark-rgb:24,24,27;
}

/* ---------- Dark theme: rebind Bootstrap vars to zinc scale ---------- */
[data-bs-theme="dark"]{
  --bs-body-bg:var(--zinc-950);
  --bs-body-color:var(--zinc-100);
  --bs-secondary-color:var(--zinc-400);
  --bs-border-color:var(--zinc-800);
  --bs-tertiary-bg:rgba(24,24,27,.4);
  --bs-secondary-bg:var(--zinc-900);
  --bs-dark:var(--zinc-800);
  --bs-dark-rgb:39,39,42;
  color-scheme:dark;
}

html{scroll-behavior:smooth;scroll-padding-top:80px;}
body{font-family:'DM Sans',sans-serif;position:relative;transition:background-color .3s,color .3s;}
h1,h2,h3,h4,h5,h6,.font-display{font-family:'PT Sans',sans-serif;}

/* subtle noise overlay, matches original texture */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:99px;}

/* ---------- Utility color classes ---------- */
.text-accent{color:var(--accent)!important;}
.bg-accent{background-color:var(--accent)!important;}
.border-accent{border-color:var(--accent)!important;}
.bg-accent-soft{background-color:rgba(var(--accent-rgb),.1)!important;}
[data-bs-theme="light"] .bg-accent-soft, .bg-accent-soft{background-color:rgba(var(--accent-rgb),.08);}
[data-bs-theme="dark"] .bg-accent-soft{background-color:rgba(var(--accent-rgb),.16)!important;}

/* ---------- Buttons ---------- */
.btn-accent{
  background-color:var(--accent);border-color:var(--accent);color:#fff;
  position:relative;overflow:hidden;border-radius:50rem;font-weight:500;
}
.btn-accent:hover,.btn-accent:focus{background-color:var(--accent-light);border-color:var(--accent-light);color:#fff;}
.btn-accent::after{
  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:rgba(255,255,255,.18);transform:skewX(-20deg);transition:left .4s cubic-bezier(.4,0,.2,1);
}
.btn-accent:hover::after{left:160%;}

.btn-outline-soft{border-radius:50rem;font-weight:500;}

/* ---------- Navbar ---------- */
.site-navbar{transition:background-color .3s,box-shadow .3s,backdrop-filter .3s;background:transparent;}
.site-navbar.scrolled{
  background-color:rgba(255,255,255,.9);backdrop-filter:blur(10px);box-shadow:0 1px 2px rgba(0,0,0,.05);
}
[data-bs-theme="dark"] .site-navbar.scrolled{background-color:rgba(9,9,11,.9);}

/* Mobile dropdown menu needs its own solid surface — without this the
   expanded nav has no background and floats transparently over the
   hero content underneath it, making both unreadable. */
@media (max-width:767.98px){
  .site-navbar .navbar-collapse{
    background-color:var(--bs-body-bg);
    border:1px solid var(--bs-border-color);
    border-radius:16px;
    margin-top:.75rem;
    padding:1.25rem 1rem 1.5rem;
    box-shadow:0 20px 40px -16px rgba(0,0,0,.18);
    animation:navbar-collapse-in .28s cubic-bezier(.4,0,.2,1);
  }
  html.theme-hacker .site-navbar .navbar-collapse{
    background-color:#050a05;border-color:rgba(57,255,20,.3);box-shadow:0 0 30px rgba(57,255,20,.1);
  }
}
@keyframes navbar-collapse-in{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}

.nav-link-u{position:relative;font-weight:500;}
.nav-link-u::after{
  content:'';position:absolute;bottom:-2px;left:0;width:0;height:1.5px;background:currentColor;
  transition:width .22s cubic-bezier(.4,0,.2,1);
}
.nav-link-u:hover::after,.nav-link-u.active::after{width:100%;}
.nav-link-u.active{color:var(--accent)!important;}

/* ---------- Photo frame ---------- */
.pf{overflow:hidden;background:#d4d4d8;}
.pf img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---------- Cards ---------- */
.card-lift{transition:transform .28s cubic-bezier(.4,0,.2,1),border-color .18s;}
.card-lift:hover{transform:translateY(-4px);border-color:var(--accent)!important;}

.tag-pill{
  font-size:.75rem;padding:.3rem .75rem;border-radius:50rem;display:inline-block;
  border:1px solid var(--bs-border-color);
}
.tag-pill.accent{color:var(--accent);border-color:rgba(var(--accent-rgb),.3);background:rgba(var(--accent-rgb),.08);}

.skill-tag{
  font-size:.875rem;padding:.4rem .9rem;border-radius:50rem;border:1px solid var(--bs-border-color);
  transition:border-color .18s;background:var(--bs-body-bg);
}
.skill-tag:hover{border-color:var(--accent);}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;}
.reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;}
.reveal.d4{transition-delay:.32s;}

/* ---------- Hero blobs ---------- */
.blob{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0;}

/* ---------- Reading progress bar ---------- */
.progress-bar-fixed{position:fixed;top:0;left:0;height:3px;background:var(--accent);z-index:1051;transition:width .1s linear;}

/* ---------- Prose (article / case-study body copy) ---------- */
.prose h2{font-family:'PT Sans',sans-serif;font-size:1.55rem;font-weight:700;margin:2.5rem 0 1rem;line-height:1.25;}
.prose h3{font-family:'PT Sans',sans-serif;font-size:1.15rem;font-weight:700;margin:2rem 0 .65rem;line-height:1.3;color:var(--accent);}
.prose p{margin:0 0 1.4rem;line-height:1.8;}
.prose ul{margin:0 0 1.4rem 1.4rem;}
.prose li{margin-bottom:.45rem;line-height:1.7;}
.prose pre{background:#18181b;color:#e4e4e7;border-radius:12px;padding:1.25rem 1.5rem;overflow-x:auto;font-size:.85rem;line-height:1.7;margin:0 0 1.6rem;}
.prose code:not(pre code){background:rgba(var(--accent-rgb),.1);color:var(--accent);padding:.15em .45em;border-radius:4px;font-size:.875em;}
.prose blockquote{border-left:3px solid var(--accent);padding:.9rem 1.3rem;margin:0 0 1.7rem;background:rgba(var(--accent-rgb),.06);border-radius:0 10px 10px 0;}
.prose blockquote p{font-style:italic;margin:0;opacity:.85;}
.prose hr{border:none;border-top:1px solid var(--bs-border-color);margin:2.5rem 0;}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}

.stat-card{border-left:3px solid var(--accent);}
.step-badge{
  width:2rem;height:2rem;min-width:2rem;border-radius:50%;background:var(--accent);color:#fff;
  font-family:'PT Sans',sans-serif;font-weight:700;font-size:.85rem;
  display:flex;align-items:center;justify-content:center;
}

/* ---------- Filter buttons (projects page) ---------- */
.filter-btn{
  font-size:.875rem;padding:.4rem 1rem;border-radius:50rem;border:1px solid var(--bs-border-color);
  background:var(--bs-body-bg);color:var(--bs-secondary-color);transition:.18s;
}
.filter-btn:hover{border-color:var(--accent);}
.filter-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;}

/* Muted / lead text tuned to match original zinc tones */
.text-muted-soft{color:var(--bs-secondary-color);}

/* ============================================================
   ANIMATIONS — typing, count-up, marquee, glitch
   ============================================================ */

/* Typed hero role text */
.typed-cursor{
  display:inline-block;width:2px;margin-left:2px;background:var(--accent);
  animation:blink-caret .8s step-end infinite;vertical-align:baseline;
}
@keyframes blink-caret{0%,100%{opacity:1;}50%{opacity:0;}}

/* Glitch hover (available in every theme, intensifies in hacker theme) */
@keyframes glitch-shift{
  0%,100%{transform:translate(0,0);}
  20%{transform:translate(-2px,1px);}
  40%{transform:translate(2px,-1px);}
  60%{transform:translate(-1px,-1px);}
  80%{transform:translate(1px,1px);}
}
.glitch-hover{position:relative;display:inline-block;cursor:default;}
.glitch-hover:hover{animation:glitch-shift .25s linear 2;}
.glitch-hover:hover::before,.glitch-hover:hover::after{
  content:attr(data-text);position:absolute;top:0;left:0;width:100%;overflow:hidden;
}
.glitch-hover:hover::before{color:#0f2f1a;clip-path:inset(0 0 55% 0);transform:translate(-2px,-1px);opacity:.8;}
.glitch-hover:hover::after{color:#4ade80;clip-path:inset(55% 0 0 0);transform:translate(2px,1px);opacity:.8;}

/* Count-up numbers get a tiny pop when they finish */
@keyframes count-pop{0%{transform:scale(1);}50%{transform:scale(1.08);}100%{transform:scale(1);}}
.count-done{animation:count-pop .3s ease-out;}

/* Marquee ticker (tech stack) */
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:flex;width:max-content;gap:3rem;animation:marquee-scroll 22s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.marquee-item{display:flex;align-items:center;gap:.6rem;font-family:'PT Sans',sans-serif;font-weight:700;font-size:1.1rem;color:var(--bs-secondary-color);opacity:.7;white-space:nowrap;}
.marquee-item i{color:var(--accent);font-size:1.3rem;}

/* Floating / idle bob for hero photo badge */
@keyframes float-y{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.float-badge{animation:float-y 3.2s ease-in-out infinite;}

/* Spin-in for stat icons / rotating accents */
@keyframes spin-slow{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.spin-slow{animation:spin-slow 12s linear infinite;}

/* ============================================================
   NEW CONTENT COMPONENTS — timeline, testimonials, terminal, FAQ
   ============================================================ */

/* Timeline */
.timeline{position:relative;padding-left:2.25rem;}
.timeline::before{content:'';position:absolute;left:.4rem;top:.35rem;bottom:.35rem;width:2px;background:var(--bs-border-color);}
.timeline-item{position:relative;padding-bottom:2.75rem;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-dot{
  position:absolute;left:-2.25rem;top:.2rem;width:1rem;height:1rem;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 5px rgba(var(--accent-rgb),.15);
}
.timeline-year{font-family:'PT Sans',sans-serif;font-weight:700;color:var(--accent);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;}

/* Testimonials */
.quote-mark{font-family:'PT Sans',sans-serif;font-size:3rem;line-height:1;color:var(--accent);opacity:.35;}
.avatar-circle{
  width:2.75rem;height:2.75rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(var(--accent-rgb),.12);color:var(--accent);font-family:'PT Sans',sans-serif;font-weight:700;
  flex-shrink:0;
}

/* Terminal window (used for skills widget + hacker theme flourishes) */
.terminal-window{
  background:#0d1117;border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.4);font-family:'JetBrains Mono',monospace;
}
.terminal-titlebar{background:#161b22;padding:.65rem 1rem;display:flex;align-items:center;gap:.4rem;}
.terminal-dot{width:.7rem;height:.7rem;border-radius:50%;display:inline-block;}
.terminal-dot.red{background:#ff5f57;}
.terminal-dot.yellow{background:#febc2e;}
.terminal-dot.green{background:#28c840;}
.terminal-titlebar-label{margin-left:auto;font-size:.75rem;color:#8b949e;font-family:'JetBrains Mono',monospace;}
.terminal-body{padding:1.4rem 1.5rem;color:#c9d1d9;font-size:.875rem;line-height:2;}
.terminal-body .t-prompt{color:#3fb950;}
.terminal-body .t-path{color:#58a6ff;}
.terminal-body .t-comment{color:#8b949e;}
.terminal-body .t-out{color:#e6edf3;}
.terminal-body .t-accent{color:var(--accent);}

/* FAQ accordion theming */
.faq-accordion .accordion-item{background:transparent;border:1px solid var(--bs-border-color);border-radius:12px!important;margin-bottom:1rem;overflow:hidden;}
.faq-accordion .accordion-button{background:transparent;color:var(--bs-body-color);font-family:'PT Sans',sans-serif;font-weight:700;box-shadow:none!important;}
.faq-accordion .accordion-button:not(.collapsed){color:var(--accent);background:rgba(var(--accent-rgb),.06);}
.faq-accordion .accordion-button::after{filter:none;}
.faq-accordion .accordion-body{color:var(--bs-secondary-color);}

/* ============================================================
   HACKER THEME — terminal green-on-black, matrix rain, CRT scanlines
   ============================================================ */

#matrixRain{
  position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  opacity:0;transition:opacity .6s ease;
}
.crt-overlay{
  position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0px,rgba(0,0,0,.25) 1px,transparent 1px,transparent 3px);
  mix-blend-mode:overlay;
}

html.theme-hacker{
  --accent:#39ff14; --accent-light:#8dffb0; --accent-rgb:57,255,20;
}
html.theme-hacker #matrixRain{opacity:.16;}
html.theme-hacker .crt-overlay{opacity:.6;}
html.theme-hacker body{
  /* font-family:'JetBrains Mono',monospace; */
  background:#040604;
  color:#39ff14;
}
html.theme-hacker body::before{display:none;}
html.theme-hacker h1,html.theme-hacker h2,html.theme-hacker h3,html.theme-hacker h4,
html.theme-hacker .font-display,html.theme-hacker .navbar-brand{
  font-family:'JetBrains Mono',monospace;
  text-shadow:0 0 12px rgba(57,255,20,.35);
}
html.theme-hacker .site-navbar.scrolled{
  background-color:rgba(2,8,2,.92)!important;border-bottom:1px solid rgba(57,255,20,.25);backdrop-filter:blur(8px);
}
html.theme-hacker .bg-body,html.theme-hacker .bg-body-tertiary{background:#070d07!important;}
html.theme-hacker .border,html.theme-hacker .border-top{border-color:rgba(57,255,20,.22)!important;}
html.theme-hacker .card-lift{border-color:rgba(57,255,20,.2)!important;}
html.theme-hacker .card-lift:hover{border-color:#39ff14!important;box-shadow:0 0 28px rgba(57,255,20,.18);}
html.theme-hacker .text-muted-soft,html.theme-hacker .text-white-50{color:#5fbf6b!important;}
html.theme-hacker .bg-accent-soft{background-color:rgba(57,255,20,.1)!important;}
html.theme-hacker .tag-pill{border-color:rgba(57,255,20,.3);}
html.theme-hacker .tag-pill.accent{color:#39ff14;border-color:rgba(57,255,20,.4);background:rgba(57,255,20,.08);}
html.theme-hacker .skill-tag{border-color:rgba(57,255,20,.25);font-family:'JetBrains Mono',monospace;}
html.theme-hacker .skill-tag:hover{border-color:#39ff14;box-shadow:0 0 10px rgba(57,255,20,.3);}
html.theme-hacker .btn-accent{background-color:#39ff14;border-color:#39ff14;color:#031403;font-weight:700;box-shadow:0 0 18px rgba(57,255,20,.35);}
html.theme-hacker .btn-accent:hover{background-color:#8dffb0;border-color:#8dffb0;}
html.theme-hacker .btn-outline-secondary{border-color:rgba(57,255,20,.4);color:#39ff14;}
html.theme-hacker .btn-outline-secondary:hover{background:rgba(57,255,20,.1);color:#39ff14;}
html.theme-hacker .btn-dark{background:#0a120a;border-color:rgba(57,255,20,.4);}
html.theme-hacker .bg-dark{background:#050a05!important;border:1px solid rgba(57,255,20,.2);}
html.theme-hacker .nav-link-u.active{color:#39ff14!important;}
html.theme-hacker .terminal-window{border-color:rgba(57,255,20,.35);box-shadow:0 0 40px rgba(57,255,20,.1);}
html.theme-hacker .terminal-body{color:#39ff14;}
html.theme-hacker .terminal-body .t-out{color:#c9ffcf;}
html.theme-hacker .terminal-body .t-path{color:#8dffb0;}
html.theme-hacker .prose pre{background:#050a05;border:1px solid rgba(57,255,20,.25);color:#39ff14;}
html.theme-hacker .prose code:not(pre code){background:rgba(57,255,20,.1);color:#39ff14;}
html.theme-hacker .faq-accordion .accordion-item{border-color:rgba(57,255,20,.25);}
html.theme-hacker ::-webkit-scrollbar-thumb{background:#39ff14;}

/* Boot-sequence flourish when hacker theme first activates */
@keyframes boot-flicker{
  0%{opacity:0;} 5%{opacity:1;} 8%{opacity:.2;} 12%{opacity:1;} 100%{opacity:1;}
}
html.theme-hacker main{animation:boot-flicker .6s steps(2,end) 1;}

/* ============================================================
   PRELOADER
   ============================================================ */
html.is-loading{overflow:hidden;}
#preloader{
  position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  background:var(--bs-body-bg);transition:opacity .5s ease,visibility .5s ease;
}
#preloader.loaded{opacity:0;visibility:hidden;pointer-events:none;}
.preloader-inner{display:flex;flex-direction:column;align-items:center;gap:1.1rem;}
.preloader-bracket,.preloader-name{
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:1.6rem;color:var(--bs-body-color);
}
.preloader-bracket{color:var(--accent);animation:preloader-pulse 1.1s ease-in-out infinite;}
.preloader-bracket:last-of-type{animation-delay:.15s;}
.preloader-name{letter-spacing:.04em;}
@keyframes preloader-pulse{0%,100%{opacity:.35;}50%{opacity:1;}}
.preloader-bar{width:9rem;height:2px;background:var(--bs-border-color);border-radius:99px;overflow:hidden;}
.preloader-bar span{
  display:block;height:100%;width:40%;background:var(--accent);border-radius:99px;
  animation:preloader-slide 1.1s ease-in-out infinite;
}
@keyframes preloader-slide{0%{transform:translateX(-100%);}50%{transform:translateX(130%);}100%{transform:translateX(-100%);}}

html.theme-hacker #preloader{background:#040604;}
html.theme-hacker .preloader-bracket,html.theme-hacker .preloader-name{
  font-family:'JetBrains Mono',monospace;color:#39ff14;text-shadow:0 0 10px rgba(57,255,20,.5);
}
html.theme-hacker .preloader-bar{background:rgba(57,255,20,.15);}
html.theme-hacker .preloader-bar span{background:#39ff14;box-shadow:0 0 10px rgba(57,255,20,.6);}

@media (prefers-reduced-motion: reduce){
  .preloader-bracket,.preloader-bar span{animation:none!important;}
}

/* ============================================================
   CUSTOM CURSOR (desktop / fine-pointer only)
   ============================================================ */
.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:1900;
  transform:translate(-50%,-50%);opacity:0;transition:opacity .25s ease;
}
.cursor-dot{width:6px;height:6px;background:var(--accent);}
.cursor-ring{
  width:34px;height:34px;border:1.5px solid var(--accent);
  transition:opacity .25s ease,width .18s ease,height .18s ease,border-color .18s ease,background-color .18s ease;
}
@media (hover:hover) and (pointer:fine){
  html.cursor-ready .cursor-dot,html.cursor-ready .cursor-ring{opacity:.9;}
}
.cursor-ring.is-active{width:52px;height:52px;background:rgba(var(--accent-rgb),.08);}
html.theme-hacker .cursor-dot{background:#39ff14;box-shadow:0 0 8px #39ff14;}
html.theme-hacker .cursor-ring{border-color:#39ff14;}

/* ============================================================
   BACK TO TOP
   ============================================================ */
.back-to-top{
  position:fixed;right:1.5rem;bottom:1.5rem;z-index:1040;width:2.9rem;height:2.9rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:1px solid var(--bs-border-color);
  background:var(--bs-body-bg);color:var(--bs-body-color);box-shadow:0 8px 24px -8px rgba(0,0,0,.25);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s ease,border-color .2s ease,background-color .2s ease;
}
.back-to-top.show{opacity:1;visibility:visible;transform:none;}
.back-to-top:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px);}
html.theme-hacker .back-to-top{background:#050a05;border-color:rgba(57,255,20,.35);color:#39ff14;}
html.theme-hacker .back-to-top:hover{box-shadow:0 0 18px rgba(57,255,20,.35);}

/* ============================================================
   EXPANDED SCROLL-REVEAL SYSTEM
   direction variants + stagger via [style="--stagger:N"]
   ============================================================ */
.reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--stagger, 0) * 70ms);
  will-change:transform,opacity;
}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:calc(.08s + var(--stagger, 0) * 70ms);}
.reveal.d2{transition-delay:calc(.16s + var(--stagger, 0) * 70ms);}
.reveal.d3{transition-delay:calc(.24s + var(--stagger, 0) * 70ms);}
.reveal.d4{transition-delay:calc(.32s + var(--stagger, 0) * 70ms);}

.reveal-left{opacity:0;transform:translateX(-38px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
.reveal-left.in{opacity:1;transform:none;}
.reveal-right{opacity:0;transform:translateX(38px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
.reveal-right.in{opacity:1;transform:none;}
.reveal-zoom{opacity:0;transform:scale(.92);transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1);}
.reveal-zoom.in{opacity:1;transform:none;}
.reveal-blur{opacity:0;filter:blur(6px);transition:opacity .7s ease,filter .7s ease;}
.reveal-blur.in{opacity:1;filter:blur(0);}

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-left,.reveal-right,.reveal-zoom,.reveal-blur{transition:none!important;opacity:1!important;transform:none!important;filter:none!important;}
}

/* ---------- Parallax hero blobs ---------- */
.blob{will-change:transform;}

/* ---------- Section fade-in wash on scroll (subtle top gradient reveal) ---------- */
.section-line{
  position:relative;
}
.section-line::before{
  content:'';position:absolute;top:0;left:50%;width:0;height:2px;background:var(--accent);
  transition:width .8s cubic-bezier(.4,0,.2,1),left .8s cubic-bezier(.4,0,.2,1);
}
.section-line.in::before{width:64px;left:calc(50% - 32px);}

/* ---------- Magnetic buttons ---------- */
.magnetic{position:relative;display:inline-flex;}

/* ---------- Ripple on click ---------- */
.ripple{position:relative;overflow:hidden;}
.ripple-effect{
  position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);
  animation:ripple-anim .6s ease-out;pointer-events:none;
}
@keyframes ripple-anim{to{transform:scale(2.6);opacity:0;}}

/* ---------- Card hover glow (upgrade to card-lift) ---------- */
.card-lift{position:relative;}
.card-lift::after{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(var(--accent-rgb),0),rgba(var(--accent-rgb),0));
  transition:background .3s ease;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.card-lift:hover::after{background:linear-gradient(135deg,rgba(var(--accent-rgb),.55),rgba(var(--accent-rgb),0) 60%);}
.card-lift:hover{box-shadow:0 24px 48px -24px rgba(0,0,0,.28);}
html.theme-hacker .card-lift:hover{box-shadow:0 0 28px rgba(57,255,20,.18),0 24px 48px -24px rgba(0,0,0,.5);}

/* ---------- Image reveal (subtle scale-in on load, matches modern portfolios) ---------- */
.pf img{transition:transform .6s cubic-bezier(.4,0,.2,1);}
.pf:hover img{transform:scale(1.06);}

/* ---------- Smooth entrance for whole page ---------- */
main{animation:page-fade-in .5s ease both;}
@keyframes page-fade-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* ---------- Skeleton shimmer for lazy images while they load ---------- */
.pf.img-loading{background:linear-gradient(100deg,var(--bs-tertiary-bg) 30%,var(--bs-secondary-bg) 50%,var(--bs-tertiary-bg) 70%);
  background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite;}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* ---------- Accent underline sweep for section eyebrow labels ---------- */
[data-eyebrow]{position:relative;padding-left:1.6rem;}
[data-eyebrow]::before{
  content:'';position:absolute;left:0;top:50%;width:1.1rem;height:1.5px;background:var(--accent);
  transform:translateY(-50%) scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.4,0,.2,1) .2s;
}
[data-eyebrow].in::before{transform:translateY(-50%) scaleX(1);}

/* ============================================================
   HACKER THEME — consistent flourishes across every page
   ============================================================ */
html.theme-hacker ::selection{background:#39ff14;color:#031403;}
html.theme-hacker a{ }
html.theme-hacker .back-to-top i,html.theme-hacker .btn-accent i{filter:none;}

/* Terminal-style blinking block caret used site-wide when hacker theme is active */
html.theme-hacker .typed-cursor{background:#39ff14;box-shadow:0 0 6px #39ff14;}

/* Boot readout shown briefly in the corner right after switching into hacker mode */
.hacker-boot{
  position:fixed;left:1rem;bottom:1rem;z-index:1980;font-family:'JetBrains Mono',monospace;font-size:.72rem;
  color:#39ff14;background:rgba(3,10,4,.9);border:1px solid rgba(57,255,20,.35);border-radius:8px;
  padding:.65rem .9rem;width:max-content;max-width:min(21rem,calc(100vw - 2rem));line-height:1.7;
  opacity:0;transform:translateY(10px);
  transition:opacity .3s ease,transform .3s ease;pointer-events:none;
}
.hacker-boot.show{opacity:1;transform:none;}
.hacker-boot .hb-line{white-space:nowrap;}
@media (max-width:480px){
  .hacker-boot{font-size:.66rem;left:.75rem;right:.75rem;width:auto;max-width:none;}
  .hacker-boot .hb-line{white-space:normal;}
}

/* Consistent card / surface treatment for hacker theme on every page (services, blog cards, project cards, prose, forms) */
html.theme-hacker input.form-control,html.theme-hacker textarea.form-control{
  border-color:rgba(57,255,20,.3)!important;color:#c9ffcf;
}
html.theme-hacker input.form-control:focus,html.theme-hacker textarea.form-control:focus{
  border-color:#39ff14!important;box-shadow:0 0 0 .2rem rgba(57,255,20,.15)!important;background:rgba(57,255,20,.03);
}
html.theme-hacker input.form-control::placeholder,html.theme-hacker textarea.form-control::placeholder{color:#3f6b46;}
html.theme-hacker .accordion-button:focus{box-shadow:0 0 0 .2rem rgba(57,255,20,.15)!important;}
html.theme-hacker .filter-btn{border-color:rgba(57,255,20,.3);color:#5fbf6b;}
html.theme-hacker .filter-btn:hover{border-color:#39ff14;color:#39ff14;}
html.theme-hacker .filter-btn.active{background:#39ff14;border-color:#39ff14;color:#031403;}
html.theme-hacker .avatar-circle{background:rgba(57,255,20,.12);color:#39ff14;}
html.theme-hacker .quote-mark{color:#39ff14;}
html.theme-hacker .timeline::before{background:rgba(57,255,20,.25);}
html.theme-hacker .timeline-dot{background:#39ff14;box-shadow:0 0 0 5px rgba(57,255,20,.15),0 0 10px rgba(57,255,20,.5);}
html.theme-hacker .timeline-year{color:#39ff14;}
html.theme-hacker .stat-card{border-left-color:#39ff14;}
html.theme-hacker .step-badge{background:#39ff14;color:#031403;}
html.theme-hacker .progress-bar-fixed{background:#39ff14;box-shadow:0 0 8px rgba(57,255,20,.6);}
html.theme-hacker footer a{color:#39ff14;}
html.theme-hacker .marquee-item{color:#5fbf6b;}
html.theme-hacker .marquee-item i{color:#39ff14;}

/* Slightly stronger CRT flicker + scanline roll for a cohesive hacker feel across pages */
@keyframes scanline-roll{0%{background-position:0 0;}100%{background-position:0 60px;}}
html.theme-hacker .crt-overlay{animation:scanline-roll 6s linear infinite;}

/* ============================================================
   RESPONSIVE / MISC POLISH
   ============================================================ */
@media (max-width:767.98px){
  .back-to-top{right:1rem;bottom:1rem;width:2.6rem;height:2.6rem;}
  .cursor-dot,.cursor-ring{display:none;}
}

.btn-accent,.btn-outline-secondary,.btn-dark{transition:transform .18s cubic-bezier(.4,0,.2,1),background-color .18s,border-color .18s,color .18s,box-shadow .18s;}
.btn-accent:active,.btn-outline-secondary:active,.btn-dark:active{transform:scale(.97);}