/* Page hero of ordinary pages (About, Contact, legal): same base as the product and project heroes, plus two faint
   rings from the brand share image. The rings drift slowly; no motion with prefers-reduced-motion. */

@layer inntek {
	.inntek-page-hero { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--inntek-line); background: linear-gradient(180deg, var(--inntek-hero-bg-3), var(--inntek-bg)); }
	.inntek-page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--inntek-grid-tone) 4.5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--inntek-grid-tone) 4.5%, transparent) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(50% 60% at 70% 50%, var(--inntek-shade) 20%, transparent 80%); -webkit-mask-image: radial-gradient(50% 60% at 70% 50%, var(--inntek-shade) 20%, transparent 80%); }
	.inntek-page-hero__inner { display: grid; gap: 16px; padding-block: clamp(40px, 6vw, 72px); }
	.inntek-page-hero h1 { max-width: 28ch; margin: 0; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.16; letter-spacing: -0.01em; }
	.inntek-page-hero--page .inntek-lead { max-width: 64ch; margin: 0; }

	.inntek-page-hero__ring { position: absolute; z-index: -1; top: -160px; right: -120px; width: 520px; aspect-ratio: 1; border: 64px solid color-mix(in srgb, var(--inntek-brand) 7%, transparent); border-radius: 50%; pointer-events: none; animation: inntek-ring-drift 24s ease-in-out infinite alternate; }
	.inntek-page-hero__ring--small { top: auto; right: 18%; bottom: -170px; width: 300px; border-width: 36px; border-color: color-mix(in srgb, var(--inntek-brand) 5%, transparent); animation-duration: 32s; animation-direction: alternate-reverse; }

	@keyframes inntek-ring-drift {
		from { transform: translate3d(0, 0, 0); }
		to { transform: translate3d(-28px, 18px, 0); }
	}

	@media (max-width: 640px) {
		.inntek-page-hero__ring { top: -120px; right: -160px; width: 340px; border-width: 44px; }
		.inntek-page-hero__ring--small { display: none; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.inntek-page-hero__ring { animation: none !important; }
}