html,
 body {
     background-color: #0a192f;
     color: #ccd6f6;
     cursor: none;
 }

 .cursor-outer,
 .cursor-inner {
     position: fixed;
     border-radius: 9999px;
     pointer-events: none;
     z-index: 9999;
 }

 .cursor-outer {
     width: 200px;
     height: 200px;
     background: rgba(255, 255, 255, 0.08);
     transform: translate(-50%, -50%);
     transition: transform 0.1s ease-out, opacity 0.3s ease;
 }

 .cursor-inner {
     width: 18px;
     height: 18px;
     background: rgba(0, 172, 255, 0.9);
     box-shadow: 0 0 10px rgba(0, 172, 255, 0.9);
     transform: translate(-50%, -50%);
     transition: transform 0.05s ease;
 }

 .animate-on-scroll {
     opacity: 0;
     transform: translateY(40px);
     transition: all 0.6s ease-out;
 }

 .animate-on-scroll.animate {
     opacity: 1;
     transform: translateY(0);
 }

 .slide-in-left {
     opacity: 0;
     transform: translateX(-60px);
     transition: all 0.8s ease;
 }

 .slide-in-left.animate {
     opacity: 1;
     transform: translateX(0);
 }

 .fade-in-up {
     opacity: 0;
     transform: translateY(20px);
     animation: fadeInUp 0.6s forwards;
 }

 @keyframes fadeInUp {
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .project-card {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     opacity: 0;
     transform: translate(-80px, -80px);
 }

 .project-card.animate {
     opacity: 1;
     transform: translate(0, 0);
     transition: transform 0.8s ease, opacity 0.8s ease;
 }

 .project-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 10px 20px rgba(0, 172, 255, 0.15);
 }

 .hero-text {
     animation: fadeInUp 0.8s ease forwards;
     opacity: 0;
 }

 .github-button {
     margin-top: 0.75rem;
     display: inline-block;
     padding: 0.5rem 1.25rem;
     border: 1px solid #38bdf8;
     color: #38bdf8;
     border-radius: 0.375rem;
     transition: transform 0.3s ease, background 0.3s ease;
 }

 .github-button:hover {
     transform: translateX(8px);
     background: rgba(56, 189, 248, 0.1);
 }

 @keyframes socialsDrop {
     from {
         opacity: 0;
         transform: translateY(-20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .animate-socials {
     animation: socialsDrop 0.6s forwards;
     animation-delay: 1s;
 }