/**
 * House banner — hybrid creative (e-agentie.ro).
 * Scoped under .arc-house-banner so demo/page styles never leak.
 */

.arc-house-banner {
	--ink: #101010;
	--ink-2: #1c1c1c;
	--paper: #f5f5f2;
	--gold: #f5c400;
	--gold-deep: #d9a900;
	--loop: 16s;
	box-sizing: border-box;
	container-name: banner;
	container-type: inline-size;
	font-family: system-ui, "Segoe UI", Roboto, sans-serif;
	inline-size: 100%;
}

.arc-house-banner *,
.arc-house-banner *::before,
.arc-house-banner *::after {
	box-sizing: border-box;
}

.arc-ad-slot:has(.arc-house-banner) {
	overflow: hidden;
}

.arc-ad-slot--home:has(.arc-house-banner) .arc-ad-slot__content,
.arc-ad-slot--article:has(.arc-house-banner) .arc-ad-slot__content,
.arc-ad-slot--sidebar:has(.arc-house-banner) .arc-ad-slot__content {
	max-width: 100%;
	width: 100%;
}

.arc-house-banner .arc-banner {
	align-items: stretch;
	background: repeating-linear-gradient(115deg, var(--ink) 0 90px, var(--ink-2) 90px 180px);
	border-radius: 6px;
	color: var(--paper);
	display: grid;
	grid-template-columns: auto 1fr;
	inline-size: 100%;
	min-block-size: clamp(92px, 14cqi, 134px);
	overflow: hidden;
	position: relative;
	text-decoration: none;
}

/*
 * Theme link/hover colors (light mode brand burgundy) leak into this <a>
 * and paint headlines and pills dark-on-dark. Lock the creative palette.
 */
html body .arc-house-banner a.arc-banner,
html body .arc-house-banner a.arc-banner:link,
html body .arc-house-banner a.arc-banner:visited,
html body .arc-house-banner a.arc-banner:hover,
html body .arc-house-banner a.arc-banner:active,
html body .arc-house-banner a.arc-banner:focus {
	background: repeating-linear-gradient(115deg, var(--ink) 0 90px, var(--ink-2) 90px 180px);
	color: var(--paper) !important;
	text-decoration: none;
}

html body .arc-house-banner .headline,
html body .arc-house-banner .seq,
html body .arc-house-banner .services span,
html body .arc-house-banner .stat > span {
	color: var(--paper) !important;
}

html body .arc-house-banner .kicker,
html body .arc-house-banner .headline em,
html body .arc-house-banner .stat strong {
	color: var(--gold) !important;
}

html body .arc-house-banner .sub {
	color: color-mix(in oklab, var(--paper) 72%, transparent) !important;
}

html body .arc-house-banner .logo-panel,
html body .arc-house-banner .logo-mediasoft-line,
html body .arc-house-banner .logo-since {
	color: var(--ink) !important;
}

html body .arc-house-banner .logo-mediasoft-line em,
html body .arc-house-banner .logo-since strong {
	color: var(--gold-deep) !important;
}

html body .arc-house-banner .cta {
	background: linear-gradient(180deg, var(--gold), var(--gold-deep));
	color: var(--ink) !important;
}

html body .arc-house-banner .cta b {
	background: var(--ink);
	color: var(--gold) !important;
}

.arc-house-banner .arc-banner:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: 3px;
}

.arc-house-banner .bg-arches {
	block-size: 42%;
	inline-size: 100%;
	inset-block-end: 3px;
	inset-inline: 0;
	opacity: 0.3;
	pointer-events: none;
	position: absolute;
}

.arc-house-banner .bg-arches path {
	fill: none;
	stroke: color-mix(in oklab, var(--gold) 20%, transparent);
	stroke-width: 2;
}

.arc-house-banner .bg-corner {
	aspect-ratio: 1;
	background: linear-gradient(225deg, var(--gold) 0 12%, transparent 12.5%);
	inline-size: clamp(40px, 8cqi, 80px);
	inset-block-start: 0;
	inset-inline-end: 0;
	pointer-events: none;
	position: absolute;
}

.arc-house-banner .arc-banner::after {
	animation: branduri-house-progress var(--loop) linear infinite;
	background: var(--gold);
	block-size: 3px;
	content: "";
	inline-size: 100%;
	inset-block-end: 0;
	inset-inline-start: 0;
	position: absolute;
	transform-origin: left;
	z-index: 3;
}

@keyframes branduri-house-progress {
	from { scale: 0 1; }
	to { scale: 1 1; }
}

.arc-house-banner .logo-panel {
	align-items: center;
	background: var(--paper);
	clip-path: polygon(0 0, 100% 0, calc(100% - clamp(14px, 2.5cqi, 26px)) 100%, 0 100%);
	color: var(--ink);
	display: flex;
	gap: clamp(0.6rem, 1.6cqi, 1.1rem);
	min-inline-size: max-content;
	padding-inline: clamp(0.9rem, 2.4cqi, 1.9rem) clamp(1.5rem, 3.6cqi, 2.9rem);
	position: relative;
	z-index: 2;
}

.arc-house-banner .logo-panel::after {
	background: var(--gold);
	block-size: auto;
	content: "";
	inline-size: clamp(4px, 0.7cqi, 7px);
	inset-block: 0;
	inset-inline-end: clamp(4px, 0.8cqi, 8px);
	position: absolute;
	transform: skewX(-13deg);
}

.arc-house-banner .logo-arc {
	block-size: auto;
	flex-shrink: 0;
	inline-size: clamp(84px, 17cqi, 158px);
}

.arc-house-banner .logo-arc .c-gold {
	animation: branduri-house-drawm var(--loop) ease-out infinite;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
}

@keyframes branduri-house-drawm {
	0% { stroke-dashoffset: 100; }
	7%, 95% { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: 100; }
}

.arc-house-banner .logo-text {
	display: grid;
	gap: 0.25rem;
	justify-items: center;
}

.arc-house-banner .logo-mediasoft-line {
	color: var(--ink);
	font-size: clamp(0.7rem, 1.8cqi, 1.05rem);
	font-weight: 700;
	letter-spacing: 0.28em;
	white-space: nowrap;
}

.arc-house-banner .logo-mediasoft-line em {
	color: var(--gold-deep);
	font-style: normal;
}

.arc-house-banner .logo-since {
	border-block-start: 2px solid var(--ink);
	font-size: clamp(0.52rem, 1.15cqi, 0.7rem);
	font-weight: 700;
	letter-spacing: 0.12em;
	padding-block-start: 0.25rem;
	text-transform: uppercase;
}

.arc-house-banner .logo-since strong {
	color: var(--gold-deep);
}

.arc-house-banner .stage {
	align-items: center;
	display: grid;
	grid-template-areas: "stage";
	min-inline-size: 0;
	padding-block: clamp(0.75rem, 1.8cqi, 1.2rem);
	padding-inline: clamp(1rem, 3cqi, 2.5rem);
	position: relative;
	z-index: 1;
}

.arc-house-banner .seq {
	align-items: center;
	animation: var(--loop) ease-in-out infinite;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	grid-area: stage;
	justify-content: center;
	opacity: 0;
	text-align: center;
}

.arc-house-banner .seq--1 { animation-name: branduri-house-slot1; }
.arc-house-banner .seq--2 { animation-name: branduri-house-slot2; }
.arc-house-banner .seq--3 { animation-name: branduri-house-slot3; }
.arc-house-banner .seq--4 { animation-name: branduri-house-slot4; }

@keyframes branduri-house-slot1 {
	0%, 2% { opacity: 0; translate: 0 8px; }
	5%, 22% { opacity: 1; translate: 0 0; }
	25%, 100% { opacity: 0; translate: 0 -8px; }
}

@keyframes branduri-house-slot2 {
	0%, 27% { opacity: 0; translate: 0 8px; }
	30%, 47% { opacity: 1; translate: 0 0; }
	50%, 100% { opacity: 0; translate: 0 -8px; }
}

@keyframes branduri-house-slot3 {
	0%, 52% { opacity: 0; translate: 0 8px; }
	55%, 72% { opacity: 1; translate: 0 0; }
	75%, 100% { opacity: 0; translate: 0 -8px; }
}

@keyframes branduri-house-slot4 {
	0%, 77% { opacity: 0; translate: 0 8px; }
	80%, 97% { opacity: 1; translate: 0 0; }
	100% { opacity: 0; }
}

.arc-house-banner .kicker {
	color: var(--gold);
	font-size: clamp(0.55rem, 1.3cqi, 0.75rem);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.arc-house-banner .headline {
	font-size: clamp(0.95rem, 3.1cqi, 1.9rem);
	font-weight: 900;
	letter-spacing: 0.03em;
	line-height: 1.12;
	text-wrap: balance;
}

.arc-house-banner .headline em {
	color: var(--gold);
	font-style: normal;
}

.arc-house-banner .sub {
	color: color-mix(in oklab, var(--paper) 70%, transparent);
	font-size: clamp(0.6rem, 1.4cqi, 0.82rem);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.arc-house-banner .services {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.5rem;
	justify-content: center;
	margin-block-start: 0.2rem;
}

.arc-house-banner .services span {
	border: 1px solid color-mix(in oklab, var(--gold) 55%, transparent);
	border-radius: 999px;
	font-size: clamp(0.58rem, 1.35cqi, 0.78rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 0.3em 0.7em;
	white-space: nowrap;
}

.arc-house-banner .stats {
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(0.9rem, 3cqi, 2.2rem);
	justify-content: center;
}

.arc-house-banner .stat {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	position: relative;
}

.arc-house-banner .stat + .stat::before {
	background: color-mix(in oklab, var(--paper) 25%, transparent);
	content: "";
	inline-size: 1px;
	inset-block: 15%;
	inset-inline-start: calc(clamp(0.9rem, 3cqi, 2.2rem) / -2);
	position: absolute;
}

.arc-house-banner .stat strong {
	color: var(--gold);
	font-size: clamp(1.1rem, 3.6cqi, 2.1rem);
	font-weight: 900;
	line-height: 1;
}

.arc-house-banner .stat > span {
	color: color-mix(in oklab, var(--paper) 75%, transparent);
	font-size: clamp(0.52rem, 1.2cqi, 0.72rem);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.arc-house-banner .seq--4,
.arc-house-banner .seq--static {
	align-items: center;
}

.arc-house-banner .cta {
	align-items: center;
	animation: branduri-house-pulse 1.2s ease-in-out infinite alternate;
	background: linear-gradient(180deg, var(--gold), var(--gold-deep));
	border: 2px solid var(--ink);
	border-radius: 4px;
	box-shadow: 3px 3px 0 rgb(0 0 0 / 0.55);
	color: var(--ink);
	display: inline-flex;
	flex-direction: column;
	font-weight: 800;
	gap: 0.15rem;
	margin-block-start: 0.3rem;
	padding: clamp(0.45rem, 1.3cqi, 0.75rem) clamp(1rem, 2.4cqi, 1.7rem);
}

@keyframes branduri-house-pulse {
	from { scale: 1; }
	to { scale: 1.04; }
}

.arc-house-banner .cta small {
	font-size: clamp(0.5rem, 1.05cqi, 0.66rem);
	letter-spacing: 0.2em;
}

.arc-house-banner .cta b {
	background: var(--ink);
	border-radius: 3px;
	color: var(--gold);
	font-size: clamp(0.72rem, 1.8cqi, 1rem);
	padding: 0.15em 0.55em;
}

@container banner (max-width: 640px) {
	.arc-house-banner .logo-since { display: none; }
	.arc-house-banner .sub { display: none; }
	.arc-house-banner .bg-arches { opacity: 0.18; }
}

@container banner (max-width: 500px) {
	.arc-house-banner .logo-mediasoft-line { display: none; }
	.arc-house-banner .logo-panel { padding-inline: clamp(0.7rem, 3cqi, 1rem) clamp(1.2rem, 4.5cqi, 1.7rem); }
	.arc-house-banner .services span:nth-child(n+4) { display: none; }
	.arc-house-banner .stat:nth-child(2) { display: none; }
	.arc-house-banner .stat + .stat::before { display: none; }
}

@container banner (max-width: 330px) {
	.arc-house-banner:not(.arc-house-banner--sidebar) .logo-panel { display: none; }
	.arc-house-banner:not(.arc-house-banner--sidebar) .arc-banner { grid-template-columns: 1fr; }
	.arc-house-banner:not(.arc-house-banner--sidebar) .services { display: none; }
}

.arc-house-banner--sidebar .arc-banner {
	grid-template-columns: 1fr;
	min-block-size: 220px;
}

.arc-house-banner--sidebar .logo-panel {
	clip-path: none;
	display: flex;
	justify-content: center;
	min-inline-size: 0;
	padding-block: 0.65rem;
	padding-inline: 1rem;
}

.arc-house-banner--sidebar .logo-panel::after {
	display: none;
}

.arc-house-banner--sidebar .logo-since {
	display: block;
}

.arc-house-banner--sidebar .stage {
	padding-inline: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
	.arc-house-banner .arc-banner::after,
	.arc-house-banner .cta,
	.arc-house-banner .logo-arc .c-gold {
		animation: none;
	}

	.arc-house-banner .logo-arc .c-gold {
		stroke-dashoffset: 0;
	}

	.arc-house-banner .seq {
		animation: none;
		opacity: 0;
	}

	.arc-house-banner .seq--static {
		opacity: 1;
	}
}

.arc-house-banner .seq--static {
	opacity: 0;
}