﻿/* ============================================================================
   db-logo.css  -  styles for <DbLogo />

   This is a GLOBAL stylesheet, not Blazor CSS isolation. Reference it once:
     - Blazor Web App / Server:  in App.razor  <link rel="stylesheet" href="css/db-logo.css" />
     - Blazor WASM (standalone): in wwwroot/index.html <head>
   Put the file under wwwroot/css/.

   Do NOT paste this into a <style> block inside a .razor file: the Razor
   compiler treats '@' as C#, so @media / @keyframes / @container would need
   to be escaped as @@. A plain .css file avoids that entirely.

   Do NOT rename this to DbLogo.razor.css (scoped): isolation would append a
   scope attribute and break the :is-a-container query axis and cross-element
   inheritance. Keep it global.
   ============================================================================ */

.db-logo {
	--size: 400; /* unitless -> pixels; set via the Size parameter */
	--neon-a: #2e7bff; /* overridden per instance by ColorA */
	--neon-b: #17e0c4; /* overridden per instance by ColorB */
	--core: #eafcff; /* hot filament + text glow */
	--stroke: 6; /* line weight in viewBox units */

	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: calc(var(--size) * 1px);
	height: calc(var(--size) * 1px);
	container-type: inline-size; /* each instance queries its own width */
}

/* Fixed 400x400 design scaled as one unit: keeps clip-path, stroke, glow and
   text in lockstep and scales the SVG filter blur proportionally. */
.db-logo-stage {
	position: absolute;
	top: 0;
	left: 0;
	width: 400px;
	height: 400px;
	transform: scale(calc(var(--size) / 400));
	transform-origin: top left;
}

.db-logo-spill {
	position: absolute;
	inset: -18%;
	background: radial-gradient(ellipse at center, var(--neon-a) 0%, transparent 62%);
	opacity: 0.24;
	filter: blur(30px);
}

.db-logo-glass {
	position: absolute;
	inset: 0;
	clip-path: path('M 179.22 57.00 Q 200.00 45.00 220.78 57.00 L 313.45 110.50 Q 334.23 122.50 334.23 146.50 L 334.23 253.50 Q 334.23 277.50 313.45 289.50 L 220.78 343.00 Q 200.00 355.00 179.22 343.00 L 86.55 289.50 Q 65.77 277.50 65.77 253.50 L 65.77 146.50 Q 65.77 122.50 86.55 110.50 L 179.22 57.00 Z');
	background: linear-gradient(150deg, color-mix(in srgb, var(--neon-a) 22%, transparent) 0%, color-mix(in srgb, var(--neon-b) 16%, transparent) 100%);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
}

.db-logo-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible; /* let the glow bleed past the box */
}

.db-logo-rim {
	fill: none;
	stroke: rgba(255, 255, 255, 0.16);
	stroke-width: 1;
	transform: scale(0.955);
	transform-origin: 200px 200px;
}

/* Gradient tube + gradient halo. stroke/filter are set inline by the
   component because the gradient and filter ids are per-instance. */
.db-logo-glow {
	fill: none;
	stroke-width: var(--stroke);
	stroke-linejoin: round;
}

/* Hot white filament on top. */
.db-logo-core {
	fill: none;
	stroke: var(--core);
	stroke-width: calc(var(--stroke) * 0.42);
	stroke-linejoin: round;
	filter: drop-shadow(0 0 2px var(--core));
}

.db-logo-label {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	text-align: center;
	pointer-events: none;
}

.db-logo-mark {
	font-weight: 800;
	font-size: 140px;
	line-height: 1;
	letter-spacing: 0.02em;
	color: #fff;
	text-shadow: 0 0 6px color-mix(in srgb, var(--core) 80%, transparent), 0 0 20px var(--neon-a), 0 0 40px var(--neon-b);
}

.db-logo-sub {
	margin-top: 12px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.42em;
	text-indent: 0.42em;
	color: color-mix(in srgb, var(--core) 75%, #fff);
	opacity: 0.85;
}

/* Small-size refinements, per instance. Delete this block for pure linear
   scaling (line and text would then thin out below ~60px). */
@container (max-width: 150px) {
	.db-logo-sub {
		display: none;
	}
}

@container (max-width: 120px) {
	.db-logo-stage {
		--stroke: 9;
	}
}

@container (max-width: 60px) {
	.db-logo-stage {
		--stroke: 15;
	}

	.db-logo-mark {
		font-weight: 900;
	}
}

/*@media (prefers-reduced-motion: no-preference) {
	.db-logo-glow {
		animation: db-logo-breathe 4.5s ease-in-out infinite;
	}

	@keyframes db-logo-breathe {
		0%, 100% {
			opacity: 0.9;
		}

		50% {
			opacity: 1;
		}
	}
}*/

/* ----------------------------------------------------------------------------
   OPTIONAL: ambient backdrop.
   backdrop-filter only blurs whatever is behind it. On a flat background the
   frosted glass reads as a plain tint. Add these blobs to the page/layout
   (not the component) if you want the full glass effect.

   .db-logo-scene { position: relative; overflow: hidden; }
   .db-logo-scene::before,
   .db-logo-scene::after {
       content: ""; position: absolute; width: 55vmax; height: 55vmax;
       border-radius: 50%; filter: blur(80px); z-index: 0; pointer-events: none;
   }
   .db-logo-scene::before { background: radial-gradient(circle, #2e7bff 0%, transparent 70%);
                            top: -15vmax; left: -10vmax; opacity: 0.45; }
   .db-logo-scene::after  { background: radial-gradient(circle, #17e0c4 0%, transparent 70%);
                            bottom: -18vmax; right: -12vmax; opacity: 0.35; }
   ---------------------------------------------------------------------------- */
