/* ==================================================================
   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);
	}
}

/* ==========================================================================
   Full-page project walkthroughs — browser-framed cards that scroll the
   entire live website top-to-bottom on hover (pure CSS, works for any height).
   ========================================================================== */
.project-showcase { padding: 70px 0 10px; }
.showcase-head { text-align: center; max-width: 660px; margin: 0 auto 48px; }
.showcase-head .sub-title { display: inline-block; margin-bottom: 12px; }
.showcase-head .title { font-size: 34px; line-height: 1.25; margin-bottom: 14px; }
.showcase-head p { color: #6c7c85; font-size: 15px; margin: 0; }

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}
@media (min-width: 1200px) {
    .showcase-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}
@media (max-width: 575px) {
    .showcase-grid { grid-template-columns: 1fr; }
    .showcase-head .title { font-size: 26px; }
}

.showcase-card {
    background: #fff;
    border: 1px solid rgba(12, 75, 117, .09);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 40px -22px rgba(12, 75, 117, .38);
    transition: transform .45s var(--ease-premium, ease), box-shadow .45s var(--ease-premium, ease);
}
.showcase-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 34px 66px -24px rgba(12, 75, 117, .5);
}

/* Browser chrome bar */
.showcase-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 14px;
    background: linear-gradient(90deg, #0c4b75, #247ba0);
}
.showcase-bar span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .5); }
.showcase-bar span:nth-child(1) { background: #ff5f57; }
.showcase-bar span:nth-child(2) { background: #febc2e; }
.showcase-bar span:nth-child(3) { background: #28c840; }
.showcase-bar em {
    margin-left: auto;
    font-style: normal;
    font-size: 11px;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .92);
    font-family: 'JetBrains Mono', monospace;
}

/* The scrolling viewport. background-position % maps top->bottom for ANY image
   height, so the whole page reveals on hover with no JavaScript. */
.showcase-frame {
    display: block;
    position: relative;
    height: 360px;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
    transition: background-position 6s ease;
    cursor: pointer;
}
.showcase-card:hover .showcase-frame { background-position: center bottom; }

.showcase-hint {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 30px;
    background: rgba(12, 75, 117, .82);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: opacity .35s ease;
    pointer-events: none;
}
.showcase-card:hover .showcase-hint { opacity: 0; }

.showcase-foot { padding: 16px 18px 18px; }
.showcase-foot h4 { margin: 0 0 3px; font-size: 18px; line-height: 1.3; }
.showcase-foot span { font-size: 12.5px; color: #7a8b95; }

@media (prefers-reduced-motion: reduce) {
    .showcase-frame { transition: none; }
    .showcase-card:hover .showcase-frame { background-position: center top; }
}

/* ---------- Single back-to-top only: hide the old theme progress circle ---------- */
.progress-wrap { display: none !important; }

/* ---------- Portfolio showcase without the (removed) heading block ---------- */
.project-showcase.no-head { padding-top: 26px; }

/* Brand carousel: clip the slide track so it never causes page-wide
   horizontal scrolling at tablet widths. */
.brand5col { overflow: hidden; }

/* Resume tab navigation: let the grid reflow on tablet/phone instead of
   pushing the page wider than the viewport. */
.resume-tab-navs > .nav-link { min-width: 0; }
@media (max-width: 991px) {
    .resume-tab-navs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 575px) {
    .resume-tab-navs { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Final guard: never allow a sliver of horizontal scroll from grid gutters. */
body { overflow-x: hidden; }

/* Discreet admin entry point in the footer (the panel itself is password
   protected, so this is just a convenient way in from the home page). */
.footer-admin-link {
    margin-left: 14px;
    padding-left: 14px;
    border-left: 1px solid rgba(255, 255, 255, .28);
    color: rgba(255, 255, 255, .55) !important;
    font-size: 13px;
    text-decoration: none;
    transition: color .25s ease;
}
.footer-admin-link:hover { color: #fff !important; }

/* Official X logo (inline SVG, so it never depends on the Font Awesome
   version shipped with the theme). Inherits size and colour like an icon. */
.x-logo {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    fill: currentColor;
}