*{user-select:none;margin:0;padding:0;box-sizing:border-box}
html{overflow-x:hidden}
body{overflow-x:hidden;width:100%;font-family:system-ui,-apple-system,sans-serif;transition:background-color .3s,color .3s}
canvas{position:fixed!important}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.animate-bounce{animation:bounce 2s infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
.float{animation:float 6s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.pulse-hover:hover{animation:pulse 1s infinite}
@keyframes drawLine{from{height:0}to{height:100%}}
@keyframes slideIn{from{transform:translateX(-100px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes glow{0%,100%{box-shadow:0 0 20px rgba(99,102,241,0.5)}50%{box-shadow:0 0 40px rgba(99,102,241,0.9),0 0 60px rgba(168,85,247,0.5)}}
#bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1}
.section{min-h:screen;position:relative;z-index:1;opacity:0;transform:translateY(50px);transition:opacity .8s,transform .8s}
.section.visible{opacity:1;transform:translateY(0)}
.skill-bar{transition:width 1.5s cubic-bezier(.4,0,.2,1)}
.card{backdrop-filter:blur(10px);transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(99,102,241,.1),transparent);transition:left .6s}
.card:hover::before{left:100%}
.card:hover{transform:translateY(-15px) scale(1.02);box-shadow:0 25px 50px rgba(99,102,241,.4)}
.dark .card{background:rgba(15,23,42,.7)}
.light .card{background:rgba(248,250,252,.7)}
.nav-link{position:relative;transition:color .3s}
.nav-link::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:linear-gradient(90deg,#6366f1,#a855f7);transition:width .3s}
.nav-link:hover::after{width:100%}
.icon-hover{transition:all .3s;display:inline-block}
.icon-hover:hover{transform:rotate(360deg) scale(1.2);color:#6366f1}
.tag{transition:all .3s}
.tag:hover{transform:scale(1.1);box-shadow:0 5px 15px rgba(99,102,241,.3)}
.progress-container{position:relative}
.progress-glow{position:absolute;top:0;left:0;height:100%;width:0;background:rgba(99,102,241,.3);filter:blur(10px);transition:width 1.5s cubic-bezier(.4,0,.2,1)}
.social-icon{transition:all .4s;display:inline-block}
.social-icon:hover{transform:translateY(-10px) rotate(10deg);color:#6366f1;filter:drop-shadow(0 10px 20px rgba(99,102,241,.5))}
.gradient-border{position:relative;border:1px solid transparent;background-clip:padding-box}
.dark .gradient-border{background:linear-gradient(145deg,rgba(99,102,241,.1),rgba(168,85,247,.1))}
.light .gradient-border{background:linear-gradient(145deg,rgba(99,102,241,.05),rgba(168,85,247,.05))}
.gradient-border::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:2px;background:linear-gradient(145deg,#6366f1,#a855f7);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.5;transition:opacity .3s}
.gradient-border:hover::before{opacity:1}
input:focus,textarea:focus{box-shadow:0 0 0 3px rgba(99,102,241,.3);transform:scale(1.02)}
.btn-glow{box-shadow:0 0 20px rgba(99,102,241,.5);transition:all .3s}
.btn-glow:hover{box-shadow:0 0 40px rgba(99,102,241,.8);transform:scale(1.05)}
.journey-path{position:absolute;left:50%;transform:translateX(-50%);width:4px;background:linear-gradient(180deg,#6366f1,#a855f7,#ec4899);height:0;transition:height 1s ease-out;border-radius:4px;box-shadow:0 0 20px rgba(99,102,241,.8)}
.journey-item{opacity:0;transform:translateX(-100px);transition:all .8s cubic-bezier(.34,1.56,.64,1)}
.journey-item.visible{opacity:1;transform:translateX(0);animation:slideIn .8s ease-out}
.journey-item:nth-child(even){transform:translateX(100px)}
.journey-item:nth-child(even).visible{transform:translateX(0)}
.journey-dot{position:absolute;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#a855f7);animation:glow 2s infinite;z-index:10;border:4px solid;transition:border-color .3s}
.dark .journey-dot{border-color:#0f172a}
.light .journey-dot{border-color:#f8fafc}
.journey-pulse{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;background:rgba(99,102,241,.3);animation:pulse-ring 2s infinite}
@keyframes pulse-ring{0%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(3);opacity:0}}
.project-iframe{width:100%;height:300px;border:none;border-radius:12px;transition:all .3s}
.project-card:hover .project-iframe{transform:scale(1.02)}
.project-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s;border-radius:12px;cursor:pointer}
.dark .project-overlay{background:rgba(15,23,42,.95)}
.light .project-overlay{background:rgba(248,250,252,.95)}
.project-card:hover .project-overlay{opacity:1}
.theme-toggle{w-12;h-12;rounded:full;bg-gradient-to-r;from-indigo-600;to-purple-600;border:none;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;font-size:20px}
.theme-toggle:hover{transform:scale(1.1)}
.dark{background-color:#0f172a;color:#e5e7eb}
.light{background-color:#f8fafc;color:#1e293b}
.dark nav{background-color:rgba(15,23,42,.8);border-color:#1e293b}
.light nav{background-color:rgba(248,250,252,.8);border-color:#cbd5e1}
.light nav,.light .nav-link{color:#1e293b}
.dark .input{background-color:#1e293b;border-color:#334155;color:#e5e7eb}
.light .input{background-color:#f1f5f9;border-color:#cbd5e1;color:#1e293b}
.dark .input:focus{border-color:#6366f1}
.light .input:focus{border-color:#6366f1}
.dark .bg-slate-800{background-color:#1e293b}
.light .bg-slate-800{background-color:#e2e8f0}
.dark .bg-slate-700{background-color:#334155}
.light .bg-slate-700{background-color:#cbd5e1}
.dark .text-gray-400{color:#9ca3af}
.light .text-gray-400{color:#64748b}
.dark .text-gray-300{color:#d1d5db}
.light .text-gray-300{color:#475569}
.dark .border-slate-800{border-color:#1e293b}
.light .border-slate-800{border-color:#cbd5e1}
.dark .border-slate-700{border-color:#334155}
.light .border-slate-700{border-color:#cbd5e1}
.dark footer{background-color:#0f172a;border-color:#1e293b}
.light footer{background-color:#f8fafc;border-color:#cbd5e1}






@keyframes slideIn{from{transform:translateX(-20px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.code-line{opacity:0;animation:slideIn .6s ease-out forwards}
.cursor{display:inline-block;width:2px;height:1em;background:#00ff99;margin-left:2px;animation:blink 1s infinite}
.gradient-bg{background:linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#334155 100%)}
.code-window{background:rgba(30,30,30,.95);backdrop-filter:blur(10px)}
.glow{box-shadow:0 0 30px rgba(0,255,153,.1);transition:all .5s}
.glow:hover{box-shadow:0 0 50px rgba(0,255,153,.2)}




html {
  scrollbar-width: thin;
  scrollbar-color: #6366f1 rgba(0,0,0,0.1);
}

body::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

body::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.05);
  border-radius: 10px;
}

body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6366f1, #a855f7);
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(99,102,241,0.5);
  transition: all 0.3s ease;
}

body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #a855f7, #ec4899);
  box-shadow: 0 0 40px rgba(168,85,247,0.8);
}

body::-webkit-scrollbar-corner {
  background: transparent;
}

.dark html {
  scrollbar-color: #a855f7 rgba(15,23,42,0.2);
}

.light html {
  scrollbar-color: #6366f1 rgba(248,250,252,0.2);
}
/* Hide scrollbar for WebKit browsers */
::-webkit-scrollbar {
  display: none;
}

/* Firefox */
html {
  scrollbar-width: none;
}

/* IE / old Edge */
body {
  -ms-overflow-style: none;
}

/* Chrome, Safari, Edge */
::-webkit-scrollbar {
  display: none;
}

/* Firefox */
* {
  scrollbar-width: none;
}