/* ================================================================
   NADLANISTIM — HERO (ported from app/v6/v6.css → Hero + intro timeline)
   ================================================================ */

.nad-hero {
	position: relative; min-height: 100vh; min-height: 100svh;
	display: flex; flex-direction: column; justify-content: center;
	padding: 160px var(--nad-gutter) 200px; color: var(--nad-ink); overflow: hidden;
	/* Full-bleed: break out of whatever Elementor container holds the widget so the hero is
	   always edge-to-edge (like the reference). This also makes the 7.2vw title match the
	   render width — inside a narrower boxed container the vw title otherwise overflows. */
	width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw);
}
.nad-hero__media { position: absolute; inset: 0; overflow: hidden; will-change: transform; }
/* Ancestor prefix out-specifies Elementor's `.elementor img { height:auto }`. */
.nad-hero .nad-hero__media img { width: 100%; height: 115%; object-fit: cover; object-position: center; filter: brightness(.45) contrast(1.05) saturate(.85); }
.nad-hero__veil {
	position: absolute; inset: 0;
	background: radial-gradient(ellipse at 70% 30%, rgba(139,92,246,.18), transparent 50%), radial-gradient(ellipse at 20% 80%, rgba(34,211,238,.15), transparent 50%), linear-gradient(180deg, rgba(7,8,15,.4) 0%, rgba(7,8,15,.6) 50%, rgba(7,8,15,.95) 100%);
}
.nad-hero__glow {
	position: absolute; bottom: 20%; left: 50%; width: 80vw; height: 60vh; transform: translateX(-50%);
	background: radial-gradient(ellipse, rgba(79,141,251,.18), transparent 60%); filter: blur(40px); pointer-events: none; z-index: 1;
}
.nad-hero__content { position: relative; max-width: var(--nad-container); width: 100%; margin: 0 auto; z-index: 2; }
.nad-hero__title { font-size: clamp(44px, 7.2vw, 104px); line-height: .98; letter-spacing: -0.035em; font-weight: 700; margin: 0 0 40px; max-width: 14ch; color: var(--nad-ink); }
.nad-hero__title .nad-line { display: block; overflow: hidden; padding-bottom: 0.05em; }
.nad-hero__title .nad-line > span { display: block; }
.nad-hero__title em { font-style: normal; background: var(--nad-grad-accent-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.nad-hero__sub { font-size: clamp(17px, 1.4vw, 21px); font-weight: 300; line-height: 1.6; color: var(--nad-ink-2); max-width: 820px; margin: 0 0 76px; }
.nad-hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }

.nad-hero__bottom {
	position: absolute; bottom: 90px; left: var(--nad-gutter); right: var(--nad-gutter);
	display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; z-index: 3;
}
.nad-hero__scroll { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--nad-muted); }
.nad-hero__scroll-line { width: 1px; height: 80px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.4) 50%, transparent); position: relative; overflow: hidden; }
.nad-hero__scroll-line::before {
	content: ''; position: absolute; top: -20px; left: 0; width: 100%; height: 20px;
	background: linear-gradient(180deg, transparent, var(--nad-cyan)); animation: nad-scrollDown 2.5s ease-in-out infinite;
}
@keyframes nad-scrollDown { 0% { top: -20px; } 100% { top: 100%; } }
.nad-hero__caption { text-align: end; font-size: 13px; color: var(--nad-muted); display: flex; flex-direction: column; gap: 4px; }
.nad-hero__caption-num { font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: .1em; font-size: 11px; color: var(--nad-muted-2); }

.nad-marquee {
	position: absolute; bottom: 0; left: 0; right: 0; padding: 22px 0; overflow: hidden; z-index: 4;
	border-top: 1px solid var(--nad-glass-border);
	background: var(--nad-glass-bg); backdrop-filter: var(--nad-glass-blur); -webkit-backdrop-filter: var(--nad-glass-blur);
}
.nad-marquee__track { display: inline-flex; align-items: center; gap: 40px; white-space: nowrap; animation: nad-marquee 50s linear infinite; font-size: 15px; font-weight: 400; color: var(--nad-ink-2); letter-spacing: .02em; }
.nad-marquee__track .nad-diamond { color: var(--nad-violet); font-size: 8px; }
@keyframes nad-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(50%); } }

/* ===== Intro timeline (runs when .nad-hero gains .is-loaded) ===== */
.nad-hero__title .nad-line > span { transform: translateY(110%); transition: transform 1.1s var(--nad-t-out); }
.nad-hero__sub,
.nad-hero__cta,
.nad-hero__bottom,
.nad-marquee { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--nad-t-out), transform .7s var(--nad-t-out); }
.nad-hero.is-loaded .nad-hero__title .nad-line > span { transform: translateY(0); }
.nad-hero.is-loaded .nad-hero__title .nad-line:nth-child(1) > span { transition-delay: .40s; }
.nad-hero.is-loaded .nad-hero__title .nad-line:nth-child(2) > span { transition-delay: .50s; }
.nad-hero.is-loaded .nad-hero__title .nad-line:nth-child(3) > span { transition-delay: .60s; }
.nad-hero.is-loaded .nad-hero__sub { opacity: 1; transform: none; transition-delay: 1.0s; }
.nad-hero.is-loaded .nad-hero__cta { opacity: 1; transform: none; transition-delay: 1.2s; }
.nad-hero.is-loaded .nad-hero__bottom { opacity: 1; transform: none; transition-delay: 1.5s; }
.nad-hero.is-loaded .nad-marquee { opacity: 1; transform: none; transition-delay: 1.7s; }

@media (prefers-reduced-motion: reduce) {
	.nad-hero__title .nad-line > span,
	.nad-hero__sub, .nad-hero__cta, .nad-hero__bottom, .nad-marquee { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ===== Mobile ===== */
@media (max-width: 760px) {
	.nad-hero { padding: 120px var(--nad-gutter) 130px; min-height: auto; }
	.nad-hero__title { font-size: clamp(36px, 11vw, 52px); margin-bottom: 24px; max-width: none; }
	.nad-hero__sub { font-size: 15px; margin-bottom: 32px; line-height: 1.55; }
	.nad-hero__sub br { display: none; }
	.nad-hero__cta { flex-direction: column; align-items: stretch; gap: 10px; }
	.nad-hero__cta .nad-btn { width: 100%; }
	.nad-hero__cta .nad-btn--lg { padding: 15px 24px; font-size: 14.5px; }
	.nad-hero__bottom { display: none; }
	.nad-marquee { padding: 12px 0; }
	.nad-marquee__track { gap: 24px; font-size: 12.5px; }
}