/* =====================================================================
   DLB Revamp — Modern UI/UX layer (scoped to body.dlb-revamped)
   Aesthetic: deep-space aurora + glassmorphism + gradient type.
   Inspired by antigravity.google (fluid gradient) & vectra.ai (network).
   Non-destructive: layers over existing Kubio markup.
   ===================================================================== */

:root {
	--dlb-bg-0: #05060f;
	--dlb-bg-1: #090b1c;
	--dlb-bg-2: #0d1030;
	--dlb-ink: #eef2ff;
	--dlb-ink-soft: rgba(226, 232, 255, 0.72);
	--dlb-ink-dim: rgba(198, 208, 240, 0.55);
	--dlb-indigo: #6366f1;
	--dlb-violet: #a855f7;
	--dlb-cyan: #22d3ee;
	--dlb-pink: #ec4899;
	--dlb-blue: #3b82f6;
	--dlb-grad: linear-gradient(120deg, #818cf8 0%, #c084fc 38%, #22d3ee 72%, #38bdf8 100%);
	--dlb-grad-warm: linear-gradient(120deg, #a855f7 0%, #ec4899 55%, #f59e0b 100%);
	--dlb-glass: rgba(255, 255, 255, 0.045);
	--dlb-glass-2: rgba(255, 255, 255, 0.07);
	--dlb-border: rgba(255, 255, 255, 0.12);
	--dlb-border-str: rgba(255, 255, 255, 0.22);
	--dlb-radius: 20px;
	--dlb-radius-lg: 28px;
	--dlb-shadow: 0 24px 70px -18px rgba(2, 4, 18, 0.75);
	--dlb-glow: 0 0 44px -6px rgba(129, 140, 248, 0.55);
	--dlb-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */
body.dlb-revamped {
	background: var(--dlb-bg-0) !important;
	color: var(--dlb-ink);
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

body.dlb-revamped .wp-site-blocks,
body.dlb-revamped .entry-content {
	position: relative;
	z-index: 1;
	background: transparent !important;
}

/* Let the fixed aurora show through every Kubio section background. */
body.dlb-revamped .wp-block-kubio-section__outer,
body.dlb-revamped .wp-block-kubio-hero__outer,
body.dlb-revamped .wp-block-kubio-footer__container,
body.dlb-revamped .wp-block-kubio-header__container {
	background: transparent !important;
}

body.dlb-revamped .wp-block-kubio-section__outer > .background-wrapper,
body.dlb-revamped .wp-block-kubio-hero__outer > .background-wrapper {
	background: transparent !important;
	opacity: 1 !important;
}

/* Neutralise section *background* media/colour layers (not content images). */
body.dlb-revamped .background-wrapper .background-layer,
body.dlb-revamped .background-wrapper .overlay-layer,
body.dlb-revamped .background-wrapper .overlay-image-layer,
body.dlb-revamped .background-wrapper .background-layer-media-container-lg,
body.dlb-revamped .background-wrapper .background-layer-media-container-md {
	background-color: transparent !important;
	opacity: 1 !important;
}
body.dlb-revamped .background-wrapper .background-layer::before,
body.dlb-revamped .background-wrapper .background-layer::after {
	display: none !important;
}
/* Dim any leftover section background photos so text stays readable. */
body.dlb-revamped .background-wrapper img {
	opacity: 0.18 !important;
	filter: grayscale(0.3) brightness(0.7) contrast(1.05) !important;
	mix-blend-mode: luminosity;
}

/* ------------------------------------------------------------------ */
/* Animated background (aurora orbs + grid + particle canvas + noise)  */
/* ------------------------------------------------------------------ */
#dlb-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	background:
		radial-gradient(1200px 900px at 78% -10%, rgba(99, 102, 241, 0.16), transparent 60%),
		radial-gradient(1000px 800px at 8% 108%, rgba(34, 211, 238, 0.12), transparent 60%),
		linear-gradient(180deg, var(--dlb-bg-0) 0%, var(--dlb-bg-1) 45%, var(--dlb-bg-0) 100%);
}

#dlb-bg .dlb-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	opacity: 0.55;
	mix-blend-mode: screen;
	will-change: transform;
}
.dlb-orb--1 { width: 46vw; height: 46vw; left: -8vw; top: -6vw; background: radial-gradient(circle at 30% 30%, #6366f1, transparent 65%); animation: dlbOrb1 26s var(--dlb-ease) infinite; }
.dlb-orb--2 { width: 40vw; height: 40vw; right: -6vw; top: 4vw; background: radial-gradient(circle at 70% 30%, #a855f7, transparent 65%); animation: dlbOrb2 32s var(--dlb-ease) infinite; }
.dlb-orb--3 { width: 44vw; height: 44vw; left: 18vw; top: 40vh; background: radial-gradient(circle at 50% 50%, #22d3ee, transparent 62%); animation: dlbOrb3 30s var(--dlb-ease) infinite; }
.dlb-orb--4 { width: 34vw; height: 34vw; right: 6vw; bottom: -6vw; background: radial-gradient(circle at 50% 50%, #ec4899, transparent 62%); animation: dlbOrb4 36s var(--dlb-ease) infinite; }
.dlb-orb--5 { width: 30vw; height: 30vw; left: 40vw; bottom: 10vh; background: radial-gradient(circle at 50% 50%, #38bdf8, transparent 62%); animation: dlbOrb5 28s var(--dlb-ease) infinite; }

@keyframes dlbOrb1 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(8vw,6vh,0) scale(1.15); } }
@keyframes dlbOrb2 { 0%,100% { transform: translate3d(0,0,0) scale(1.1); } 50% { transform: translate3d(-7vw,8vh,0) scale(0.9); } }
@keyframes dlbOrb3 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-6vw,-9vh,0) scale(1.18); } }
@keyframes dlbOrb4 { 0%,100% { transform: translate3d(0,0,0) scale(1.05); } 50% { transform: translate3d(6vw,-6vh,0) scale(0.92); } }
@keyframes dlbOrb5 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-8vw,-4vh,0) scale(1.2); } }

#dlb-bg .dlb-grid {
	position: absolute;
	inset: -2px;
	background-image:
		linear-gradient(rgba(148, 163, 255, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(148, 163, 255, 0.06) 1px, transparent 1px);
	background-size: 54px 54px;
	-webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 0%, transparent 78%);
	mask-image: radial-gradient(120% 90% at 50% 30%, #000 0%, transparent 78%);
	animation: dlbGrid 40s linear infinite;
	opacity: 0.7;
}
@keyframes dlbGrid { from { background-position: 0 0, 0 0; } to { background-position: 54px 54px, 54px 54px; } }

#dlb-bg #dlb-net { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

#dlb-bg .dlb-noise {
	position: absolute;
	inset: 0;
	opacity: 0.035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ */
/* Typography                                                          */
/* ------------------------------------------------------------------ */
body.dlb-revamped h1, body.dlb-revamped h2, body.dlb-revamped h3,
body.dlb-revamped h4, body.dlb-revamped h5, body.dlb-revamped h6,
body.dlb-revamped .wp-block-kubio-heading__text {
	font-family: "Sora", "Inter", sans-serif !important;
	color: var(--dlb-ink) !important;
	letter-spacing: -0.02em !important;
	line-height: 1.08 !important;
	font-weight: 700 !important;
	text-shadow: 0 2px 30px rgba(3, 5, 20, 0.55);
}

/* Gradient treatment for the big hero + section headers. */
body.dlb-revamped #hero-1 h1,
body.dlb-revamped #hero-1 .wp-block-kubio-heading__text,
body.dlb-revamped .wp-block-kubio-section__outer h2 {
	background: var(--dlb-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent !important;
	text-shadow: none;
}
body.dlb-revamped #hero-1 h1,
body.dlb-revamped #hero-1 .wp-block-kubio-heading__text {
	font-weight: 800 !important;
	font-size: clamp(2.4rem, 5.2vw, 4.4rem) !important;
}

body.dlb-revamped p,
body.dlb-revamped .wp-block-kubio-text__text,
body.dlb-revamped li,
body.dlb-revamped .wp-block-kubio-text__text p {
	font-family: "Inter", sans-serif !important;
	color: var(--dlb-ink-soft) !important;
	line-height: 1.7 !important;
}

body.dlb-revamped a { color: #c7d2fe; transition: color 0.25s var(--dlb-ease); }
body.dlb-revamped a:hover { color: #fff; }

/* ------------------------------------------------------------------ */
/* Navigation / header                                                 */
/* ------------------------------------------------------------------ */
/* NOTE: the Kubio "header" container also wraps the hero, so we only turn
   the navigation row itself into a floating fixed glass pill. */
body.dlb-revamped .wp-block-kubio-header__container { background: transparent !important; }

body.dlb-revamped #navigation.wp-block-kubio-navigation {
	position: fixed !important;
	top: 14px;
	left: 0;
	right: 0;
	z-index: 100;
	width: min(1180px, calc(100% - 28px));
	margin: 0 auto !important;
	border-radius: 999px;
	background: rgba(10, 12, 30, 0.55) !important;
	backdrop-filter: blur(18px) saturate(150%);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	border: 1px solid var(--dlb-border);
	box-shadow: 0 10px 40px -12px rgba(2, 4, 18, 0.8);
	transition: background 0.35s var(--dlb-ease), box-shadow 0.35s var(--dlb-ease), top 0.35s var(--dlb-ease);
}
body.dlb-revamped #navigation.wp-block-kubio-navigation.dlb-scrolled {
	background: rgba(8, 10, 26, 0.82) !important;
	box-shadow: 0 14px 50px -14px rgba(2, 4, 18, 0.92);
}
/* Push the hero content clear of the fixed bar. */
body.dlb-revamped #hero-1 .wp-block-kubio-hero__inner { padding-top: 48px; }

body.dlb-revamped .wp-block-kubio-navigation a,
body.dlb-revamped .wp-block-kubio-navigation .menu-item > a {
	color: var(--dlb-ink-soft) !important;
	font-family: "Inter", sans-serif !important;
	font-weight: 500 !important;
	letter-spacing: 0.01em;
	position: relative;
	transition: color 0.25s var(--dlb-ease);
}
body.dlb-revamped .wp-block-kubio-navigation a:hover,
body.dlb-revamped .wp-block-kubio-navigation .current-menu-item > a {
	color: #fff !important;
}
body.dlb-revamped .wp-block-kubio-navigation .menu-item > a::after {
	content: "";
	position: absolute;
	left: 0; bottom: -6px;
	width: 100%; height: 2px;
	background: var(--dlb-grad);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s var(--dlb-ease);
}
body.dlb-revamped .wp-block-kubio-navigation .menu-item > a:hover::after,
body.dlb-revamped .wp-block-kubio-navigation .current-menu-item > a::after {
	transform: scaleX(1);
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */
body.dlb-revamped .wp-block-kubio-button__link,
body.dlb-revamped .wp-block-button__link,
body.dlb-revamped a.wp-element-button {
	position: relative !important;
	border-radius: 999px !important;
	font-family: "Inter", sans-serif !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	color: #fff !important;
	background: var(--dlb-grad) !important;
	background-size: 180% 180% !important;
	border: 0 !important;
	box-shadow: 0 12px 34px -10px rgba(99, 102, 241, 0.75), inset 0 0 0 1px rgba(255,255,255,0.16) !important;
	overflow: hidden;
	transition: transform 0.3s var(--dlb-ease), box-shadow 0.3s var(--dlb-ease), background-position 0.6s var(--dlb-ease) !important;
	isolation: isolate;
}
body.dlb-revamped .wp-block-kubio-button__link::before {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.35) 50%, transparent 80%);
	transform: translateX(-120%);
	transition: transform 0.7s var(--dlb-ease);
	z-index: -1;
}
body.dlb-revamped .wp-block-kubio-button__link:hover {
	transform: translateY(-3px) !important;
	background-position: 100% 50% !important;
	box-shadow: 0 20px 48px -10px rgba(129, 140, 248, 0.9), inset 0 0 0 1px rgba(255,255,255,0.22) !important;
}
body.dlb-revamped .wp-block-kubio-button__link:hover::before { transform: translateX(120%); }

/* Secondary / outline style for buttons in light panels. */
body.dlb-revamped .dlb-glass-panel .wp-block-kubio-button__link {
	background: rgba(255,255,255,0.06) !important;
	border: 1px solid var(--dlb-border-str) !important;
	box-shadow: none !important;
	backdrop-filter: blur(8px);
}
body.dlb-revamped .dlb-glass-panel .wp-block-kubio-button__link:hover {
	background: var(--dlb-grad) !important;
	border-color: transparent !important;
}

/* ------------------------------------------------------------------ */
/* Glass panels, cards, columns                                        */
/* ------------------------------------------------------------------ */
body.dlb-revamped #hero-accent .wp-block-kubio-section__inner > .wp-block-kubio-row__container,
body.dlb-revamped .dlb-glass-panel {
	background: var(--dlb-glass) !important;
	border: 1px solid var(--dlb-border);
	border-radius: var(--dlb-radius-lg) !important;
	box-shadow: var(--dlb-shadow);
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
}

/* Feature columns become hover-lift cards. */
body.dlb-revamped #hero-accent .wp-block-kubio-column__inner {
	background: rgba(255,255,255,0.03);
	border: 1px solid var(--dlb-border);
	border-radius: var(--dlb-radius);
	padding: 26px 22px !important;
	transition: transform 0.4s var(--dlb-ease), box-shadow 0.4s var(--dlb-ease), border-color 0.4s var(--dlb-ease), background 0.4s var(--dlb-ease);
}
body.dlb-revamped #hero-accent .wp-block-kubio-column__inner:hover {
	transform: translateY(-8px);
	background: rgba(255,255,255,0.06);
	border-color: var(--dlb-border-str);
	box-shadow: var(--dlb-shadow), var(--dlb-glow);
}

/* Client logo cards keep light bg so logos stay legible. */
body.dlb-revamped #clients .wp-block-kubio-column__inner,
body.dlb-revamped #clients .wp-block-kubio-image {
	background: rgba(255,255,255,0.92) !important;
	border-radius: 18px !important;
	box-shadow: 0 18px 44px -16px rgba(2,4,18,0.7);
	transition: transform 0.4s var(--dlb-ease), box-shadow 0.4s var(--dlb-ease);
}
body.dlb-revamped #clients .wp-block-kubio-column__inner:hover,
body.dlb-revamped #clients .wp-block-kubio-image:hover {
	transform: translateY(-6px) scale(1.02);
	box-shadow: 0 26px 60px -18px rgba(99,102,241,0.6);
}

/* Icons in feature cards get a gradient tint. */
body.dlb-revamped #hero-accent .wp-block-kubio-icon svg,
body.dlb-revamped #hero-accent .wp-block-kubio-icon path,
body.dlb-revamped .wp-block-kubio-icon i {
	color: #c084fc !important;
	fill: #c084fc !important;
}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */
body.dlb-revamped #footer .wp-block-kubio-section__inner {
	background: rgba(6, 8, 22, 0.6) !important;
	border-top: 1px solid var(--dlb-border);
	backdrop-filter: blur(14px);
}
body.dlb-revamped #footer a { color: var(--dlb-ink-soft) !important; }
body.dlb-revamped #footer a:hover { color: #fff !important; }

/* ------------------------------------------------------------------ */
/* Scroll-reveal (driven by dlb-transitions.js)                        */
/* ------------------------------------------------------------------ */
body.dlb-revamped .dlb-reveal {
	opacity: 0;
	transform: translateY(34px);
	filter: blur(6px);
	transition: opacity 0.9s var(--dlb-ease), transform 0.9s var(--dlb-ease), filter 0.9s var(--dlb-ease);
	will-change: opacity, transform;
}
body.dlb-revamped .dlb-reveal.dlb-in {
	opacity: 1;
	transform: none;
	filter: blur(0);
}

/* ------------------------------------------------------------------ */
/* Page-transition overlay                                             */
/* ------------------------------------------------------------------ */
#dlb-page-transition {
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(120% 120% at 50% 50%, rgba(13,16,48,0.0), rgba(5,6,15,0.92));
	transition: opacity 0.45s var(--dlb-ease);
}
#dlb-page-transition.dlb-pt-active { opacity: 1; }
#dlb-page-transition .dlb-pt-bar {
	position: absolute;
	left: 0; top: 0;
	height: 3px; width: 0%;
	background: var(--dlb-grad);
	box-shadow: 0 0 18px rgba(129,140,248,0.9);
	transition: width 0.5s var(--dlb-ease);
}
#dlb-page-transition.dlb-pt-active .dlb-pt-bar { width: 100%; }

/* View Transitions API cross-fade tuning. */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.5s; }

/* ------------------------------------------------------------------ */
/* Selection + scrollbar                                               */
/* ------------------------------------------------------------------ */
body.dlb-revamped ::selection { background: rgba(168,85,247,0.4); color: #fff; }
body.dlb-revamped ::-webkit-scrollbar { width: 11px; }
body.dlb-revamped ::-webkit-scrollbar-track { background: #06070f; }
body.dlb-revamped ::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, #6366f1, #a855f7);
	border-radius: 999px;
	border: 2px solid #06070f;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 782px) {
	body.dlb-revamped #navigation.wp-block-kubio-navigation {
		top: 8px;
		border-radius: 22px;
		width: calc(100% - 16px);
	}
	#dlb-bg .dlb-orb { filter: blur(52px); opacity: 0.5; }
	body.dlb-revamped #hero-1 h1 { font-size: clamp(2.1rem, 9vw, 3.2rem) !important; }
}

/* ------------------------------------------------------------------ */
/* Accessibility: honour reduced motion                                */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	body.dlb-revamped .dlb-orb,
	body.dlb-revamped .dlb-grid { animation: none !important; }
	body.dlb-revamped .dlb-reveal {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}
	#dlb-bg #dlb-net { display: none; }
}