/* ==========================================================================
   Assembleias (serviços) — cena que cresce e roda vídeo
   ========================================================================== */
.asm-expand {
	position: relative;
	height: 200vh;
	background: var(--bg-navy);
}
.asm-expand-pin {
	position: sticky;
	top: 0;
	height: 100vh;
	min-height: 100dvh;
	display: grid;
	place-items: center;
	overflow: clip;
}

/* o retângulo que cresce */
.asm-expand-stage {
	position: relative;
	display: block;
	width: min(52vw, 640px);
	height: min(32vw, 380px);
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid rgba(255,255,255,0.14);
	box-shadow: 0 40px 90px rgba(2,6,24,0.6);
	will-change: width, height, border-radius;
}

.asm-expand-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.asm-expand-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(ellipse at center, rgba(2,6,24,0.25) 0%, rgba(2,6,24,0.72) 100%),
		linear-gradient(180deg, rgba(2,6,24,0.2) 0%, rgba(2,6,24,0.75) 100%);
}

/* dica "role para ver" — só enquanto o retângulo é pequeno */
.asm-expand-hint {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(241,243,249,0.8);
	white-space: nowrap;
}
.asm-expand-hint-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gold-1);
	animation: asm-pulse 1.4s ease-in-out infinite;
}
@keyframes asm-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* conteúdo que surge quando a tela está cheia e o vídeo tocou */
.asm-expand-content {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--gutter);
	opacity: 0;
	pointer-events: none;
}
.asm-expand-content .eyebrow { margin-bottom: 20px; }
.asm-expand-title {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: clamp(30px, 4.4vw, 66px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	max-width: 20ch;
	text-wrap: balance;
}
.asm-expand-title .accent { color: var(--gold-1); }
.asm-expand-sub {
	margin: 22px auto 0;
	max-width: 56ch;
	font-size: clamp(15px, 1.2vw, 18px);
	font-weight: 300;
	line-height: 1.6;
	color: var(--text-light-90);
}
.asm-expand-btn {
	margin-top: 32px;
	pointer-events: none;
	/* .btn é inline-flex; garanto que não estica no container centralizado */
	align-self: center;
	width: auto;
}
/* a seta estava sem tamanho e explodia o botão */
.asm-expand-btn .arrow {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	transform: rotate(-135deg);
}

/* estado estático (sem JS / reduced-motion): já grande e com conteúdo */
.asm-expand--static { height: auto; }
.asm-expand--static .asm-expand-pin { position: relative; height: auto; min-height: 0; }
.asm-expand--static .asm-expand-stage {
	width: 100%;
	max-width: var(--container);
	height: clamp(460px, 70vh, 720px);
	border-radius: var(--radius-lg);
}
.asm-expand--static .asm-expand-hint { display: none; }
.asm-expand--static .asm-expand-content { position: absolute; opacity: 1; pointer-events: auto; }
.asm-expand--static .asm-expand-btn { pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
	.asm-expand { height: auto; }
	.asm-expand-pin { position: relative; height: auto; min-height: 0; }
	.asm-expand-stage { width: 100%; max-width: var(--container); height: clamp(460px, 70vh, 720px); }
	.asm-expand-hint { display: none; }
	.asm-expand-content { position: absolute; opacity: 1; pointer-events: auto; }
}

@media (max-width: 900px) {
	.asm-expand { height: 200vh; }
	.asm-expand-stage { width: 78vw; height: 62vw; }
	.asm-expand-title { font-size: clamp(26px, 7vw, 40px); }
}