/* ============================================================
   HACKER.CSS — Hacker × Data Analyst aesthetic (light theme)
   Terminal prompts · glitch hovers · code rain · live status bar
   ============================================================ */

/* ── LIVE STATUS BAR (sits right under navbar) ───── */
#hk-status {
  position: fixed;
  top: 72px; left: 0; right: 0;
  height: 32px;
  z-index: 99998;
  background: linear-gradient(90deg, #0a0a14 0%, #131a2e 100%);
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Courier New', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  display: flex; align-items: center;
  padding: 0 24px;
  gap: 24px;
  border-bottom: 1px solid rgba(0, 180, 255, 0.20);
  box-shadow: 0 4px 14px rgba(0, 40, 120, 0.10);
  overflow: hidden;
  text-transform: uppercase;
}
#hk-status::before {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(180deg, transparent 0, transparent 3px, rgba(0,180,255,0.02) 3px, rgba(0,180,255,0.02) 4px);
  pointer-events: none;
}
.hk-status-item {
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  position: relative;
}
.hk-status-label {
  color: rgba(0, 212, 255, 0.85);
  font-weight: 800;
}
.hk-status-value {
  color: #ffffff;
  font-weight: 700;
}
.hk-status-dot {
  width: 7px; height: 7px;
  background: #00ff88;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 255, 100, 0.7);
  animation: hkBlink 1.5s ease-in-out infinite;
}
@keyframes hkBlink { 50% { opacity: 0.3; transform: scale(0.85); } }
.hk-status-ticker {
  flex: 1;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #fff 6%, #fff 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #fff 6%, #fff 94%, transparent);
}
.hk-status-ticker-track {
  display: inline-block;
  white-space: nowrap;
  animation: hkTicker 45s linear infinite;
  padding-left: 100%;
}
.hk-status-ticker-track span {
  display: inline-block;
  padding-right: 40px;
  color: rgba(255,255,255,0.6);
}
.hk-status-ticker-track .accent { color: #00d4ff; }
@keyframes hkTicker { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

/* Push everything below the status bar */
#colorlib-main { padding-top: 32px !important; }
/* Mobile: hide status bar to save space */
@media (max-width: 860px) {
  #hk-status { display: none !important; }
  #colorlib-main { padding-top: 0 !important; }
}

/* ── TERMINAL-STYLE PROMPTS on heading-meta ─────── */
.heading-meta {
  position: relative;
}
.heading-meta::before {
  content: '>'   !important;
  width: auto    !important;
  height: auto   !important;
  background: transparent !important;
  border: none   !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  font-weight: 800;
  color: #00d4ff !important;
  animation: hkCursorBlink 1s step-end infinite;
}
@keyframes hkCursorBlink { 50% { opacity: 0; } }

/* ── GLITCH ON HOVER ─────────────────────────────── */
.hk-glitch:hover { animation: hkGlitch 0.4s linear; }
@keyframes hkGlitch {
  0%   { transform: translate(0); }
  20%  { transform: translate(-2px,  1px); text-shadow: 2px 0 0 #00d4ff, -2px 0 0 #ff3366; }
  40%  { transform: translate( 2px, -1px); text-shadow: -2px 0 0 #00d4ff, 2px 0 0 #ff3366; }
  60%  { transform: translate(-1px,  2px); text-shadow: 1px 0 0 #00d4ff, -1px 0 0 #ff3366; }
  80%  { transform: translate( 1px, -2px); text-shadow: -1px 0 0 #00d4ff, 1px 0 0 #ff3366; }
  100% { transform: translate(0); text-shadow: none; }
}

/* ── CODE RAIN CANVAS (sits behind counter section) ─ */
#hk-rain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.30;
}
#colorlib-counter { position: relative; }
#colorlib-counter .colorlib-narrow-content { position: relative; z-index: 2; }

/* ── HEX-GRID BG (subtle accent for skills section) ── */
.colorlib-skills {
  position: relative;
}
.colorlib-skills::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(0, 120, 255, 0.08) 1px, transparent 2px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}
.colorlib-skills .colorlib-narrow-content { position: relative; z-index: 2; }

/* ── TERMINAL CARD (used for intro greeting block) ── */
.hk-terminal {
  background: rgba(10, 10, 20, 0.95) !important;
  border: 1px solid rgba(0, 180, 255, 0.30);
  border-radius: 14px;
  padding: 18px 22px !important;
  font-family: 'Courier New', monospace !important;
  font-size: 14px !important;
  color: #00ff88 !important;
  box-shadow:
    0 10px 32px rgba(0, 40, 120, 0.20),
    inset 0 0 60px rgba(0, 180, 255, 0.08);
  position: relative;
  max-width: 540px;
  margin: 0 auto 32px;
  text-align: left;
}
.hk-terminal::before {
  content: '';
  display: flex;
  height: 22px;
  margin: -12px -16px 14px;
  padding: 0 14px;
  background: linear-gradient(180deg, #1a1f2e, #131a2e);
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid rgba(0, 180, 255, 0.18);
}
.hk-terminal::after {
  content: '● ● ●';
  position: absolute;
  top: 4px; left: 14px;
  font-size: 12px;
  letter-spacing: 4px;
  color: #ff5f56;
  filter: hue-rotate(0deg) saturate(1.2);
  text-shadow: 18px 0 0 #ffbd2e, 36px 0 0 #28c93f;
}
.hk-terminal .prompt { color: #00d4ff; }
.hk-terminal .typed { color: #fff; }
.hk-terminal .cursor-blink::after {
  content: '▮';
  display: inline-block;
  margin-left: 2px;
  color: #00d4ff;
  animation: hkCursorBlink 0.7s step-end infinite;
}

/* ── CERTIFICATION & ACHIEVEMENT — brand badges ──── */
/* Replace timeline-icon styling for elements that have a brand class. */
.timeline-icon.hk-brand {
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  border: 1.5px solid rgba(0, 0, 0, 0.06) !important;
  background: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Quicksand', sans-serif !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  text-align: center;
  line-height: 1 !important;
  overflow: hidden;
  box-shadow:
    0 6px 18px rgba(0, 30, 90, 0.10),
    inset 0 0 0 1px rgba(255,255,255,0.7) !important;
}
.timeline-icon.hk-brand span { line-height: 1; }
/* IBM */
.hk-brand.ibm     { color: #054ada !important; border-color: #054ada !important; }
.hk-brand.ibm span{ background: #054ada; color:#fff; padding: 4px 8px; border-radius: 3px;
                    font-weight: 900; letter-spacing: 1px; font-size: 13px; }
/* AWS */
.hk-brand.aws     { background: #232F3E !important; color: #FF9900 !important; border-color: #232F3E !important; }
.hk-brand.aws span{ color: #FF9900; font-weight: 900; font-size: 16px; letter-spacing: -1px;
                    text-transform: lowercase; }
/* Coursera */
.hk-brand.coursera     { color: #0056D2 !important; border-color: #0056D2 !important; }
.hk-brand.coursera span{ font-size: 22px; font-weight: 900; color:#0056D2; line-height:1; }
/* Udemy */
.hk-brand.udemy     { color: #A435F0 !important; border-color: #A435F0 !important; }
.hk-brand.udemy span{ font-size: 22px; font-weight: 900; color:#A435F0; line-height:1; }
/* TCS */
.hk-brand.tcs     { color: #1F3FA7 !important; border-color: #1F3FA7 !important; }
.hk-brand.tcs span{ font-size: 13px; font-weight: 900; color:#1F3FA7; letter-spacing: -1px; }
/* Deloitte */
.hk-brand.deloitte     { color: #86BC25 !important; border-color: #86BC25 !important; background:#0a0a14 !important;}
.hk-brand.deloitte span{ font-size: 13px; font-weight: 900; color:#86BC25; letter-spacing: -1px; }
/* Trophy / Medal */
.hk-brand.trophy {
  background: linear-gradient(135deg, #FFD700, #FFA500) !important;
  border-color: #FFA500 !important;
}
.hk-brand.trophy i { color: #fff !important; font-size: 22px !important; }
/* NSS / Volunteer */
.hk-brand.heart {
  background: linear-gradient(135deg, #ff5566, #d63347) !important;
  border-color: #d63347 !important;
}
.hk-brand.heart i { color: #fff !important; font-size: 20px !important; }
/* Word competition */
.hk-brand.word {
  background: linear-gradient(135deg, #5a4eb8, #3b2e9e) !important;
  border-color: #3b2e9e !important;
}
.hk-brand.word i { color: #fff !important; font-size: 18px !important; }
/* Forage (used as sub-badge for Forage simulations) */
.hk-brand.forage     { color: #009B7B !important; border-color: #009B7B !important; }
.hk-brand.forage span{ font-size: 12px; font-weight: 900; color:#009B7B; letter-spacing: -0.5px; }

/* Make timeline labels stand out a bit more */
.timeline-label h2 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.timeline-label h2 a {
  font-weight: 700;
}
.timeline-label h2 span {
  background: linear-gradient(135deg, rgba(0,120,255,0.08), rgba(0,212,255,0.06));
  border: 1px solid rgba(0, 120, 255, 0.18);
  padding: 3px 10px !important;
  border-radius: 999px;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
}

/* ── BINARY-DOT decoration on section corners ───── */
.fx-num.tr {
  /* Existing big background number — add a tiny dot grid next to it */
}

/* ── INTRO greeting → terminal style override ───── */
.colorlib-intro .intro-greeting {
  background: rgba(10, 10, 20, 0.92) !important;
  color: #00ff88 !important;
  border-color: rgba(0, 255, 100, 0.40) !important;
  font-weight: 700 !important;
  letter-spacing: 4px !important;
}
.colorlib-intro .intro-greeting::before {
  background: #00ff88 !important;
  box-shadow: 0 0 10px rgba(0, 255, 100, 0.7);
}

/* ── HOVER GLITCH on nav links + brand ──────────── */
.nav-brand:hover .brand-name,
.nav-links a:hover {
  animation: hkGlitch 0.35s linear;
}

/* ── COUNTER labels: tag prefix [TOTAL] ─────────── */
#colorlib-counter .colorlib-counter-label::before {
  content: '[';
  color: #00d4ff;
  margin-right: 4px;
  font-weight: 900;
}
#colorlib-counter .colorlib-counter-label::after {
  content: ']';
  color: #00d4ff;
  margin-left: 4px;
  font-weight: 900;
}

/* ── Section heading: square brace accents ──────── */
.colorlib-heading {
  padding: 0 14px;
}
.colorlib-heading::before,
.colorlib-heading::after {
  content: none;  /* keep the underline added by beast.css */
}

/* ── Mobile tweaks ──────────────────────────────── */
@media (max-width: 768px) {
  .hk-terminal { font-size: 12px !important; padding: 14px 16px !important; }
  .timeline-icon.hk-brand { width: 48px !important; height: 48px !important; }
}