/* ═══════════════════════════════════════════
   1. ZEN MODE
   ═══════════════════════════════════════════ */

/* Kill all visual noise */
body.zen-mode #bgC,
body.zen-mode .mesh,
body.zen-mode .noise,
body.zen-mode .cg,
body.zen-mode .cd,
body.zen-mode .cursor-particle,
body.zen-mode .emoji-particle,
body.zen-mode .sbar,
body.zen-mode .combo-indicator,
body.zen-mode .live-console,
body.zen-mode .xp-footer,
body.zen-mode .streak,
body.zen-mode .toast-container,
body.zen-mode .smart-cta,
body.zen-mode .shake-hint,
body.zen-mode .shake-bar,
body.zen-mode .desk-hint,
body.zen-mode .weather-widget,
body.zen-mode .visitor-count,
body.zen-mode .live-presence,
body.zen-mode .mp-bar,
body.zen-mode .cc-bubble,
body.zen-mode .rec-card,
body.zen-mode #recContainer { display: none !important; }

/* Freeze all decorative animations */
body.zen-mode .ng { animation: none !important; }
body.zen-mode .sd::after { animation: none !important; }
body.zen-mode .pf svg circle { animation: none !important; }
body.zen-mode .tc-auto-fill { animation: none !important; transition: none !important; }
body.zen-mode .pre-fill { box-shadow: none !important; }
body.zen-mode .ticker { animation: tickScroll 120s linear infinite !important; }

/* Remove hover transforms for clean feel */
body.zen-mode .lk:hover,
body.zen-mode .lk:focus-visible { transform: none !important; box-shadow: none !important; }
body.zen-mode .lk .ls,
body.zen-mode .lk .lm { display: none !important; }
body.zen-mode .conf-badge:hover,
body.zen-mode .rt:hover,
body.zen-mode .vcb:hover,
body.zen-mode .si:hover,
body.zen-mode .cert-card:hover,
body.zen-mode .nl:hover,
body.zen-mode .insight-card:hover,
body.zen-mode .trophy-badge:hover .trophy-badge-emoji { transform: none !important; }

/* Keep links interactive but subtle */
body.zen-mode .lk:hover { background: var(--cardH) !important; }
body.zen-mode .nl:hover { background: var(--cardH) !important; color: var(--text) !important; }

/* Zen Banner */
.zen-banner {
  display: none;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  opacity: .5;
  padding: 6px 16px;
  margin-bottom: 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  transition: opacity .3s;
}
.zen-banner:hover { opacity: .8; }
body.zen-mode .zen-banner { display: flex; align-items: center; justify-content: center; gap: 6px; }

/* Zen transition overlay */
.zen-flash {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.zen-flash.active { opacity: 1; }


/* ═══════════════════════════════════════════
   2. PDF RESUME
   ═══════════════════════════════════════════ */

.pdf-resume-btn .pdf-icon { transition: transform .3s cubic-bezier(.16,1,.3,1); }
.pdf-resume-btn:hover .pdf-icon { transform: translateY(2px); }

/* Enhanced print stylesheet */
@media print {
  /* Hide everything non-essential */
  .zen-banner, .surprise-btn, #zenBtn, .pdf-resume-btn,
  #preloader, .noise, .sbar, .cg, .cd, .mesh, #bgC,
  .top-btns, .weather-widget, .toast-container, .combo-indicator,
  .smart-cta, .xp-footer, .live-console, .visitor-count, .streak,
  .foot, #trophyOverlay, #shortcutOverlay, #termOverlay,
  #gameOverlay, #shareOverlay, #easterEgg, canvas,
  .vcb, .rec-card, #recContainer, .surprise-btn,
  #contactSecret, .shake-hint, .desk-hint, .shake-bar,
  .ticker-wrap, .ph, .qb, #linkedinFeed,
  .tc-nav, .tc-counter, .tc-auto-bar, .tc-cats,
  .cursor-particle, .emoji-particle, .conf-strip,
  #greetBar { display: none !important; }

  /* Reset transforms and visibility */
  body { background: #fff !important; color: #000 !important;
         overflow: visible !important; font-size: 11pt !important; }
  .rv, .sa { opacity: 1 !important; transform: none !important; }
  #app { opacity: 1 !important; max-width: 700px; margin: 0 auto; padding: 16px 24px; }
  .print-only { display: block !important; }

  /* Typography reset */
  * { color: #111 !important; border-color: #ddd !important;
      text-shadow: none !important; box-shadow: none !important; }
  .ng { background: none !important; -webkit-background-clip: unset !important;
        color: #111 !important; -webkit-text-fill-color: #111 !important; }
  .hn { font-size: 24pt !important; }
  .vp, .vp strong { color: #333 !important; font-size: 10pt !important; }
  .rt { border-color: #ccc !important; color: #555 !important;
        background: #f5f5f5 !important; font-size: 7pt !important; }
  .st { border-color: #ccc !important; background: #f9f9f9 !important; }
  .imp-num { color: #000 !important; }
  .imp-label { color: #666 !important; }

  /* Profile image smaller */
  .pf { width: 72px !important; height: 72px !important; margin: 12px auto 4px !important; }
  .pf svg { display: none !important; }
  .fb { display: none !important; }

  /* Links as clean cards */
  .lk { border-color: #ddd !important; background: #fafafa !important;
        padding: 10px !important; break-inside: avoid; }
  .lk .ls, .lk .lm { display: none !important; }
  .la { display: none !important; }
  .li { border-color: #ddd !important; background: #f5f5f5 !important; }
  .lt { font-size: 10pt !important; }
  .lsu { font-size: 7pt !important; }

  /* Timeline */
  .tl-item { page-break-inside: avoid; break-inside: avoid; }
  .tl-line { background: #999 !important; }
  .tl-dot { border-color: #999 !important; }
  .tl-yr { color: #000 !important; font-weight: 700; }
  .nd { opacity: 1 !important; }
  .ndt { color: #000 !important; }
  .ndl { background: #999 !important; }

  /* Certs grid — compact 4-column */
  .cert-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 4px !important; }
  .cert-card { padding: 6px 4px !important; break-inside: avoid; page-break-inside: avoid;
               border-color: #ddd !important; background: #fafafa !important; }
  .cert-icon { font-size: 16px !important; }
  .cert-name { font-size: 6pt !important; }
  .cert-name strong { font-size: 7pt !important; }
  .cert-org { font-size: 5pt !important; color: #666 !important; }
  .cert-verify { display: none !important; }

  /* Testimonials — show first 4 in grid */
  .tc-section { page-break-before: always; }
  .tc-viewport { min-height: auto !important; overflow: visible !important; }
  .tc-track { flex-wrap: wrap !important; transform: none !important; gap: 6px !important; }
  .tc-slide { min-width: 47% !important; flex: 0 0 47% !important; }
  .tc-slide:nth-child(n+5) { display: none !important; }
  .tc-card { min-height: auto !important; padding: 8px !important;
             border-color: #ddd !important; background: #fafafa !important; }
  .tc-quote { font-size: 8pt !important; }
  .tc-name { font-size: 8pt !important; }
  .tc-role { font-size: 6pt !important; }
  .tc-avatar { width: 20px !important; height: 20px !important; font-size: 9px !important; }
  .tc-cat-badge { font-size: 5pt !important; }

  /* URLs visible */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 7pt; color: #888 !important; word-break: break-all; }
  a.lk::after, a.cert-card::after, a.nl::after { display: none !important; }

  /* Page setup */
  @page { margin: 1.5cm 1.8cm; size: A4; }
  h1 { page-break-after: avoid; }
}


/* ═══════════════════════════════════════════
   3. SURPRISE ME BUTTON
   ═══════════════════════════════════════════ */

.surprise-btn {
  position: fixed;
  bottom: 24px;
  right: 16px;
  z-index: 99;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--sub);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  -webkit-tap-highlight-color: transparent;
}
.surprise-btn:hover,
.surprise-btn:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  transform: scale(1.1) rotate(15deg);
  box-shadow: 0 4px 20px var(--glow);
  outline: none;
}
.surprise-btn:active { transform: scale(.95); }
.surprise-btn.spinning i {
  animation: surpriseSpin .5s cubic-bezier(.16,1,.3,1);
}
@keyframes surpriseSpin {
  0%   { transform: rotate(0) scale(1); }
  40%  { transform: rotate(200deg) scale(1.3); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Surprise highlight pulse */
.surprise-highlight {
  outline: 2px solid var(--accent) !important;
  outline-offset: 8px !important;
  border-radius: 12px;
  animation: surprisePulse 1.5s ease-out forwards;
}
@keyframes surprisePulse {
  0%   { outline-color: var(--accent); outline-offset: 8px; }
  50%  { outline-color: var(--accent2); outline-offset: 12px; }
  100% { outline-color: transparent; outline-offset: 20px; }
}

/* Tooltip that shows section name */
.surprise-toast {
  position: fixed;
  bottom: 78px;
  right: 16px;
  z-index: 99;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  opacity: 0;
  transform: translateY(8px);
  transition: all .3s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
  white-space: nowrap;
  backdrop-filter: blur(12px);
}
.surprise-toast.show {
  opacity: 1;
  transform: translateY(0);
}

body.zen-mode .surprise-btn { box-shadow: none; }
body.zen-mode .surprise-btn:hover { transform: scale(1.05); }

@media(max-width:600px) {
  .surprise-btn {
    bottom: 14px; right: 12px;
    width: 38px; height: 38px; font-size: 14px;
  }
  .surprise-toast { bottom: 60px; right: 12px; }
}


/* ═══════════════════════════════════════════
   4. EMOJI CURSOR TRAIL
   ═══════════════════════════════════════════ */

/* Replace original dot particles with emojis */
body:not(.zen-mode) .cursor-particle { display: none !important; }

.emoji-particle {
  position: fixed;
  pointer-events: none;
  z-index: 9990;
  user-select: none;
  line-height: 1;
  opacity: 0;
}