/* ==================================================================
   PREMIUM 2026 VISUAL LAYER
   Purpose: elevate the existing template to a 2026 premium standard
   WITHOUT touching brand colors, fonts, or structure.
   Loaded after style.css — everything here only refines what exists.
   ================================================================== */

:root {
	/* Reuses your existing brand tokens, adds refinement layers on top */
	--radius-sm: 10px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
	--glass-bg: rgba(255, 255, 255, 0.65);
	--glass-border: rgba(255, 255, 255, 0.4);
	--glow-primary: 0 20px 60px -15px rgba(36, 123, 160, 0.35);
	--glow-dark: 0 25px 70px -20px rgba(4, 8, 54, 0.45);
}

/* ---------- Scroll performance fix: background-attachment:fixed forces an ---------- */
/* expensive repaint on every scroll frame. Disabling it (keeping the same   */
/* visual cover/center look) is the single biggest fix for scroll jank here. */
.bg-fixed {
	background-attachment: scroll !important;
}

/* ---------- Visually-hidden utility (this theme's Bootstrap build omits it) ---------- */
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ---------- Global feel: smoother, calmer motion everywhere ---------- */
html {
	scroll-behavior: smooth;
}

::selection {
	background: var(--color-primary);
	color: var(--white);
}

/* Slim, on-brand scrollbar instead of the default browser bar */
::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: var(--bg-gray);
}

::-webkit-scrollbar-thumb {
	background: var(--bg-gradient);
	border-radius: 10px;
}

/* Visible, on-brand focus ring for keyboard users (accessibility + polish) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------- Buttons: more premium press/hover feel ---------- */
.btn {
	transition: transform 0.45s var(--ease-premium), box-shadow 0.45s var(--ease-premium), background 0.45s var(--ease-premium), color 0.3s ease !important;
	will-change: transform;
}

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

.btn.btn-dark {
	box-shadow: var(--glow-dark);
}

.btn.btn-dark:hover {
	box-shadow: 0 30px 80px -18px rgba(4, 8, 54, 0.55);
}

/* New secondary CTA style for pairing buttons (e.g. hero "Resume" + "Contact") */
.btn.btn-outline-premium {
	background: transparent;
	border: 1.5px solid var(--color-primary);
	color: var(--color-primary);
}

.btn.btn-outline-premium:hover {
	background: var(--color-primary);
	color: var(--white);
	box-shadow: var(--glow-primary);
}

/* ---------- Section headings: more editorial rhythm ---------- */
.site-heading .sub-title {
	display: inline-block;
	padding: 6px 18px;
	border-radius: 100px;
	background: rgba(36, 123, 160, 0.08);
	background-clip: border-box !important;
	-webkit-background-clip: border-box !important;
	-webkit-text-fill-color: var(--color-primary) !important;
	color: var(--color-primary) !important;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
}

.site-heading .title {
	letter-spacing: -0.02em;
}

.site-heading .devider {
	background: var(--bg-gradient) !important;
	height: 3px !important;
	border-radius: 3px;
}

.site-heading .devider::before {
	height: 3px !important;
	top: 0;
	border-radius: 3px;
	background: var(--bg-gradient) !important;
}

/* ---------- Hero / Banner: layered premium depth ---------- */
/* Note: intentionally NOT setting position/overflow on .banner-style-one itself --
   that previously broke .personal-social, which relies on this section staying
   unpositioned (its original design used the viewport as containing block). */

.banner-style-one .thumb {
	overflow: visible;
}

.banner-style-one .thumb::before,
.banner-style-one .thumb::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.3;
	pointer-events: none;
	z-index: -1;
}

.banner-style-one .thumb::before {
	width: 340px;
	height: 340px;
	background: var(--color-primary);
	top: -60px;
	right: 40px;
}

.banner-style-one .thumb::after {
	width: 260px;
	height: 260px;
	background: var(--color-secondary);
	bottom: 20px;
	left: 20px;
}

.banner-style-one .info h2 {
	letter-spacing: -0.03em;
}

.banner-style-one .thumb img {
	filter: drop-shadow(0 40px 60px rgba(4, 8, 54, 0.25));
	transition: transform 0.6s var(--ease-premium);
}

.banner-style-one .thumb:hover img {
	transform: translateY(-8px);
}

/* Small "available for work" style badge, if added above the H1 */
.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 100px;
	background: var(--glass-bg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--glass-border);
	box-shadow: var(--box-shadow-regular);
	font-size: 13px;
	font-weight: 600;
	color: var(--color-secondary);
	margin-bottom: 20px;
}

.hero-badge .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
	animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
	0% {
		box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
	}
	70% {
		box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
	}
}

/* ---------- Services: turn plain columns into premium glass cards ---------- */
.service-style-one {
	border-right: none !important;
	margin-bottom: 30px;
	padding: 0 15px;
}

.service-style-one-item {
	background: var(--white);
	border-radius: var(--radius-lg);
	padding: 45px 35px !important;
	height: 100%;
	box-shadow: var(--box-shadow-regular);
	border: 1px solid rgba(4, 8, 54, 0.05);
	transition: transform 0.5s var(--ease-premium), box-shadow 0.5s var(--ease-premium), border-color 0.5s var(--ease-premium);
	position: relative;
}

.service-style-one-item:hover {
	transform: translateY(-10px);
	box-shadow: var(--glow-primary);
	border-color: rgba(36, 123, 160, 0.25);
}

.service-style-one-item img {
	height: 56px;
	margin-bottom: 26px;
	padding: 14px;
	box-sizing: content-box;
	border-radius: var(--radius-md);
	background: rgba(36, 123, 160, 0.08);
	transition: background 0.4s var(--ease-premium), transform 0.4s var(--ease-premium);
}

.service-style-one-item:hover img {
	background: var(--bg-gradient);
	transform: scale(1.05) rotate(-4deg);
}

.service-style-one-item h4 a {
	transition: color 0.3s ease;
}

.service-style-one-item p {
	color: var(--color-paragraph);
	line-height: 1.75;
}

/* ---------- Sticky header: soft glass instead of flat fill ---------- */
header.header-fixed {
	background: rgba(255, 255, 255, 0.7) !important;
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	box-shadow: 0 8px 32px rgba(4, 8, 54, 0.08) !important;
}

/* ---------- Contact form: premium input feel ---------- */
.contact-form .form-control {
	border-radius: var(--radius-sm) !important;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form .form-control:focus {
	box-shadow: 0 0 0 4px rgba(36, 123, 160, 0.12);
	border-color: var(--color-primary) !important;
}

.contact-form button#submit {
	transition: transform 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium);
}

.contact-form button#submit:hover {
	transform: translateY(-3px);
	box-shadow: var(--glow-primary);
}

.alert-notification .alert-error {
	border-radius: var(--radius-sm);
	animation: shake-once 0.4s ease;
}

@keyframes shake-once {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-6px); }
	75% { transform: translateX(6px); }
}

/* ---------- Motion respect: honor reduced-motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Hero CTA row: clean stacking on small screens ---------- */
.banner-style-one .button {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.banner-style-one .button a {
	margin-left: 0 !important;
}

@media (max-width: 480px) {
	.banner-style-one .button {
		flex-direction: column;
	}

	.banner-style-one .button a {
		width: 100%;
		text-align: center;
	}
}

/* ---------- Back to top button ---------- */
#back-to-top {
	position: fixed;
	right: 30px;
	bottom: 30px;
	width: 48px;
	height: 48px;
	padding: 0;
	margin: 0;
	border-radius: 50%;
	border: none;
	background: var(--bg-gradient);
	color: var(--white);
	font-size: 16px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 20px rgba(4, 8, 54, 0.25);
	opacity: 0;
	visibility: hidden;
	transform: translateY(15px);
	transition: opacity 0.35s var(--ease-premium), transform 0.35s var(--ease-premium), visibility 0.35s, box-shadow 0.35s var(--ease-premium);
	z-index: 999;
}

#back-to-top i {
	display: block;
	line-height: 1;
}

#back-to-top.visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

#back-to-top:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 28px rgba(4, 8, 54, 0.35);
}

/* ---------- Footer: subtle premium top border + spacing ---------- */
footer.bg-dark {
	position: relative;
	padding: 45px 0;
}

footer.bg-dark::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--bg-gradient);
}

footer.bg-dark .footer-social a {
	transition: transform 0.35s var(--ease-premium), background 0.35s var(--ease-premium);
}

footer.bg-dark .footer-social a:hover {
	transform: translateY(-4px);
}

/* ---------- Portfolio laptop mockups: subtle glow border + browser chrome dots ---------- */
.laptop {
	transition: transform 0.5s var(--ease-premium), box-shadow 0.5s var(--ease-premium);
}

.laptop:hover {
	transform: translateY(-6px);
	box-shadow: var(--glow-primary);
}

.laptop::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 18px;
	background: #e9e9e9;
	z-index: 2;
}

.laptop::after {
	content: "• • •";
	position: absolute;
	top: -1px;
	left: 10px;
	font-size: 10px;
	letter-spacing: 2px;
	color: #b8b8b8;
	z-index: 3;
	line-height: 18px;
}

.laptop .content {
	margin-top: 18px;
	height: calc(100% - 18px);
}

/* ---------- Nav links: animated underline micro-interaction ---------- */
.navbar-nav .smooth-menu,
.header-fixed .menu .smooth-menu {
	position: relative;
}

.navbar-nav .smooth-menu::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 0;
	height: 2px;
	background: var(--bg-gradient);
	transition: width 0.35s var(--ease-premium);
}

.navbar-nav .smooth-menu:hover::after {
	width: 100%;
}

/* ---------- Responsive guards for the new decorative blobs ---------- */
@media (max-width: 991px) {
	.banner-style-one .thumb::before,
	.banner-style-one .thumb::after {
		width: 200px;
		height: 200px;
		filter: blur(60px);
	}
}