/* ===== santosh.it — "command center" effects layer =====
 * Loaded after style.css; overrides + new components.
 */

:root {
  --glow: 0 0 18px rgba(34, 211, 165, 0.35);
  --glass: color-mix(in srgb, var(--card) 72%, transparent);
}
[data-theme="light"] { --glow: 0 0 14px rgba(14, 159, 124, 0.25); }

/* Matrix mode (Konami code / `matrix` command) */
[data-matrix] {
  --accent: #00ff41;
  --accent-soft: rgba(0, 255, 65, 0.12);
  --glow: 0 0 20px rgba(0, 255, 65, 0.4);
}

/* ===== Background particle canvas ===== */
#bg-canvas {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.75;
}
.section, .hero, .site-footer { position: relative; }

/* ===== Boot screen ===== */
#boot-screen {
  position: fixed; inset: 0; z-index: 1000;
  background: #060a14; color: #22d3a5;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  transition: opacity 0.45s ease;
}
#boot-screen.done { opacity: 0; pointer-events: none; }
#boot-screen[hidden] { display: none; }
#boot-text { font-size: clamp(0.85rem, 2vw, 1.05rem); line-height: 1.9; white-space: pre-wrap; min-width: min(420px, 80vw); }
#boot-text .ok { color: #28c840; }

/* ===== Page transition wipe ===== */
#page-wipe {
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  background: linear-gradient(120deg, var(--bg) 0%, var(--bg-alt) 100%);
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.28s cubic-bezier(0.65, 0, 0.35, 1);
}
#page-wipe.active { transform: scaleY(1); pointer-events: auto; }

/* ===== Custom cursor (fine pointers only) ===== */
@media (pointer: fine) {
  body.custom-cursor, body.custom-cursor a, body.custom-cursor button { cursor: none; }
  #cursor-dot, #cursor-ring, #cursor-spot { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 998; }
  #cursor-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent); box-shadow: var(--glow);
    transform: translate(-50%, -50%);
  }
  #cursor-ring {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--accent) 65%, transparent);
    transform: translate(-50%, -50%);
    transition: width 0.2s, height 0.2s, border-color 0.2s, opacity 0.2s;
  }
  #cursor-ring.hovering { width: 56px; height: 56px; border-color: var(--accent); background: var(--accent-soft); }
  #cursor-spot {
    width: 420px; height: 420px; border-radius: 50%;
    background: radial-gradient(circle, var(--accent-soft) 0%, transparent 65%);
    transform: translate(-50%, -50%); opacity: 0.5;
  }
  .cursor-particle {
    position: fixed; width: 5px; height: 5px; border-radius: 50%;
    background: var(--accent); pointer-events: none; z-index: 997;
    animation: cursor-pop 0.6s ease-out forwards;
  }
  @keyframes cursor-pop {
    to { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
  }
}
#cursor-dot, #cursor-ring, #cursor-spot { display: none; }
body.custom-cursor #cursor-dot, body.custom-cursor #cursor-ring, body.custom-cursor #cursor-spot { display: block; }

/* ===== Navbar: glass, shrink, animated underline, active indicator ===== */
.site-header {
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  transition: box-shadow 0.3s, background 0.3s;
}
.site-header.shrunk {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}
.site-header .nav { transition: padding 0.3s; }
.site-header.shrunk .nav { padding: 0.45rem 0; }
.brand { transition: transform 0.4s; display: inline-block; }
.site-header.shrunk .brand { transform: rotate(-3deg) scale(0.95); }
.nav-links a { position: relative; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -5px;
  width: 100%; height: 2px; background: var(--accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--accent); }

/* ===== Hero: typewriter terminal + floating cards ===== */
.hero h1 { text-shadow: 0 0 30px var(--accent-soft); }
.hero-output { margin: 0.4rem 0 0.2rem; }
.hero-output .prompt { color: var(--muted); }
.typing-line #typed-role { transition: filter 0.18s, opacity 0.18s; }
.typing-line.morphing #typed-role { filter: blur(6px); opacity: 0; }

.hero-card { position: relative; }
.float-chip {
  position: absolute; z-index: 2;
  background: var(--glass); border: 1px solid var(--border);
  backdrop-filter: blur(8px);
  padding: 0.4rem 0.9rem; border-radius: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--accent);
  box-shadow: var(--shadow);
  animation: chip-float 6s ease-in-out infinite;
  transition: transform 0.2s ease-out;
  will-change: transform;
}
.float-chip:nth-child(odd) { animation-duration: 7.5s; animation-delay: -2s; }
@keyframes chip-float {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -12px; }
}
.chip-1 { top: -18px; left: -26px; }
.chip-2 { top: 30%; right: -34px; }
.chip-3 { bottom: 22%; left: -40px; }
.chip-4 { bottom: -16px; right: 12%; }

/* ===== Buttons: glow, gradient sweep, ripple, magnetic (JS moves them) ===== */
.btn { position: relative; overflow: hidden; will-change: transform; }
.btn-primary {
  background: linear-gradient(110deg, var(--accent) 40%, #4be3c0 50%, var(--accent) 60%);
  background-size: 220% 100%;
  transition: transform 0.15s, box-shadow 0.2s, background-position 0.5s;
}
.btn-primary:hover { box-shadow: var(--glow); background-position: 100% 0; }
.btn-outline:hover { box-shadow: var(--glow); }
.btn:active { transform: scale(0.94); transition-duration: 0.06s; }
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, 0.45);
  transform: scale(0); animation: ripple 0.55s ease-out forwards;
}
@keyframes ripple { to { transform: scale(3.2); opacity: 0; } }

/* ===== Scroll reveal upgrades: blur + rotation + stagger ===== */
.reveal {
  opacity: 0;
  transform: translateY(28px) rotate(0.6deg);
  filter: blur(6px);
  transition: opacity 0.7s ease, transform 0.7s ease, filter 0.7s ease;
  transition-delay: var(--d, 0ms);
}
.reveal.visible { opacity: 1; transform: none; filter: none; }

/* ===== Skill gauges (replaces plain bars) ===== */
.gauge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 1rem; }
.gauge {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  padding: 0.9rem 0.4rem; border-radius: 12px;
  background: var(--glass); border: 1px solid var(--border);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.gauge:hover { transform: translateY(-4px) rotate(-1.5deg); box-shadow: var(--glow); border-color: var(--accent); }
.gauge svg { width: 74px; height: 74px; transform: rotate(-90deg); }
.gauge-bg { fill: none; stroke: var(--border); stroke-width: 6; }
.gauge-fill {
  fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 213.6; stroke-dashoffset: 213.6;
  transition: stroke-dashoffset 1.3s cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 0 4px var(--accent));
}
.gauge-val { margin-top: -3.2rem; font-size: 0.85rem; color: var(--accent); }
.gauge-name { margin-top: 2rem; font-size: 0.8rem; text-align: center; color: var(--text); }

/* ===== Tech stack floating icons ===== */
.stack-grid { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.stack-icon {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  width: 104px; padding: 1.1rem 0.5rem; border-radius: 14px;
  background: var(--glass); border: 1px solid var(--border);
  animation: chip-float 7s ease-in-out infinite;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.stack-icon:nth-child(2n) { animation-delay: -2.5s; }
.stack-icon:nth-child(3n) { animation-delay: -4.5s; }
.stack-icon:hover { transform: scale(1.12); border-color: var(--accent); box-shadow: var(--glow); z-index: 2; }
.stack-icon .icon { font-size: 1.9rem; }
.stack-icon .label { font-size: 0.78rem; font-family: 'JetBrains Mono', monospace; color: var(--muted); }
.stack-icon .tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--card); border: 1px solid var(--accent); color: var(--text);
  font-size: 0.72rem; padding: 0.25rem 0.6rem; border-radius: 6px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s;
}
.stack-icon:hover .tip { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== Project cards: glass + 3D tilt + browser mockup ===== */
.project-grid { perspective: 1200px; }
.project-card {
  background: var(--glass);
  backdrop-filter: blur(10px);
  transform-style: preserve-3d;
  transition: transform 0.18s ease-out, border-color 0.25s, box-shadow 0.25s;
}
.project-card:hover { box-shadow: var(--shadow), var(--glow); }
.browser-bar {
  display: flex; align-items: center; gap: 5px;
  padding: 0.5rem 0.9rem; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
}
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.browser-bar i:nth-child(2) { background: #febc2e; }
.browser-bar i:nth-child(3) { background: #28c840; }
.browser-bar .url {
  margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 0.68rem;
  color: var(--muted); background: var(--bg); padding: 0.12rem 0.7rem; border-radius: 999px;
  max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.browser-view { position: relative; height: 170px; overflow: hidden; background: var(--bg-alt); }
.browser-view img { height: 100%; width: 100%; object-fit: cover; object-position: top; transition: transform 6s linear, scale 0.4s; }
.project-card:hover .browser-view img { object-position: bottom; transform: scale(1.05); }
.browser-view .placeholder {
  display: flex; align-items: center; justify-content: center; height: 100%;
  font-family: 'JetBrains Mono', monospace; color: var(--muted); font-size: 0.85rem;
}
.browser-view iframe { position: absolute; inset: 0; width: 200%; height: 200%; transform: scale(0.5); transform-origin: 0 0; border: 0; background: #fff; }
.project-links a { transition: transform 0.15s; display: inline-block; }
.project-links a:hover { transform: translateX(3px); }

/* ===== Code rain (floating snippets between sections) ===== */
.code-rain { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.code-rain + .container, .section > .container { position: relative; z-index: 1; }
.code-bit {
  position: absolute; bottom: -2rem;
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem;
  color: var(--accent); opacity: 0;
  animation: code-rise linear infinite;
}
@keyframes code-rise {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 0.16; }
  88% { opacity: 0.16; }
  100% { transform: translateY(calc(-100vh + 4rem)); opacity: 0; }
}

/* ===== Interactive terminal section ===== */
.iterm {
  background: #0c1120; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); overflow: hidden;
  font-family: 'JetBrains Mono', monospace; font-size: 0.88rem;
}
[data-theme="light"] .iterm { background: #1c2436; }
.iterm-body { padding: 1.1rem 1.2rem; height: 320px; overflow-y: auto; color: #dbe4f5; }
.iterm-body .line { white-space: pre-wrap; line-height: 1.75; }
.iterm-body .line .p { color: #22d3a5; }
.iterm-body .line.err { color: #ff6b6b; }
.iterm-body .line.accent { color: #22d3a5; }
.iterm-input-row { display: flex; align-items: center; gap: 0.5rem; padding: 0 1.2rem 1rem; }
.iterm-input-row .p { color: #22d3a5; }
#iterm-input {
  flex: 1; background: transparent; border: 0; outline: none;
  color: #dbe4f5; font: inherit; caret-color: #22d3a5;
}
.iterm.glitch { animation: glitch 0.5s steps(2) 3; }
@keyframes glitch {
  0% { transform: translate(0); filter: none; }
  25% { transform: translate(-4px, 2px); filter: hue-rotate(90deg) saturate(3); }
  50% { transform: translate(4px, -2px); filter: invert(0.8); }
  75% { transform: translate(-2px, -3px); filter: hue-rotate(-60deg); }
  100% { transform: translate(0); filter: none; }
}

/* ===== Timeline: glowing nodes ===== */
.timeline-item { border-left-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.timeline-item::before {
  box-shadow: 0 0 0 4px var(--accent-soft), var(--glow);
  animation: node-pulse 2.6s ease-in-out infinite;
}
@keyframes node-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--accent-soft), 0 0 8px var(--accent); }
  50% { box-shadow: 0 0 0 7px var(--accent-soft), 0 0 16px var(--accent); }
}

/* ===== Certificate flip cards ===== */
.flip-card { perspective: 900px; min-height: 190px; }
.flip-inner {
  position: relative; width: 100%; height: 100%; min-height: 190px;
  transform-style: preserve-3d; transition: transform 0.65s cubic-bezier(0.4, 0.1, 0.2, 1);
}
.flip-card:hover .flip-inner, .flip-card:focus-within .flip-inner { transform: rotateY(180deg); }
.flip-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--glass); border: 1px solid var(--border); border-radius: 12px;
  padding: 1.3rem; display: flex; flex-direction: column; gap: 0.4rem;
}
.flip-back { transform: rotateY(180deg); border-color: var(--accent); }
.flip-back ul { list-style: none; font-size: 0.85rem; }
.flip-back li::before { content: '▸ '; color: var(--accent); }
.flip-hint { margin-top: auto; font-size: 0.72rem; color: var(--muted); font-family: 'JetBrains Mono', monospace; }

/* ===== Blog cards ===== */
.post-card { overflow: hidden; }
.post-card .read-time {
  opacity: 0; transform: translateY(4px); transition: opacity 0.25s, transform 0.25s;
  font-size: 0.75rem; color: var(--accent); font-family: 'JetBrains Mono', monospace;
}
.post-card:hover .read-time { opacity: 1; transform: none; }
.post-card .tech-tags li { transition: transform 0.2s, background 0.2s; }
.post-card:hover .tech-tags li { transform: translateY(-2px); background: var(--accent); color: var(--bg); }

/* ===== Contact: terminal-style form ===== */
.terminal-form {
  background: var(--glass); border: 1px solid var(--border); border-radius: 12px;
  padding: 1.6rem; backdrop-filter: blur(10px);
}
.terminal-form .form-field label { font-family: 'JetBrains Mono', monospace; color: var(--accent); }
.terminal-form .form-field label::before { content: '$ '; color: var(--muted); }
.terminal-form input:focus, .terminal-form textarea:focus { box-shadow: var(--glow); }

/* ===== Footer: network graph ===== */
.site-footer { overflow: hidden; }
#footer-canvas { position: absolute; inset: 0; opacity: 0.35; pointer-events: none; }
.site-footer .footer-grid { position: relative; z-index: 1; }

/* ===== Theme toggle morph ===== */
#theme-toggle { transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s; }
#theme-toggle:hover { box-shadow: var(--glow); }
#theme-toggle.spin { transform: rotate(360deg); }
body, .site-header, .section, .project-card, .post-card, .gauge, input, textarea {
  transition-property: background, background-color, color, border-color, box-shadow, transform, opacity, filter;
}

/* ===== Sound toggle ===== */
#sound-toggle {
  background: none; border: 1px solid var(--border); border-radius: 999px;
  padding: 0.3rem 0.6rem; cursor: pointer; font-size: 0.9rem; opacity: 0.85;
}
#sound-toggle:hover { box-shadow: var(--glow); }

/* ===== Matrix overlay canvas ===== */
#matrix-canvas {
  position: fixed; inset: 0; z-index: 996; pointer-events: none;
  opacity: 0; transition: opacity 0.6s;
}
[data-matrix] #matrix-canvas { opacity: 0.28; }

/* ===== Coffee / toast popup ===== */
.toast {
  position: fixed; bottom: 5.4rem; right: 1.4rem; z-index: 995;
  background: var(--card); border: 1px solid var(--accent); border-radius: 10px;
  padding: 0.8rem 1.2rem; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem;
  box-shadow: var(--glow); animation: toast-in 0.3s ease-out;
}
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } }

/* ===== Icons / micro-interactions ===== */
.hero-socials a, .footer-links a { transition: transform 0.2s, color 0.2s; display: inline-block; }
.hero-socials a:hover, .footer-links a:hover { transform: translateY(-3px) rotate(-2deg); color: var(--accent); }
.detail-image { transition: transform 0.5s; }
.detail-image:hover { transform: scale(1.015); }

/* ===== Reduced motion: kill everything decorative ===== */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .float-chip, .stack-icon, .timeline-item::before, .code-bit { animation: none !important; }
  #boot-screen, #page-wipe, #matrix-canvas, #cursor-dot, #cursor-ring, #cursor-spot { display: none !important; }
  .flip-card:hover .flip-inner { transform: none; }
  .btn, .project-card, .gauge, .stack-icon { transition: none; }
}

@media (max-width: 860px) {
  .float-chip { display: none; }
  .iterm-body { height: 260px; }
}