@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');

/* --- Base Styles --- */
html { scroll-behavior: smooth; }
body { font-family: 'Poppins', sans-serif; }
#scroll-indicator { position: fixed; top: 0; left: 0; height: 3px; background-color: var(--accent); width: 0%; z-index: 101; transition: background-color 0.5s ease; }

/* --- Themes --- */
:root, .light { --bg-primary: #f8f5f0; --bg-secondary: #ffffff; --text-primary: #1f2937; --text-secondary: #4b5563; --accent: #3b82f6; --accent-glow: rgba(59, 130, 246, 0.4); --shadow: rgba(0,0,0,0.07); --header-bg: rgba(248,245,240,0.85); --border-color: #e5e7eb; }
.dark { --bg-primary: #111827; --bg-secondary: #1F2937; --text-primary: #F3F4F6; --text-secondary: #bdc3c7; --accent: #3498db; --accent-glow: rgba(52, 152, 219, 0.4); --shadow: rgba(0,0,0,0.2); --header-bg: rgba(17, 24, 39, 0.85); --border-color: #374151; }
.hacker { --bg-primary: #000; --bg-secondary: #0d0208; --text-primary: #39ff14; --text-secondary: #00ff41; --accent: #0ff0fc; --accent-glow: rgba(15, 240, 252, 0.4); --shadow: rgba(0,255,153,0.25); --header-bg: rgba(0,8,8,0.85); --border-color: #0d2b13; font-family: 'Fira Code', monospace !important; --neon-red: #ff073a; --neon-cyan: #00f9ff; --neon-magenta: #ff00f1; }

/* Selection Color */
::selection { background-color: var(--accent); color: var(--bg-secondary); }

/* --- Global Theme Application --- */
body { background-color: var(--bg-primary); color: var(--text-primary); transition: background-color 0.5s ease, color 0.5s ease; overflow-x: hidden; }
.card-hover, .project-card, .skill-card, input, textarea { background-color: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; box-shadow: 0 4px 6px -1px var(--shadow), 0 2px 4px -1px var(--shadow); transition: all 0.3s ease; }
a, .text-blue-500 { color: var(--accent) !important; }
.bg-blue-500 { background-color: var(--accent) !important; }
.navbar { background-color: var(--header-bg) !important; border-bottom: 1px solid var(--border-color); backdrop-filter: blur(10px); }
.border-blue-500 { border-color: var(--accent) !important; }
.dark .bg-gray-100, .hacker .bg-gray-100 { background-color: var(--bg-primary) !important; }

/* Effects containers are hidden by default */
.light-bubbles, #rainCanvas, #lightning, #matrixCanvas, .hacker-visual { display: none; }
.light .light-bubbles { display: block; }
.dark #rainCanvas, .dark #lightning { display: block; }
.hacker #matrixCanvas, .hacker .hacker-visual { display: block; }

/* --- Light/Dark Theme "Kinetic Shuffle" --- */
#subtitle-container .letter-shuffle { display: inline-block; opacity: 0; transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0)); transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.8s; }
#subtitle-container.active .letter-shuffle { opacity: 1; transform: translate(0,0) rotate(0); }
#subtitle-container.active .letter-shuffle:hover { transform: scale(1.5); color: var(--accent); z-index: 10; position: relative; transition: transform 0.2s ease; }

/* --- 3D Effects --- */
.profile-image-container { transition: transform 0.4s ease; }
.profile-image-container:hover { transform: perspective(1000px) rotateY(10deg) rotateX(5deg) scale(1.05); }

/* --- Projects Section --- */
.project-card { border-radius: 0.75rem; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; transform-style: preserve-3d; }
.project-card:hover { transform: perspective(1000px) rotateY(-5deg) rotateX(5deg) translateY(-10px) scale(1.03); box-shadow: 0 20px 30px -10px var(--shadow); }
.project-image-wrapper { overflow: hidden; height: 200px; }
.project-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.project-card:hover .project-image { transform: scale(1.1); }
.tech-tag { background-color: var(--accent-glow); color: var(--accent); padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; }
.project-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-secondary) !important; transition: color 0.3s ease; }
.project-link:hover { color: var(--accent) !important; }

/* --- Skills & About Me Icon Tooltips --- */
.skill-card { position: relative; padding: 1.5rem 1rem; border-radius: 0.75rem; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 500; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.skill-card i { transition: transform 0.3s ease; }
.skill-card:hover { transform: translateY(-8px) scale(1.05); box-shadow: 0 8px 25px -5px var(--shadow); border-color: var(--accent) !important; }
.skill-card:hover i { transform: scale(1.1) rotate(-5deg); }
.skill-card::after, .icon-container i[data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); background-color: var(--bg-primary); color: var(--text-primary); padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, bottom 0.2s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.2); z-index: 10; }
.skill-card:hover::after, .icon-container i[data-tooltip]:hover::after { opacity: 1; bottom: 120%; }
/* Enhancement: Interactive icons in About Me section */
.icon-container i[data-tooltip] { position: relative; transition: transform 0.3s ease, color 0.3s ease; cursor: help; }
.icon-container i[data-tooltip]:hover { transform: translateY(-5px) scale(1.15); color: var(--accent) !important; }
.icon-container i[data-tooltip]::after { font-family: 'Poppins', sans-serif; } /* Ensure tooltip font is consistent */

/* --- Contact Section --- */
.contact-social-icon { transition: transform 0.3s ease, color 0.3s ease; }
.contact-social-icon:hover { transform: translateY(-4px) scale(1.1); color: var(--accent) !important; }
#toast { transition: opacity 0.3s, transform 0.3s; }
#toast.success { background-color: #10B981; }
#toast.error { background-color: #EF4444; }
#toast.visible { opacity: 1; transform: translateY(0); }

/* --- Hacker Theme Specifics --- */
.hacker *:not(i):not(span) { animation: text-flicker 4s infinite alternate; }
@keyframes text-flicker { 0%,18%,22%,25%,53%,57%,100% { text-shadow: 0 0 4px #fff, 0 0 10px var(--text-primary), 0 0 18px var(--accent); } 20%,24%,55% { text-shadow: none; } }
.hacker .glitch-text { position: relative; color: var(--text-primary); }
.hacker .glitch-text::before, .hacker .glitch-text::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background: var(--bg-primary); clip: rect(0, 900px, 0, 0); }
.hacker .glitch-text::before { left: 2px; text-shadow: -2px 0 var(--neon-magenta); animation: glitch-anim-1 2s infinite linear alternate-reverse; }
.hacker .glitch-text::after { left: -2px; text-shadow: -2px 0 var(--neon-cyan); animation: glitch-anim-2 3s infinite linear alternate-reverse; }
@keyframes glitch-anim-1 { 0%{clip:rect(24px,9999px,99px,0)} 10%{clip:rect(17px,9999px,6px,0)} 20%{clip:rect(80% 0 2% 0)} 30%{clip:rect(40px,9999px,67px,0)} 40%{clip:rect(82px,9999px,50px,0)} 50%{clip:rect(19px,9999px,83px,0)} 60%{clip:rect(92% 0 3% 0)} 70%{clip:rect(34px,9999px,56px,0)} 80%{clip:rect(42px,9999px,80px,0)} 90%{clip:rect(81px,9999px,93px,0)} 100%{clip:rect(23px,9999px,74px,0)} }
@keyframes glitch-anim-2 { 0%{clip:rect(37px,9999px,12px,0)} 10%{clip:rect(94px,9999px,38px,0)} 20%{clip:rect(2% 0 83% 0)} 30%{clip:rect(54px,9999px,68px,0)} 40%{clip:rect(5px,9999px,60px,0)} 50%{clip:rect(27px,9999px,81px,0)} 60%{clip:rect(72px,9999px,4px,0)} 70%{clip:rect(99px,9999px,53px,0)} 80%{clip:rect(90px,9999px,45px,0)} 90%{clip:rect(42px,9999px,14px,0)} 100%{clip:rect(45px,9999px,48px,0)} }
.hacker .scanline-overlay { position: fixed; inset: 0; z-index: -9; background: linear-gradient(0deg, rgba(18, 16, 16, 0) 0, rgba(0,0,0,0.25) 50%, rgba(18, 16, 16, 0) 100%); background-size: 100% 4px; animation: scanline-anim 10s linear infinite; }
@keyframes scanline-anim { to { background-position: 0 200px; } }
.hacker .crt-effect { position: relative; overflow: hidden; }
.hacker .crt-effect img { animation: image-glitch 5s infinite steps(1); }
@keyframes image-glitch { 0%,100%{clip-path:inset(0 0 0 0)} 5%{clip-path:inset(10% 0 85% 0)} 10%{clip-path:inset(90% 0 5% 0)} 15%{clip-path:inset(40% 0 42% 0)} 20%{clip-path:inset(0 0 0 0)} }
.hacker .crt-effect::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); background-size: 100% 3px, 4px 100%; animation: scanline-anim 20s linear infinite; }
.hacker .hacker-popup { display: block; }
.hacker-popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100; animation: popup-in 0.3s ease-out; }
.hacker-popup.hidden { animation: popup-out 0.3s ease-in forwards; pointer-events: none; }
.popup-content { background-color: var(--bg-secondary); border: 1px solid var(--accent); box-shadow: 0 0 30px var(--accent); padding: 0.5rem; width: 90vw; max-width: 450px; }
.popup-header { display: flex; justify-content: space-between; align-items: center; background-color: var(--accent); color: #000; padding: 0.25rem 0.5rem; }
.popup-body { padding: 1.5rem; }
.popup-body p::after { content: '▋'; animation: blink 0.7s infinite; } .popup-body p.completed::after { content: ''; }
@keyframes popup-in { from { opacity: 0; transform: translate(-50%, -40%) scale(0.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes popup-out { to { opacity: 0; transform: translate(-50%, -40%) scale(0.9); } }
@keyframes blink { 50% { opacity: 0; } }

/* --- Glowing Theme Switcher --- */
.theme-switcher button { transition: all 0.3s ease; }
.theme-switcher button:hover { transform: scale(1.1); }
.active-theme { border-width: 3px !important; transform: scale(1.15) !important; box-shadow: 0 0 15px var(--accent), 0 0 25px var(--accent-glow); }

/* --- General Animations --- */
.floating { animation: heroFloatWobble 8s ease-in-out infinite; }
@keyframes heroFloatWobble { 0%{transform:translateY(0px) rotate(-1deg)} 50%{transform:translateY(-20px) rotate(1deg)} 100%{transform:translateY(0px) rotate(-1deg)} }
.reveal-fade, .reveal-left, .reveal-right { opacity: 0; transition: opacity 0.8s ease-out, transform 0.8s ease-out; transition-delay: var(--delay, 0ms); }
.reveal-fade.is-visible { opacity: 1; }
.reveal-left { transform: translateX(-30px); }
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }
.reveal-right { transform: translateX(30px); }
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }

/* --- Enhanced Light Theme Bubbles --- */
.light-bubbles .bubble { position: absolute; bottom: -150px; background: var(--accent-glow); border-radius: 50%; animation: bubbleRise linear infinite; }
@keyframes bubbleRise { to { transform: translateY(-120vh) translateX(var(--x-end, 5vw)); } }

/* --- Dark Theme Rain & Lightning --- */
#lightning.flash { animation: lightning-flash 0.5s ease-out; }
@keyframes lightning-flash { 0%, 100% { opacity: 0; } 5%, 95% { opacity: 0.6; } }

/* --- Audio Controls --- */
#audio-controls.visible { opacity: 1; pointer-events: auto; }
.volume-sliders-container { position: absolute; bottom: 120%; right: 0; background-color: var(--bg-secondary); padding: 1rem; border-radius: 0.5rem; box-shadow: 0 5px 15px rgba(0,0,0,0.3); opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity 0.2s, transform 0.2s; }
#audio-controls:hover .volume-sliders-container { opacity: 1; pointer-events: auto; transform: translateY(0); }
.volume-slider label { font-weight: 500; margin-bottom: 0.5rem; display: block; }
.volume-slider input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: var(--border-color); border-radius: 5px; outline: none; }
.volume-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: var(--accent); cursor: pointer; border-radius: 50%; }
.volume-slider input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; background: var(--accent); cursor: pointer; border-radius: 50%; border: none; }

/* --- Scroll-to-Top Button --- */
/* Enhancement: Moved button to the left side of the screen */
#scroll-to-top { position: fixed; bottom: 20px; left: 20px; width: 50px; height: 50px; background-color: var(--accent); color: white; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; z-index: 100; opacity: 0; pointer-events: none; transform: translateY(20px); transition: opacity 0.3s, transform 0.3s; box-shadow: 0 4px 10px var(--accent-glow); }
#scroll-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* --- Magnetic Buttons --- */
[data-magnetic] { transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }