/* Hum aur Code — Bootstrap + custom theme & motion */

:root,
[data-bs-theme="light"] {
	--hc-accent: #6366f1;
	--hc-accent-2: #8b5cf6;
	--hc-accent-soft: rgba(99, 102, 241, 0.12);
	--hc-accent-emphasis: #4f46e5;
	--hc-bg-muted: #f4f6fb;
	--hc-orbit: rgba(99, 102, 241, 0.15);
	--hc-glow: rgba(99, 102, 241, 0.35);
	/* Inline “IDE” colors for homepage code sample */
	--syn-type: #b45309;
	--syn-var: #be185d;
	--syn-call: #0369a1;
	--syn-str: #15803d;
	--syn-punct: #64748b;
	--syn-cmt: #64748b;
}

[data-bs-theme="dark"] {
	--hc-accent: #818cf8;
	--hc-accent-2: #c084fc;
	--hc-accent-soft: rgba(129, 140, 248, 0.18);
	--hc-accent-emphasis: #a5b4fc;
	--hc-bg-muted: #12141c;
	--hc-orbit: rgba(129, 140, 248, 0.12);
	--hc-glow: rgba(129, 140, 248, 0.4);
	--syn-type: #fcd34d;
	--syn-var: #f9a8d4;
	--syn-call: #7dd3fc;
	--syn-str: #86efac;
	--syn-punct: #94a3b8;
	--syn-cmt: #64748b;
	color-scheme: dark;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: "DM Sans", system-ui, sans-serif;
}

.font-mono {
	font-family: "JetBrains Mono", ui-monospace, monospace;
}

.text-accent {
	color: var(--hc-accent) !important;
}

.bg-accent-soft {
	background-color: var(--hc-accent-soft) !important;
}

.text-accent-emphasis {
	color: var(--hc-accent-emphasis) !important;
}

.text-gradient {
	background: linear-gradient(120deg, var(--hc-accent), var(--hc-accent-2));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.btn-accent {
	--bs-btn-bg: var(--hc-accent);
	--bs-btn-border-color: var(--hc-accent);
	--bs-btn-hover-bg: var(--hc-accent-emphasis);
	--bs-btn-hover-border-color: var(--hc-accent-emphasis);
	--bs-btn-active-bg: var(--hc-accent-emphasis);
	--bs-btn-active-border-color: var(--hc-accent-emphasis);
	--bs-btn-color: #fff;
	--bs-btn-hover-color: #fff;
	font-weight: 600;
	border-radius: 999px;
	box-shadow: 0 8px 24px var(--hc-glow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-accent:hover {
	transform: translateY(-2px);
}

.site-header {
	background: color-mix(in srgb, var(--bs-body-bg) 88%, transparent);
	backdrop-filter: blur(10px);
	z-index: 1030;
}

.site-header .nav-link {
	font-weight: 500;
	border-radius: 0.5rem;
	padding: 0.4rem 0.75rem !important;
	transition: background 0.2s ease, color 0.2s ease;
}

.site-header .nav-link:hover {
	background: var(--hc-accent-soft);
}

.site-header .nav-link.active {
	color: var(--hc-accent) !important;
	background: var(--hc-accent-soft);
	font-weight: 600;
}

.brand-glow {
	text-shadow: 0 0 28px var(--hc-glow);
}

.section-muted {
	background: var(--hc-bg-muted);
	border-block: 1px solid var(--bs-border-color-translucent);
}

.hero-pad {
	padding-bottom: 4rem !important;
}

@media (min-width: 992px) {
	.hero-pad {
		padding-top: 5rem !important;
		padding-bottom: 5.5rem !important;
	}
}

.hero-section {
	background: radial-gradient(ellipse 80% 60% at 50% -10%, var(--hc-orbit), transparent 55%);
}

.hero-orbit {
	position: absolute;
	inset: -20% -10% auto;
	height: 70%;
	background: radial-gradient(circle, var(--hc-orbit), transparent 65%);
	animation: orbit-shift 14s ease-in-out infinite alternate;
	pointer-events: none;
}

@keyframes orbit-shift {
	0% {
		transform: translate3d(-4%, 0, 0) scale(1);
		opacity: 1;
	}
	100% {
		transform: translate3d(4%, 2%, 0) scale(1.05);
		opacity: 0.85;
	}
}

.hero-photo-wrap {
	position: relative;
	max-width: 420px;
}

.hero-ring {
	position: absolute;
	inset: -12px;
	border-radius: 1.25rem;
	background: linear-gradient(135deg, var(--hc-accent), var(--hc-accent-2), #22d3ee);
	opacity: 0.7;
	filter: blur(0px);
	animation: ring-pulse 4s ease-in-out infinite;
	z-index: 0;
}

@keyframes ring-pulse {
	0%,
	100% {
		transform: scale(1);
		opacity: 0.65;
	}
	50% {
		transform: scale(1.02);
		opacity: 0.85;
	}
}

.hero-photo {
	position: relative;
	z-index: 1;
	border: 4px solid color-mix(in srgb, var(--bs-body-bg) 70%, white);
}

[data-bs-theme="dark"] .hero-photo {
	border-color: color-mix(in srgb, var(--bs-body-bg) 80%, var(--hc-accent));
}

.hero-badge {
	bottom: -0.25rem;
	right: 0.5rem;
	z-index: 2;
	animation: badge-bob 3s ease-in-out infinite;
}

@keyframes badge-bob {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-6px);
	}
}

.anim-hero-photo {
	animation: hero-enter 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes hero-enter {
	from {
		opacity: 0;
		transform: translate3d(24px, 20px, 0) scale(0.94);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
}

.anim-hero-text .badge,
.anim-hero-text h1,
.anim-hero-text .lead,
.anim-hero-text .d-flex,
.anim-hero-text .row {
	animation: rise-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.anim-hero-text h1 {
	animation-delay: 0.08s;
}
.anim-hero-text .lead {
	animation-delay: 0.16s;
}
.anim-hero-text .d-flex {
	animation-delay: 0.22s;
}
.anim-hero-text .row {
	animation-delay: 0.3s;
}

.anim-float-label {
	animation: float-lbl 3.5s ease-in-out infinite;
}

@keyframes float-lbl {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-4px);
	}
}

@keyframes rise-in {
	from {
		opacity: 0;
		transform: translate3d(0, 18px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.anim-rise {
	animation: rise-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.anim-rise-delay {
	animation: rise-in 0.85s 0.12s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.anim-fade-in {
	animation: rise-in 0.6s ease both;
}

.anim-count {
	animation: pop-in 0.6s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes pop-in {
	from {
		opacity: 0;
		transform: scale(0.6);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.anim-pulse-btn {
	animation: pulse-shadow 2.5s ease-in-out infinite;
}

@keyframes pulse-shadow {
	0%,
	100% {
		box-shadow: 0 8px 24px var(--hc-glow);
	}
	50% {
		box-shadow: 0 10px 36px var(--hc-glow);
	}
}

.tech-pill {
	background: var(--bs-body-bg);
	border: 1px solid var(--bs-border-color-translucent);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.tech-pill:hover {
	transform: translateY(-4px) scale(1.02);
	border-color: var(--hc-accent);
	box-shadow: 0 12px 28px var(--hc-glow);
}

.code-block {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 0.85rem;
	line-height: 1.6;
	background: var(--hc-bg-muted);
	border-radius: 0.75rem;
	padding: 1rem 1.25rem;
	color: var(--bs-body-color);
}

.code-block--syntax code {
	display: block;
	white-space: pre;
	tab-size: 4;
}

.code-block--syntax .syn-type {
	color: var(--syn-type);
	font-weight: 600;
}

.code-block--syntax .syn-var {
	color: var(--syn-var);
	font-weight: 500;
}

.code-block--syntax .syn-call {
	color: var(--syn-call);
	font-weight: 500;
}

.code-block--syntax .syn-str {
	color: var(--syn-str);
}

.code-block--syntax .syn-punct {
	color: var(--syn-punct);
}

.code-block--syntax .syn-cmt {
	color: var(--syn-cmt);
	font-style: italic;
}

.note-card,
.blog-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.note-card:hover,
.blog-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.1) !important;
}

[data-bs-theme="dark"] .note-card:hover,
[data-bs-theme="dark"] .blog-card:hover {
	box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.45) !important;
}

.blog-body p:last-child {
	margin-bottom: 0;
}

.blog-body img {
	max-width: 100%;
	height: auto;
	border-radius: 0.5rem;
	margin: 1rem 0;
}

.blog-card-cover img,
.blog-cover img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/* Theme toggle */
.theme-toggle {
	min-width: 2.75rem;
	position: relative;
}

.theme-icon-sun,
.theme-icon-moon {
	display: inline-block;
	transition: opacity 0.2s ease, transform 0.25s ease;
}

[data-bs-theme="light"] .theme-icon-sun {
	opacity: 0;
	transform: rotate(90deg) scale(0.5);
	position: absolute;
	pointer-events: none;
}

[data-bs-theme="light"] .theme-icon-moon {
	opacity: 1;
}

[data-bs-theme="dark"] .theme-icon-moon {
	opacity: 0;
	transform: rotate(-90deg) scale(0.5);
	position: absolute;
	pointer-events: none;
}

[data-bs-theme="dark"] .theme-icon-sun {
	opacity: 1;
}

/* Navbar toggler for dark theme */
.navbar-toggler {
	border-color: var(--bs-border-color);
}

.navbar-toggler-icon {
	filter: none;
}

[data-bs-theme="dark"] .navbar-toggler-icon {
	filter: invert(1) grayscale(100%);
}

.site-footer a {
	color: var(--bs-secondary-color);
}
.site-footer a:hover {
	color: var(--hc-accent);

}

.social-footer-icons .social-footer-link {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    color: var(--bs-body-color);
    background: rgba(255, 255, 255, 0.04);
    transition: all 0.3s ease;
    font-size: 1rem;
}

.social-footer-icons .social-footer-link:hover {
    transform: translateY(-3px);
    color: var(--bs-primary);
    background: rgba(255, 255, 255, 0.08);
}
/* =========================================
   TEAM PAGE
========================================= */

.team-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color-translucent);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
    position: relative;
}

.team-card:hover {
    transform: translateY(-6px);
    border-color: var(--hc-accent);
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.12) !important;
}

[data-bs-theme="dark"] .team-card:hover {
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.45) !important;
}


/* Team Image */

.team-image-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 320px;

    background:
        linear-gradient(
            135deg,
            rgba(99, 102, 241, 0.08),
            rgba(139, 92, 246, 0.08)
        );

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 1rem;
}

/* Full Image Visible */

.team-image {
    width: 100%;
    height: 100%;

    object-fit: contain;

    transition: transform 0.4s ease;
}

/* Smooth Hover */

.team-card:hover .team-image {
    transform: scale(1.03);
}

/* Responsive */

@media (max-width: 991.98px) {

    .team-image-wrapper {
        height: 300px;
    }

}

@media (max-width: 767.98px) {

    .team-image-wrapper {
        height: 260px;
    }

}

@media (max-width: 575.98px) {

    .team-image-wrapper {
        height: 220px;
        padding: 0.8rem;
    }

}

/* Skills */

.team-skill {
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    background: var(--hc-accent-soft);
    color: var(--hc-accent-emphasis);
    border: 1px solid rgba(99, 102, 241, 0.15);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Social Links */

.team-socials {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color-translucent);
}

.team-social-link {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    text-decoration: none;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--bs-body-color);
    background: rgba(255, 255, 255, 0.04);

    border: 1px solid var(--bs-border-color-translucent);

    transition:
        transform 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;

    font-size: 1rem;
}

.team-social-link:hover {
    transform: translateY(-4px);

    color: var(--hc-accent);

    border-color: var(--hc-accent);

    background: var(--hc-accent-soft);

    box-shadow: 0 10px 24px var(--hc-glow);
}

/* Responsive */

@media (max-width: 991.98px) {

    .team-image-wrapper {
        height: 300px;
    }

}

@media (max-width: 767.98px) {

    .team-card {
        max-width: 500px;
        margin-inline: auto;
    }

    .team-image-wrapper {
        height: 280px;
    }

}

@media (max-width: 575.98px) {

    .team-image-wrapper {
        height: 240px;
    }

    .team-socials {
        justify-content: center;
    }

    .team-social-link {
        width: 40px;
        height: 40px;
    }

    .team-skill {
        font-size: 0.78rem;
        padding: 0.5rem 0.85rem;
    }

}