/*
 * ntw_hero — port of `.a-hero` (prototype/a-rung-suong/style.css).
 *
 * The louvres are an INTRO with no resting state: they cover the photo, swing
 * edge-on and are gone by ~1.3s. Round 1 left them standing at 80deg and the client
 * called it cluttered — the photo is ALREADY a louvre wall. So there are no blades
 * at all without `html.ntw-anim` (no JS, reduced motion), and the grain is CSS
 * gradients, crisp at any size, never a stretched bitmap.
 */

.ntw-hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.ntw-hero__media { position: absolute; inset: -6% 0 0; z-index: -3; }
.ntw-hero__media img {
	width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
	transform: translate3d(0, calc(var(--hp, 0) * 9%), 0) scale(1.08);
}
/* The scrim. Without it cream type over a bright timber photo fails contrast. */
.ntw-hero::after {
	content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		linear-gradient(90deg, rgba(13, 17, 14, .9) 0%, rgba(13, 17, 14, .62) 40%, rgba(13, 17, 14, .12) 78%),
		linear-gradient(0deg, var(--ink) 0%, rgba(13, 17, 14, 0) 38%);
}

.ntw-blades { display: none; }
.ntw-anim .ntw-blades {
	position: absolute; inset: 0; z-index: -2; display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	perspective: 1400px; pointer-events: none;
	animation: ntw-gone .01s linear 1.45s forwards;
}
@keyframes ntw-gone { to { visibility: hidden; } }
.ntw-blade {
	transform-origin: 50% 50%;
	background:
		repeating-linear-gradient(90deg, rgba(0, 0, 0, .2) 0 1px, transparent 1px 6px),
		repeating-linear-gradient(90deg, rgba(255, 214, 170, .06) 0 2px, transparent 2px 11px),
		linear-gradient(90deg, #26170D 0%, #4A2E1B 46%, #35200F 100%);
	box-shadow: inset -16px 0 26px rgba(0, 0, 0, .5), inset 8px 0 14px rgba(255, 210, 160, .07);
	animation: ntw-louvre .95s var(--ease-io) both;
	animation-delay: calc(60ms + var(--d, 0) * 45ms);
}
@keyframes ntw-louvre {
	0% { transform: rotateY(0deg); opacity: 1; }
	80% { opacity: 1; }
	100% { transform: rotateY(90deg); opacity: 0; }
}
/* `scale` and `filter`, not `transform`, so the scroll parallax keeps working after. */
.ntw-anim .ntw-hero__media img { animation: ntw-settle 2.4s var(--ease) both .1s; }
@keyframes ntw-settle { from { scale: 1.12; filter: brightness(.45) saturate(.8); } to { scale: 1; filter: none; } }

.ntw-hero__body { position: relative; padding-block: 160px clamp(56px, 9vh, 110px); }
/*
 * `46ch` sits on the PARAGRAPH, whose own font-size it resolves against. A `ch` cap
 * on a wrapper resolves against the wrapper's inherited 16px instead — that is how
 * helios' two-line headline came out on four lines.
 */
.ntw-hero__lead {
	max-width: 46ch; margin: 0 0 34px; text-wrap: pretty;
	font-size: clamp(1rem, 1.3vw, 1.15rem);
}
.ntw-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ntw-anim .ntw-hero__fade { animation: ntw-hero-fade .9s var(--ease) both; animation-delay: 1.05s; }
@keyframes ntw-hero-fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.elementor-editor-active .ntw-hero__fade { animation: none !important; opacity: 1 !important; transform: none !important; }

.ntw-hero__facts {
	display: flex; flex-wrap: wrap; gap: 8px 34px; margin: 56px 0 0; padding: 22px 0 0; list-style: none;
	border-top: 1px solid var(--line); font-size: 14px;
}
.ntw-hero__facts b { font: 500 1.4rem/1 var(--f-display); margin-right: 8px; }

/* bottom: 120px, not 40px — the contact dock owns the bottom-right corner. */
.ntw-cue {
	position: absolute; right: var(--pad); bottom: 120px; display: grid; justify-items: center; gap: 10px;
	font-size: 11px; letter-spacing: .24em; text-transform: uppercase; writing-mode: vertical-rl;
}
.ntw-cue::after { content: ''; width: 1px; height: 64px; background: linear-gradient(var(--ntw-w-accent, var(--green)), transparent); }
.ntw-anim .ntw-cue::after { animation: ntw-cue 2.2s var(--ease-io) infinite; transform-origin: top; }
@keyframes ntw-cue {
	0% { transform: scaleY(0); }
	50% { transform: scaleY(1); transform-origin: top; }
	51% { transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

@media (max-width: 720px) {
	.ntw-anim .ntw-blades { grid-template-columns: repeat(7, minmax(0, 1fr)); }
	.ntw-blade:nth-child(n + 8) { display: none; }
	.ntw-cue { display: none; }
	.ntw-hero__body { padding-top: 120px; }
	/* Copy spans the full width on a phone, so the side scrim would leave the right
	   half of every line on bright timber; darken from the bottom instead. */
	.ntw-hero::after { background: linear-gradient(0deg, var(--ink) 0%, rgba(13, 17, 14, .78) 45%, rgba(13, 17, 14, .42) 100%); }
}

@media (prefers-reduced-motion: reduce) {
	.ntw-hero__media img { transform: none !important; }
}