/* Topo da página do Acendimento das Luzes de Natal (single-evento-acendimento-das-luzes-de-natal.php).
   Abaixo dele, a página usa os estilos normais de evento. */

.cap-natal {
	background: #03050f;
	color: #fff;
}

/* --------------------------------- Herói ------------------------------------ */

.cap-natal__heroi {
	background: url("../img/natal/fundo.webp") center bottom / cover no-repeat #03050f;
}

.cap-natal__heroi-in {
	display: grid;
	grid-template-columns: minmax(200px, 340px) minmax(0, 1fr);
	gap: clamp(24px, 5vw, 72px);
	align-items: center;
	padding-block: clamp(32px, 5vw, 64px);
}

.cap-natal__arvore {
	width: 100%;
	height: auto;
	overflow: visible;
}

.cap-natal__fitas {
	filter: drop-shadow(0 0 3px rgba(255, 200, 80, 0.9)) drop-shadow(0 0 10px rgba(255, 190, 60, 0.5));
}

.cap-natal__fitas path {
	fill: none;
	stroke-linecap: round;
}

/* O fio se desenha de baixo até a ponta, como na abertura. */
.cap-natal__ouro,
.cap-natal__prata {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: cap-natal-fio 2.8s linear 0.3s forwards;
}

.cap-natal__ouro { stroke: #ffc94a; stroke-width: 2.8; }
.cap-natal__prata { stroke: #fff6e2; stroke-width: 1.2; animation-delay: 0.4s; }

.cap-natal__pontos {
	stroke: #fff;
	stroke-width: 2.6;
	stroke-dasharray: 0.1 9;
	opacity: 0;
	animation: cap-natal-surge 1s ease 2.9s forwards;
}

.cap-natal__estrela {
	fill: #fff4cf;
	opacity: 0;
	transform: scale(0);
	transform-box: fill-box;
	transform-origin: center;
	filter: drop-shadow(0 0 8px #ffd54a) drop-shadow(0 0 22px #ffb300);
	animation: cap-natal-estrela 0.8s cubic-bezier(0.2, 1.4, 0.4, 1) 3s forwards;
}

@keyframes cap-natal-fio { to { stroke-dashoffset: 0; } }
@keyframes cap-natal-surge { to { opacity: 1; } }
@keyframes cap-natal-estrela { to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
	.cap-natal__ouro,
	.cap-natal__prata,
	.cap-natal__pontos,
	.cap-natal__estrela { animation-duration: 0.01s; animation-delay: 0s; }
}

html.cap-sem-animacao .cap-natal__ouro,
html.cap-sem-animacao .cap-natal__prata,
html.cap-sem-animacao .cap-natal__pontos,
html.cap-sem-animacao .cap-natal__estrela { animation-duration: 0.01s !important; animation-delay: 0s !important; }

.cap-natal__selo {
	margin: 0 0 1em;
	color: #e9cf95;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.cap-natal__titulo {
	margin: 0;
	padding-bottom: 0.08em;
	background: linear-gradient(100deg, #f4dca6 0%, #fffaf0 30%, #e6bc66 60%, #fff5d9 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-family: Georgia, "Times New Roman", "Noto Serif", serif;
	font-size: clamp(2.25rem, 5.4vw, 4.25rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1.08;
	text-wrap: balance;
}

.cap-natal__frase {
	margin: 0.9em 0 0;
	color: #f7e4b5;
	font-family: Georgia, "Times New Roman", "Noto Serif", serif;
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
}

.cap-natal__texto {
	margin: 0.6em 0 0;
	max-width: 32em;
	color: rgba(255, 255, 255, 0.88);
	font-size: clamp(1rem, 1.6vw, 1.1875rem);
	font-weight: 300;
	line-height: 1.55;
}

@media (max-width: 47.99em) {
	.cap-natal__heroi-in {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.cap-natal__arvore {
		width: min(62vw, 240px);
	}

	.cap-natal__texto {
		margin-inline: auto;
	}

	.cap-natal__selo {
		letter-spacing: 0.16em;
	}
}

@media print {
	.cap-natal,
	.cap-natal__heroi { background: none; color: #000; }
	.cap-natal__arvore { display: none; }
	.cap-natal__titulo { color: #000; background: none; }
	.cap-natal__frase,
	.cap-natal__texto { color: #000; }
}