/* DS Page Loaders — laser / logo draw (t49arq + DSinf inspired) */

.dspl-laser {
	--dspl-laser-ease: cubic-bezier(0.22, 1, 0.36, 1);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	width: min(72vw, calc(var(--ldr-size, 180px) * 1.35));
}

.dspl-laser__stage {
	position: relative;
	width: var(--ldr-size, 180px);
	aspect-ratio: 1;
	margin: 0 auto;
}

.dspl-laser__marks {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
}

.dspl-laser__guide,
.dspl-laser__frame {
	fill: none;
	stroke: color-mix(in srgb, var(--ldr-color, #fafafa) 55%, transparent);
	stroke-width: 1.5;
	stroke-linecap: square;
	stroke-dasharray: 220;
	stroke-dashoffset: 220;
	animation: dspl-laser-stroke calc(var(--ldr-cycle, 1200ms) * 0.4) var(--dspl-laser-ease) forwards;
}

.dspl-laser__guide:nth-child(1) { animation-delay: calc(var(--ldr-cycle, 1200ms) * 0.02); }
.dspl-laser__guide:nth-child(2) { animation-delay: calc(var(--ldr-cycle, 1200ms) * 0.05); }
.dspl-laser__guide:nth-child(3) { animation-delay: calc(var(--ldr-cycle, 1200ms) * 0.08); }
.dspl-laser__guide:nth-child(4) { animation-delay: calc(var(--ldr-cycle, 1200ms) * 0.1); }

.dspl-laser__frame {
	stroke: color-mix(in srgb, var(--ldr-color, #fafafa) 28%, transparent);
	stroke-dasharray: 680;
	stroke-dashoffset: 680;
	animation-delay: calc(var(--ldr-cycle, 1200ms) * 0.14);
	animation-duration: calc(var(--ldr-cycle, 1200ms) * 0.55);
}

.dspl-laser__logo {
	position: absolute;
	inset: 10%;
	width: 80%;
	height: 80%;
	object-fit: contain;
	opacity: 0;
	transform: scale(0.97);
	z-index: 1;
	filter: drop-shadow(0 0 0 transparent);
}

.dspl-laser.has-glow .dspl-laser__logo {
	filter: drop-shadow(0 0 12px color-mix(in srgb, var(--ldr-accent, #5eead4) 45%, transparent));
}

.dspl-laser__beam {
	position: absolute;
	z-index: 3;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		transparent,
		color-mix(in srgb, var(--ldr-accent, #5eead4) 85%, #fff),
		transparent
	);
	box-shadow:
		0 0 12px var(--ldr-accent, #5eead4),
		0 0 28px color-mix(in srgb, var(--ldr-accent, #5eead4) 55%, transparent);
	opacity: 0;
}

.dspl-laser__meta {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.55rem;
	width: 100%;
}

.dspl-laser__brand {
	margin: 0;
	font: 600 0.78rem/1.3 system-ui, sans-serif;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--ldr-color, #fafafa) 78%, transparent);
	opacity: 0;
	animation: dspl-laser-fade-in calc(var(--ldr-cycle, 1200ms) * 0.35) ease calc(var(--ldr-cycle, 1200ms) * 0.55) forwards;
}

.dspl-laser__status {
	margin: 0;
	font: 500 0.82rem/1.35 system-ui, sans-serif;
	letter-spacing: 0.04em;
	color: color-mix(in srgb, var(--ldr-accent, #5eead4) 90%, #fff);
	min-height: 1.35em;
}

.dspl-laser__bar {
	width: min(100%, 12rem);
	height: 3px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ldr-color, #fafafa) 14%, transparent);
	overflow: hidden;
}

.dspl-laser__bar-fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--ldr-color, #fafafa), var(--ldr-accent, #5eead4));
	animation: dspl-laser-bar var(--ldr-cycle, 1200ms) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.dspl-laser.is-loop .dspl-laser__guide,
.dspl-laser.is-loop .dspl-laser__frame,
.dspl-laser.is-loop .dspl-laser__logo,
.dspl-laser.is-loop .dspl-laser__beam,
.dspl-laser.is-loop .dspl-laser__bar-fill {
	animation-iteration-count: infinite;
}

/* —— Architect (t49arq / DSinf) —— */
.dspl-laser--architect .dspl-laser__logo {
	clip-path: inset(0 100% 0 0);
	animation: dspl-laser-draw-h var(--ldr-cycle, 1200ms) var(--dspl-laser-ease) calc(var(--ldr-cycle, 1200ms) * 0.18) forwards;
}

.dspl-laser--architect .dspl-laser__beam {
	top: 10%;
	bottom: 10%;
	width: 3px;
	left: 10%;
	animation: dspl-laser-beam-h var(--ldr-cycle, 1200ms) var(--dspl-laser-ease) calc(var(--ldr-cycle, 1200ms) * 0.18) forwards;
}

/* —— Scan H —— */
.dspl-laser--scan-h .dspl-laser__logo {
	clip-path: inset(0 100% 0 0);
	animation: dspl-laser-draw-h var(--ldr-cycle, 1200ms) linear forwards;
}
.dspl-laser--scan-h .dspl-laser__beam {
	top: 8%;
	bottom: 8%;
	width: 4px;
	left: 8%;
	opacity: 1;
	animation: dspl-laser-beam-h var(--ldr-cycle, 1200ms) linear forwards;
}

/* —— Scan V —— */
.dspl-laser--scan-v .dspl-laser__logo {
	clip-path: inset(100% 0 0 0);
	animation: dspl-laser-draw-v var(--ldr-cycle, 1200ms) linear forwards;
}
.dspl-laser--scan-v .dspl-laser__beam {
	left: 8%;
	right: 8%;
	height: 4px;
	top: 8%;
	background: linear-gradient(180deg, transparent, var(--ldr-accent), transparent);
	animation: dspl-laser-beam-v var(--ldr-cycle, 1200ms) linear forwards;
}

/* —— Iris —— */
.dspl-laser--iris .dspl-laser__logo {
	clip-path: circle(0% at 50% 50%);
	animation: dspl-laser-iris var(--ldr-cycle, 1200ms) var(--dspl-laser-ease) forwards;
}
.dspl-laser--iris .dspl-laser__beam {
	inset: 18%;
	border-radius: 50%;
	width: auto;
	height: auto;
	background: transparent;
	border: 2px solid var(--ldr-accent);
	box-shadow: 0 0 18px var(--ldr-accent), inset 0 0 18px color-mix(in srgb, var(--ldr-accent) 40%, transparent);
	animation: dspl-laser-iris-ring var(--ldr-cycle, 1200ms) var(--dspl-laser-ease) forwards;
}

/* —— Diagonal —— */
.dspl-laser--diagonal .dspl-laser__logo {
	clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
	animation: dspl-laser-diagonal var(--ldr-cycle, 1200ms) var(--dspl-laser-ease) forwards;
}
.dspl-laser--diagonal .dspl-laser__beam {
	width: 140%;
	height: 3px;
	top: 50%;
	left: -20%;
	transform: rotate(-32deg);
	animation: dspl-laser-diag-beam var(--ldr-cycle, 1200ms) var(--dspl-laser-ease) forwards;
}

/* —— Grid —— */
.dspl-laser__grid {
	position: absolute;
	inset: 8%;
	z-index: 2;
	pointer-events: none;
	background-image:
		linear-gradient(color-mix(in srgb, var(--ldr-accent) 35%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--ldr-accent) 35%, transparent) 1px, transparent 1px);
	background-size: 16.66% 16.66%;
	opacity: 0;
	animation: dspl-laser-grid-fade var(--ldr-cycle, 1200ms) ease forwards;
	mask-image: linear-gradient(90deg, #000 0%, #000 0%, transparent 0%);
	animation-name: dspl-laser-grid-reveal;
}
.dspl-laser--grid .dspl-laser__logo {
	clip-path: inset(0 100% 0 0);
	animation: dspl-laser-draw-h calc(var(--ldr-cycle, 1200ms) * 0.85) steps(6) calc(var(--ldr-cycle, 1200ms) * 0.1) forwards;
}

/* —— Dual beam —— */
.dspl-laser--dual-beam .dspl-laser__logo {
	clip-path: inset(0 50% 0 50%);
	animation: dspl-laser-dual var(--ldr-cycle, 1200ms) var(--dspl-laser-ease) forwards;
}
.dspl-laser--dual-beam .dspl-laser__beam {
	top: 10%;
	bottom: 10%;
	width: 3px;
	left: 50%;
	opacity: 1;
	animation: dspl-laser-dual-beam var(--ldr-cycle, 1200ms) var(--dspl-laser-ease) forwards;
}
.dspl-laser--dual-beam .dspl-laser__beam::before,
.dspl-laser--dual-beam .dspl-laser__beam::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 3px;
	background: inherit;
	box-shadow: inherit;
}
.dspl-laser--dual-beam .dspl-laser__beam::before { left: 0; animation: dspl-laser-dual-l var(--ldr-cycle, 1200ms) var(--dspl-laser-ease) forwards; }
.dspl-laser--dual-beam .dspl-laser__beam::after { right: 0; animation: dspl-laser-dual-r var(--ldr-cycle, 1200ms) var(--dspl-laser-ease) forwards; }

/* —— Particles —— */
.dspl-laser__particles {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}
.dspl-laser__particles i {
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ldr-accent);
	opacity: 0;
	box-shadow: 0 0 8px var(--ldr-accent);
	animation: dspl-laser-particle var(--ldr-cycle, 1200ms) ease-out infinite;
}
.dspl-laser__particles i:nth-child(1) { left: 18%; top: 22%; animation-delay: 0s; }
.dspl-laser__particles i:nth-child(2) { left: 72%; top: 18%; animation-delay: .1s; }
.dspl-laser__particles i:nth-child(3) { left: 80%; top: 58%; animation-delay: .2s; }
.dspl-laser__particles i:nth-child(4) { left: 30%; top: 78%; animation-delay: .15s; }
.dspl-laser__particles i:nth-child(5) { left: 52%; top: 40%; animation-delay: .25s; }
.dspl-laser__particles i:nth-child(6) { left: 12%; top: 55%; animation-delay: .3s; }
.dspl-laser--particles .dspl-laser__logo {
	filter: blur(8px);
	animation: dspl-laser-materialize var(--ldr-cycle, 1200ms) var(--dspl-laser-ease) forwards;
}

/* —— Neon trace —— */
.dspl-laser--neon-trace .dspl-laser__logo {
	clip-path: inset(0 100% 0 0);
	animation: dspl-laser-draw-h var(--ldr-cycle, 1200ms) var(--dspl-laser-ease) forwards;
	filter: drop-shadow(0 0 6px var(--ldr-accent)) drop-shadow(0 0 18px color-mix(in srgb, var(--ldr-accent) 55%, transparent));
}
.dspl-laser--neon-trace .dspl-laser__frame {
	stroke: var(--ldr-accent);
	filter: drop-shadow(0 0 6px var(--ldr-accent));
}
.dspl-laser--neon-trace .dspl-laser__beam {
	top: 10%;
	bottom: 10%;
	width: 2px;
	animation: dspl-laser-beam-h var(--ldr-cycle, 1200ms) var(--dspl-laser-ease) forwards;
}

/* —— Blueprint —— */
.dspl-laser--blueprint .dspl-laser__guide,
.dspl-laser--blueprint .dspl-laser__frame {
	stroke-dasharray: 6 4;
	stroke: color-mix(in srgb, var(--ldr-accent) 70%, #fff);
}
.dspl-laser--blueprint .dspl-laser__logo {
	clip-path: inset(0 0 100% 0);
	animation: dspl-laser-draw-v var(--ldr-cycle, 1200ms) steps(12) calc(var(--ldr-cycle, 1200ms) * 0.2) forwards;
	mix-blend-mode: screen;
}
.dspl-laser--blueprint .dspl-laser__stage::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(0deg, transparent, transparent 11px, color-mix(in srgb, var(--ldr-accent) 12%, transparent) 12px),
		repeating-linear-gradient(90deg, transparent, transparent 11px, color-mix(in srgb, var(--ldr-accent) 12%, transparent) 12px);
	opacity: 0.35;
	pointer-events: none;
	z-index: 0;
}

/* Keyframes */
@keyframes dspl-laser-stroke {
	to { stroke-dashoffset: 0; }
}
@keyframes dspl-laser-fade-in {
	to { opacity: 1; }
}
@keyframes dspl-laser-bar {
	to { width: 100%; }
}
@keyframes dspl-laser-draw-h {
	0% { opacity: 0; clip-path: inset(0 100% 0 0); transform: scale(0.97); }
	12% { opacity: 1; }
	100% { opacity: 1; clip-path: inset(0 0 0 0); transform: scale(1); }
}
@keyframes dspl-laser-draw-v {
	0% { opacity: 0; clip-path: inset(100% 0 0 0); transform: scale(0.97); }
	12% { opacity: 1; }
	100% { opacity: 1; clip-path: inset(0 0 0 0); transform: scale(1); }
}
@keyframes dspl-laser-beam-h {
	0% { opacity: 0; left: 10%; }
	8% { opacity: 1; }
	92% { opacity: 1; }
	100% { opacity: 0; left: 90%; }
}
@keyframes dspl-laser-beam-v {
	0% { opacity: 0; top: 10%; }
	8% { opacity: 1; }
	92% { opacity: 1; }
	100% { opacity: 0; top: 90%; }
}
@keyframes dspl-laser-iris {
	0% { opacity: 0; clip-path: circle(0% at 50% 50%); transform: scale(0.92); }
	20% { opacity: 1; }
	100% { opacity: 1; clip-path: circle(75% at 50% 50%); transform: scale(1); }
}
@keyframes dspl-laser-iris-ring {
	0% { opacity: 0; transform: scale(0.2); }
	15% { opacity: 1; }
	100% { opacity: 0; transform: scale(1.35); }
}
@keyframes dspl-laser-diagonal {
	0% { opacity: 0; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
	20% { opacity: 1; }
	100% { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes dspl-laser-diag-beam {
	0% { opacity: 0; transform: rotate(-32deg) translateX(-40%); }
	10% { opacity: 1; }
	100% { opacity: 0; transform: rotate(-32deg) translateX(40%); }
}
@keyframes dspl-laser-grid-reveal {
	0% { opacity: 0; mask-image: linear-gradient(90deg, #000 0%, transparent 0%); }
	20% { opacity: 0.85; }
	100% { opacity: 0; mask-image: linear-gradient(90deg, #000 100%, transparent 100%); }
}
@keyframes dspl-laser-dual {
	0% { opacity: 0; clip-path: inset(0 50% 0 50%); }
	15% { opacity: 1; }
	100% { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes dspl-laser-dual-beam {
	0%, 100% { opacity: 0; }
	20%, 80% { opacity: 1; }
}
@keyframes dspl-laser-dual-l {
	from { transform: translateX(-45%); }
	to { transform: translateX(0); }
}
@keyframes dspl-laser-dual-r {
	from { transform: translateX(45%); }
	to { transform: translateX(0); }
}
@keyframes dspl-laser-materialize {
	0% { opacity: 0; filter: blur(10px); transform: scale(1.08); }
	55% { opacity: 1; filter: blur(2px); }
	100% { opacity: 1; filter: blur(0); transform: scale(1); }
}
@keyframes dspl-laser-particle {
	0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
	30% { opacity: 1; }
	100% { opacity: 0; transform: translate(var(--dx, 12px), var(--dy, -28px)) scale(0); }
}

@media (prefers-reduced-motion: reduce) {
	.dspl-laser__guide,
	.dspl-laser__frame,
	.dspl-laser__logo,
	.dspl-laser__beam,
	.dspl-laser__brand,
	.dspl-laser__bar-fill,
	.dspl-laser__grid,
	.dspl-laser__particles i {
		animation: none !important;
	}
	.dspl-laser__guide,
	.dspl-laser__frame { stroke-dashoffset: 0; }
	.dspl-laser__logo {
		opacity: 1;
		clip-path: none !important;
		transform: none;
		filter: none;
	}
	.dspl-laser__brand { opacity: 1; }
	.dspl-laser__bar-fill { width: 100%; }
	.dspl-laser__beam { display: none; }
}