/**
 * Estilos da Hero Section Main
 * Baseado no design do Figma node-id: 19248-162
 * Design: Céu rosa com estrelas, personagem ornamento rosa, vila ao fundo
 */

 /* 
 z-index: 4 → Divider (arbusto)
 z-index: 3 → Personagem
 z-index: 2 → Content (textos)
 z-index: 1 → Hero section (acima do main)
 z-index: 1 → Stars (dentro do background)
 z-index: 0 → Background container
 z-index: 0 → Sky (base)
 z-index: 0 → Main (abaixo do hero) 
 */

.hero-natal-main {
	position: relative;
	display: block; /* Mudado de flex para block para melhor controle */
	overflow: hidden;
	padding: 80px 0 0; /* Padding apenas no topo, bottom definido pela vila */
	height: 134vh;
	z-index: 1; /* Acima do main-natal para que as estrelas sejam visíveis */
	/* A altura será definida pela vila que está no bottom */
	/* Background transparente para que as estrelas sejam visíveis */
	pointer-events: none; 
	background: transparent;
}

/* Background - Céu rosa com gradiente */
.hero-natal-main__background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0; /* Background base */
	overflow: hidden; /* Mantém overflow hidden mas permite que elementos internos sejam visíveis */
}

.hero-natal-main__sky {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0; /* Base do background */
	/* Se não houver background definido, este elemento não deve cobrir as estrelas */
	pointer-events: none; /* Permite que elementos abaixo sejam visíveis */
	/* Removido background para não cobrir as estrelas */
	/* background: linear-gradient(180deg, #F198BE 0%, #E87BA8 50%, #D85A8F 100%); */
	/* Gradiente rosa conforme design do Figma */
	/* Se precisar de background, adicionar aqui */
}

.hero-natal-main__stars {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: drop-shadow(0 0 5px rgba(255, 255, 255, 1));
	opacity: 1;
	z-index: 1; /* Acima do sky, mas ainda no background */
	/* Animação controlada via GSAP */
	/* Garantir que está visível */
	display: block;
	visibility: visible;
}

.hero-natal-main__sparks {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	max-width: 1200px;
	height: auto;
	opacity: 0.6;
	z-index: 1;
	/* Animação controlada via GSAP */
}

/* Container */
.hero-natal-main__container {
	position: relative;
	width: 100%;
	/* A altura será definida pela vila */
}

/* Conteúdo */
.hero-natal-main__content {
	position: relative;
	z-index: 10; /* Acima de todos os elementos para ser clicável */
	width: 100%;
	height: 100%;
	min-height: 130vh; /* Altura mínima para garantir espaço */
	padding-bottom: 0; /* O bottom será definido pela vila */
	pointer-events: auto; /* Permite interação com o conteúdo */
}

.hero-natal-main__text {
	text-align: center;
	color: #ffffff;
	margin-bottom: 120px; /* Espaçamento aumentado para separar do personagem */
	padding: 0 20px;
	position: relative;
	z-index: 10; /* Garante que está acima */
	pointer-events: auto; /* Permite interação */
}

.hero-natal-main__title {
	font-family: var(--font-family-headings); /* Bricolage Grotesque */
	font-size: 6.25rem;
	padding-inline: 24px;
	font-weight: var(--font-weight-extrabold);
	line-height: 1.1;
	margin-bottom: 24px;
	color: #ffffff;
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
}

.hero-natal-main__description {
	font-family: var(--font-family-body); /* Globotipo Rounded */
	font-size: 1.25rem;
	font-weight: var(--font-weight-normal);
	line-height: 1.7;
	margin-bottom: 40px;
	color: #ffffff;
	opacity: 0.95;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.hero-natal-main__cta {
	margin-top: 32px;
	position: relative;
	z-index: 10; /* Garante que está acima */
	pointer-events: auto; /* Permite interação com o botão */
}

/* Botão CTA customizado */
.btn-natal-main-cta {
	text-decoration: none;
	font-family: var(--font-family-body);
	display: inline-block;
	height: auto;
	position: relative;
	z-index: 10; /* Acima de tudo para ser clicável */
	pointer-events: auto; /* Permite interação com o botão */
	transition: all 0.3s ease;
	cursor: pointer;
}

.btn-natal-main-cta.b-style {
	background-color: var(--color-green);
	border: 2px solid var(--color-green);
}

.btn-natal-main-cta:focus {
	background-color: #0a5d02;
	border-color: #053d00;
}

.btn-natal-main-cta:active {
	background-color: #084a01 !important; /* Mantém background mais escuro quando pressionado */
	border-color: #042a00 !important;
	text-decoration: none;
	transform: translateY(0) !important; /* Remove o efeito de elevação quando pressionado */
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) !important; /* Sombra mais próxima quando pressionado */
}

/* Cena com personagem e vila */
.hero-natal-main__scene {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	/* max-width: 1400px; */
	margin: 0 auto;
	z-index: 1;
	pointer-events: none; 
	/* A altura será definida pela vila */
	/* O scene está posicionado no bottom para que a vila defina o final do componente */
	/* A altura do scene será a altura da vila, definindo o bottom do componente */
}

/* Personagem principal */
.hero-natal-main__character {
	position: relative;
	width: 100%;
	max-width: 450px;
	margin: 0 auto;
	margin-bottom: 11%; 
	z-index: 3;
	/* transform: translateY(-200px);  */
	pointer-events: none; /* Permite interação com elementos acima */
}

.hero-natal-main__character-img {
	width: 100%;
	height: auto;
	display: block;
	position: relative;
	z-index: 2;
	filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.2));
	pointer-events: none; 
}

/* Efeitos de brilho ao redor do personagem */
.hero-natal-main__glow {
	position: absolute;
	z-index: 1;
	pointer-events: none;
}

.hero-natal-main__glow--all {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 120%;
	height: auto;
	opacity: 0.5;
	/* Animação controlada via GSAP */
	pointer-events: none; 
}

/* Vila ao fundo - Define o bottom do componente */
/* Agora está diretamente no hero, não dentro do scene, para alinhamento correto */
.hero-natal-main__village {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 1; /* Atrás do divider (z-index: 4) */
	opacity: 1;
	/* A vila define onde o componente termina */
	pointer-events: none; /* Permite interação com elementos acima */
}

.hero-natal-main__village-img {
	width: 100%;
	height: auto;
	display: block;
	vertical-align: bottom; /* Alinha no bottom */
	/* A altura da imagem define a altura final do componente */
	pointer-events: none; /* Permite interação com elementos acima */
}

/* Chão/Base verde */
.hero-natal-main__ground {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 80px;
	background: linear-gradient(180deg, rgba(59, 170, 124, 0.3) 0%, rgba(45, 138, 102, 0.8) 100%);
	z-index: 0;
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

/* Arbusto divider no bottom para junção com próxima seção */
.hero-natal-main__divider {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 4; /* Acima de tudo para fazer a transição */
	pointer-events: none;
}

.hero-natal-main__divider-img {
	width: 100%;
	height: auto;
	display: block;
	vertical-align: bottom;
	/* A imagem define o final do componente e faz a junção com a próxima seção */
}

/* Responsividade */

/* Breakpoint para notebooks de tela pequena (1366x768) */
@media (max-width: 1366px) {
	.hero-natal-main {
		padding: 60px 0 0;
	}

	.hero-natal-main__content {
		padding: 0 20px;
	}

	.hero-natal-main__title {
		font-size: 5rem;
	}

	.hero-natal-main__description {
		font-size: 1.2rem;
	}

	.hero-natal-main__character {
		max-width: 400px;
	}
}

@media (max-width: 991.98px) {
	.hero-natal-main {
		padding: 50px 0 0; /* Padding apenas no topo, bottom definido pela vila */
	}

	.hero-natal-main__content {
		min-height: auto;
	}

	.hero-natal-main__title {
		font-size: 4.25rem;
		margin-bottom: 20px;
	}

	.hero-natal-main__description {
		font-size: 1.1rem;
		margin-bottom: 32px;
	}

	.hero-natal-main__text {
		margin-bottom: 80px; /* Espaçamento mantido em tablets */
	}

	.hero-natal-main__character {
		max-width: 350px;
		margin-bottom: 2%;
	}
}

@media (max-width: 767.98px) {
	.hero-natal-main {
		height: 96vh;
		padding: 40px 0 0; /* Padding apenas no topo, bottom definido pela vila */
	}

	.hero-natal-main__content {
		min-height: auto;
	}

	.hero-natal-main__title {
		font-size: 2rem;
		margin-bottom: 16px;
	}

	.hero-natal-main__description {
		font-size: 1rem;
		line-height: 1.6;
		margin-bottom: 24px;
		padding: 0 15px;
	}

	.hero-natal-main__cta {
		margin-top: 24px;
	}

	.hero-natal-main__text {
		margin-bottom: 60px; /* Espaçamento reduzido em mobile */
	}

	.btn-natal-main-cta {
		font-size: 1rem;
		padding: 14px 36px;
	}

	.hero-natal-main__character {
		width: 100%;
		max-width: 250px;
		padding: 0 20px;
		margin-bottom: -13%;
	}

	.hero-natal-main__village {
		max-width: 100%;
	}

	.hero-natal-main__ground {
		height: 60px;
	}
}