/* Global Enhancements: particles, cursor, progress, glass, banner, grain */

body {
     position: relative;
     min-height: 100vh;
     background:
          radial-gradient(circle at 10% 20%, hsla(42, 96%, 62%, 0.09), transparent 38%),
          radial-gradient(circle at 88% 80%, hsla(190, 87%, 66%, 0.07), transparent 45%),
          var(--smoky-black);
}

body::before {
     content: "";
     position: fixed;
     inset: 0;
     background: linear-gradient(120deg,
               hsla(42, 96%, 62%, 0.09),
               transparent 35%,
               hsla(190, 87%, 66%, 0.07) 60%,
               transparent 85%);
     background-size: 250% 250%;
     animation: gradientMeshShift 18s ease-in-out infinite;
     pointer-events: none;
     z-index: -3;
}

@keyframes gradientMeshShift {
     0% {
          background-position: 0% 50%;
     }

     50% {
          background-position: 100% 50%;
     }

     100% {
          background-position: 0% 50%;
     }
}

.particles-canvas {
     position: fixed;
     inset: 0;
     width: 100%;
     height: 100%;
     z-index: -2;
     pointer-events: none;
     opacity: 0.4;
}

.scroll-progress {
     position: fixed;
     top: 0;
     left: 0;
     height: 3px;
     width: 0%;
     z-index: 150;
     background: linear-gradient(90deg, var(--orange-yellow-crayola), var(--vegas-gold));
     box-shadow: 0 0 12px hsla(42, 96%, 62%, 0.52);
}

.cursor-dot,
.cursor-ring {
     position: fixed;
     top: 0;
     left: 0;
     border-radius: 50%;
     pointer-events: none;
     z-index: 200;
     transform: translate3d(0, 0, 0);
     opacity: 0;
     transition: opacity 0.2s ease;
}

.cursor-dot {
     width: 8px;
     height: 8px;
     background: var(--orange-yellow-crayola);
     box-shadow: 0 0 15px hsla(42, 96%, 62%, 0.8);
}

.cursor-ring {
     width: 34px;
     height: 34px;
     border: 1px solid hsla(42, 96%, 62%, 0.55);
     box-shadow: 0 0 20px hsla(42, 96%, 62%, 0.25);
}

.cursor-active .cursor-dot,
.cursor-active .cursor-ring {
     opacity: 1;
}

.cursor-hover .cursor-ring {
     border-color: var(--orange-yellow-crayola);
     box-shadow: 0 0 28px hsla(42, 96%, 62%, 0.45);
}

.hire-banner {
     position: sticky;
     top: 10px;
     z-index: 90;
     margin: 12px auto 0;
     max-width: 1180px;
     background: linear-gradient(120deg, hsla(42, 96%, 62%, 0.2), hsla(190, 87%, 66%, 0.14));
     border: 1px solid hsla(42, 96%, 62%, 0.35);
     border-radius: var(--radius-lg);
     padding: 10px 14px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 12px;
     backdrop-filter: blur(12px);
}

.hire-banner p {
     color: var(--white-2);
     font-size: var(--fs-7);
     line-height: 1.5;
}

.visitor-count {
     display: inline;
     color: var(--orange-yellow-crayola);
     font-weight: var(--fw-600);
     margin-left: 8px;
}

.hire-banner-close {
     width: 32px;
     height: 32px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     color: var(--white-2);
     background: hsla(0, 0%, 0%, 0.18);
     transition: var(--transition-1);
}

.hire-banner-close:hover {
     color: var(--smoky-black);
     background: var(--orange-yellow-crayola);
}

.hire-banner.hide {
     display: none;
}

/* Glassmorphism + grain overlay for cards */
.sidebar,
.main-content > article,
.content-card,
.service-item,
.project-item > a,
.skills-item,
.timeline-card,
.tech-item,
.blog-post-item > a,
.project-modal,
.companies-modal,
.map-info,
.stat-item,
.certification-item {
     background: linear-gradient(145deg, hsla(0, 0%, 100%, 0.04), hsla(0, 0%, 100%, 0.015));
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border-color: hsla(0, 0%, 100%, 0.14);
     box-shadow: 0 12px 30px hsla(0, 0%, 0%, 0.24), 0 0 0 1px hsla(45, 100%, 72%, 0.08) inset;
}

.sidebar::after,
.main-content > article::after,
.content-card::after,
.service-item::after,
.project-item > a::after,
.skills-item::after,
.timeline-card::after,
.tech-item::after,
.blog-post-item > a::after,
.project-modal::after,
.companies-modal::after,
.stat-item::after,
.certification-item::after {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: inherit;
     background-image: radial-gradient(rgba(255, 255, 255, 0.035) 0.8px, transparent 0.8px);
     background-size: 3px 3px;
     opacity: 0.26;
     pointer-events: none;
}

/* Light theme card overrides */
html[data-theme="light"] .sidebar,
html[data-theme="light"] .main-content > article,
html[data-theme="light"] .content-card,
html[data-theme="light"] .service-item,
html[data-theme="light"] .project-item > a,
html[data-theme="light"] .skills-item,
html[data-theme="light"] .timeline-card,
html[data-theme="light"] .tech-item,
html[data-theme="light"] .blog-post-item > a,
html[data-theme="light"] .project-modal,
html[data-theme="light"] .companies-modal,
html[data-theme="light"] .stat-item,
html[data-theme="light"] .certification-item {
     background: linear-gradient(145deg, hsla(0, 0%, 100%, 0.88), hsla(210, 30%, 98%, 0.75));
     border-color: hsla(218, 22%, 74%, 0.55);
     box-shadow: 0 8px 28px hsla(214, 30%, 20%, 0.09), 0 0 0 1px hsla(42, 80%, 60%, 0.10) inset;
}

html[data-theme="light"] .sidebar::after,
html[data-theme="light"] .main-content > article::after,
html[data-theme="light"] .content-card::after,
html[data-theme="light"] .service-item::after,
html[data-theme="light"] .project-item > a::after,
html[data-theme="light"] .skills-item::after,
html[data-theme="light"] .timeline-card::after,
html[data-theme="light"] .tech-item::after,
html[data-theme="light"] .blog-post-item > a::after,
html[data-theme="light"] .stat-item::after,
html[data-theme="light"] .certification-item::after {
     background-image: radial-gradient(rgba(0, 0, 0, 0.025) 0.8px, transparent 0.8px);
     opacity: 0.35;
}

html[data-theme="light"] body {
     background:
          radial-gradient(circle at 10% 20%, hsla(42, 96%, 62%, 0.10), transparent 40%),
          radial-gradient(circle at 88% 80%, hsla(190, 87%, 66%, 0.08), transparent 46%),
          var(--smoky-black);
}

html[data-theme="light"] body::before {
     background: linear-gradient(120deg,
               hsla(42, 96%, 62%, 0.08),
               transparent 32%,
               hsla(190, 87%, 66%, 0.07) 62%,
               transparent 86%);
}

html[data-theme="light"] .particles-canvas {
     opacity: 0.3;
}

h1,
h2,
h3,
h4,
h5,
.h1,
.h2,
.h3,
.h4,
.h5 {
     font-family: var(--ff-heading);
}

.project-item,
.blog-post-item,
.skills-item,
.timeline-item,
.certification-item,
.service-item,
.tech-item {
     transition: transform 0.3s ease, opacity 0.3s ease;
}

.lazy-blur {
     filter: blur(8px);
     transform: scale(1.02);
     transition: filter 0.4s ease, transform 0.4s ease, opacity 0.4s ease;
     opacity: 0.85;
}

.lazy-blur.loaded {
     filter: blur(0);
     transform: scale(1);
     opacity: 1;
}

@media (max-width: 1023px), (pointer: coarse) {
     .cursor-dot,
     .cursor-ring {
          display: none;
     }
}

@media (max-width: 767px) {
     .hire-banner {
          margin: 8px 12px;
          top: 8px;
          padding: 8px 10px;
     }

     .hire-banner p {
          font-size: var(--fs-8);
     }
}

@media (prefers-reduced-motion: reduce) {
     body::before {
          animation: none;
     }
}