/* ============================================================================
   Homepage Footer — Brutalist Tech (Newsletter)
   Section ID: tmpl-brutalist-tech--footer--newsletter--0

   Bento-grid footer on the violet-black canvas: a brand cell beside three nav
   columns, a social row, and a legal/copyright bar. Transparent surface with a
   dark-gradient overlay and decorative wave-top / plus-pattern / confetti
   layers. All values reference design tokens. Scoped under .bt-foot-nl0 so
   nothing can leak onto the header nav or other sections.
   ============================================================================ */

.bt-foot-nl0 {
	position: relative;
	overflow: hidden;
	background-color: transparent;
	/* dark-gradient overlay over the canvas */
	background-image: linear-gradient(
		180deg,
		var(--color-canvas) 0%,
		var(--color-canvas-deep) 100%
	);
	color: var(--color-body-on-dark);
	padding: calc(var(--space-section) + var(--space-8)) 0 var(--space-10);
	isolation: isolate;
}

/* ---- Decorative · wave-top divider ---------------------------------------- */
.bt-foot-nl0__wave {
	position: absolute;
	inset: 0 0 auto 0;
	height: 48px;
	color: var(--color-canvas);
	line-height: 0;
	pointer-events: none;
	z-index: 0;
}

.bt-foot-nl0__wave svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ---- Decorative · plus-pattern field -------------------------------------- */
.bt-foot-nl0__plus {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: 0.5;
	background-image:
		linear-gradient(rgba(var(--color-primary-rgb), 0.10) 1.5px, transparent 1.5px),
		linear-gradient(90deg, rgba(var(--color-primary-rgb), 0.10) 1.5px, transparent 1.5px);
	background-size: 44px 44px;
	-webkit-mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
	mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
}

/* ---- Decorative · confetti dots -------------------------------------------- */
.bt-foot-nl0__confetti {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.bt-foot-nl0__confetti span {
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: var(--radius-sm);
	opacity: 0.7;
}

.bt-foot-nl0__confetti span:nth-child(1) { top: 18%; left: 8%;  background: var(--color-primary-400); transform: rotate(20deg); }
.bt-foot-nl0__confetti span:nth-child(2) { top: 34%; left: 92%; background: var(--color-accent-400);  transform: rotate(-15deg); }
.bt-foot-nl0__confetti span:nth-child(3) { top: 62%; left: 4%;  background: var(--color-accent-500);  border-radius: var(--radius-full); }
.bt-foot-nl0__confetti span:nth-child(4) { top: 12%; left: 60%; background: var(--color-primary-500); border-radius: var(--radius-full); }
.bt-foot-nl0__confetti span:nth-child(5) { top: 78%; left: 78%; background: var(--color-primary-400); transform: rotate(35deg); }
.bt-foot-nl0__confetti span:nth-child(6) { top: 48%; left: 46%; background: var(--color-accent-400);  transform: rotate(-25deg); }

/* ---- Container ------------------------------------------------------------- */
.bt-foot-nl0__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--container-max); /* max-w-6xl canvas */
	margin: 0 auto;
	padding: 0 var(--container-padding);
	border-radius: var(--radius-2xl);
}

/* ---- Bento grid: brand cell + 3 nav columns (4 columns) ------------------- */
.bt-foot-nl0__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: var(--space-12) var(--space-8);
	align-items: start;
}

/* ---- Brand cell ------------------------------------------------------------ */
.bt-foot-nl0__brand {
	max-width: 34ch;
}

.bt-foot-nl0__logo {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	text-decoration: none;
	color: var(--color-text-on-dark);
	font-family: var(--font-heading);
	font-size: var(--text-3xl); /* 3xl heading */
	font-weight: 900;           /* weight 900 */
	line-height: var(--leading-tight);
	letter-spacing: var(--letter-normal); /* 0em tracking */
}

.bt-foot-nl0__logo-mark {
	color: var(--color-accent-400);
	font-size: 0.9em;
	line-height: 1;
	filter: drop-shadow(0 0 10px rgba(var(--color-accent-rgb), 0.55));
}

.bt-foot-nl0__logo-text {
	color: var(--color-text-on-dark);
}

.bt-foot-nl0__tagline {
	margin: var(--space-4) 0 0;
	font-family: var(--font-body);
	font-size: var(--text-lg); /* lg subheading */
	line-height: var(--leading-normal);
	color: var(--color-body-on-dark);
	max-width: 40ch;
}

/* ---- Nav columns ----------------------------------------------------------- */
.bt-foot-nl0__col {
	min-width: 0;
}

.bt-foot-nl0__col-title {
	margin: 0 0 var(--space-4);
	font-family: var(--font-heading);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
	color: var(--color-accent-400);
}

.bt-foot-nl0__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.bt-foot-nl0__link {
	display: inline-block;
	text-decoration: none;
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-snug);
	color: var(--color-body-on-dark);
	transition: color var(--duration-fast) var(--ease-out),
		transform var(--duration-fast) var(--ease-out);
}

.bt-foot-nl0__link:hover,
.bt-foot-nl0__link:focus-visible {
	color: var(--color-text-on-dark);
	transform: translateX(3px);
	outline: none;
}

.bt-foot-nl0__link:focus-visible {
	outline: 2px solid var(--color-primary-400);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

/* ---- Social row ------------------------------------------------------------ */
.bt-foot-nl0__social {
	list-style: none;
	margin: var(--space-16) 0 0;
	padding: var(--space-8) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	border-top: 1px solid var(--color-hairline);
}

.bt-foot-nl0__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-full);
	border: 1px solid var(--color-hairline);
	background: var(--color-surface-card);
	color: var(--color-body-on-dark);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-out),
		border-color var(--duration-fast) var(--ease-out),
		background-color var(--duration-fast) var(--ease-out),
		box-shadow var(--duration-normal) var(--ease-out),
		transform var(--duration-fast) var(--ease-out);
}

/* CTA hover = glow-pulse */
.bt-foot-nl0__social-link:hover,
.bt-foot-nl0__social-link:focus-visible {
	color: var(--color-text-on-dark);
	border-color: var(--color-primary-400);
	background: var(--color-surface-card-elev);
	transform: translateY(-2px);
	box-shadow: var(--shadow-glow);
	outline: none;
	animation: bt-foot-nl0-glow-pulse 1.6s var(--ease-default) infinite;
}

.bt-foot-nl0__social-link:focus-visible {
	outline: 2px solid var(--color-primary-400);
	outline-offset: 3px;
}

@keyframes bt-foot-nl0-glow-pulse {
	0%, 100% { box-shadow: 0 0 18px rgba(var(--color-primary-rgb), 0.28); }
	50%      { box-shadow: 0 0 34px rgba(var(--color-primary-rgb), 0.55); }
}

/* ---- Legal / copyright bar ------------------------------------------------- */
.bt-foot-nl0__legal {
	margin-top: var(--space-10);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-hairline);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

.bt-foot-nl0__copyright {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--color-muted-on-dark);
}

.bt-foot-nl0__legal-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
}

.bt-foot-nl0__legal-link {
	text-decoration: none;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--color-muted-on-dark);
	transition: color var(--duration-fast) var(--ease-out);
}

.bt-foot-nl0__legal-link:hover,
.bt-foot-nl0__legal-link:focus-visible {
	color: var(--color-text-on-dark);
	outline: none;
}

.bt-foot-nl0__legal-link:focus-visible {
	outline: 2px solid var(--color-primary-400);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

/* ---- Entrance animation · fade-up (1000ms) with 200ms stagger ------------- */
[data-bt-foot-nl0-animate] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity var(--duration-slower, 700ms) var(--ease-out),
		transform var(--duration-slower, 700ms) var(--ease-out);
	transition-duration: 1000ms;
}

[data-bt-foot-nl0-animate].is-visible {
	opacity: 1;
	transform: translateY(0);
}

.bt-foot-nl0__grid > [data-bt-foot-nl0-animate]:nth-child(1) { transition-delay: 0ms; }
.bt-foot-nl0__grid > [data-bt-foot-nl0-animate]:nth-child(2) { transition-delay: 200ms; }
.bt-foot-nl0__grid > [data-bt-foot-nl0-animate]:nth-child(3) { transition-delay: 400ms; }
.bt-foot-nl0__grid > [data-bt-foot-nl0-animate]:nth-child(4) { transition-delay: 600ms; }
.bt-foot-nl0__social { transition-delay: 700ms; }
.bt-foot-nl0__legal  { transition-delay: 800ms; }

/* ---- Responsive · tablet = 2-col ------------------------------------------ */
@media (max-width: 900px) {
	.bt-foot-nl0__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-10) var(--space-8);
	}

	.bt-foot-nl0__brand {
		grid-column: 1 / -1;
		max-width: none;
	}
}

/* ---- Responsive · mobile = single column (hidden-aside tagline) ----------- */
@media (max-width: 600px) {
	.bt-foot-nl0 {
		padding-top: var(--space-section);
	}

	.bt-foot-nl0__grid {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	/* hidden-aside: drop the supporting tagline on the smallest screens */
	.bt-foot-nl0__tagline {
		display: none;
	}

	.bt-foot-nl0__legal {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---- Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	[data-bt-foot-nl0-animate] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.bt-foot-nl0__social-link:hover,
	.bt-foot-nl0__social-link:focus-visible {
		animation: none;
	}
}