@font-face {
  font-family: 'callidar-df';
  src: url('../assets/fonts/callidar-df.ttf') format('truetype') 
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
}

body {
	background: #111;
	color: white;
	overflow: hidden;
}

.container {
	display: flex;
	height: 100vh;
	width: 100vw;
}

.slideshow {
	width: 75%;
	background: #000;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative; 
}

/* Garante que TODAS as imagens comecem invisíveis e sem ocupar espaço */
/*#slideshow img { 
	position: absolute;
	max-width: 100%; 
	max-height: 100%; 
	object-fit: contain; 
	opacity: 0; 
	transition: opacity 1.5s ease-in-out; 
	z-index: 1; 
}*/

/* Só esta classe faz a foto aparecer */
/*#slideshow img.active { 
	opacity: 1; 
	z-index: 2; 
}*/

.slideshow {
	width: 75%;
	background: #000;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative; 
	overflow: hidden; /* Importante para cortar o excesso do desfoque */
}

/* Criando o Background Desfocado Dinâmico de 100% */
.slideshow::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--current-bg, none);
	background-size: cover;
	background-position: center;
	filter: blur(20px); /* Ajuste a quantidade de desfoque aqui */
	transform: scale(1.1); /* Aumenta 10% para sumir com as quinas brancas geradas pelo blur */
	z-index: 0;
	transition: background-image 1.5s ease-in-out; /* Suaviza a troca do fundo junto com a foto */
	opacity: 0.4; /* Opacidade do fundo para não brigar com a foto nítida da frente */
}

/* Garante que TODAS as imagens comecem invisíveis e sem ocupar espaço */
#slideshow img { 
	position: absolute;
	max-width: 99%; /* Deixa uma margem elegante para o fundo aparecer nas laterais */
	max-height: 99%; 
	object-fit: contain; 
	opacity: 0; 
	transition: opacity 1.5s ease-in-out; 
	z-index: 2; /* Fica por cima do background desfocado */
	box-shadow: 0 20px 40px rgba(0,0,0,0.6); /* Sombra para destacar a foto nítida do fundo */
	border-radius: 4px;
}

/* Só esta classe faz a foto aparecer */
#slideshow img.active { 
	opacity: 1; 
}


/* === NOVO CSS DO LAYER DE LEGENDA/MENSAGEM === */
.legenda-container {
	position: absolute;
	bottom: 35px; /* Distância do fundo */
	left: 35px; /* Distância do canto esquerdo */
	width: auto;
	max-width: 50%; /* Ocupa no máximo metade da área da foto */
	background: rgba(255, 255, 255, 0.82); /* Fundo branco elegante */
	backdrop-filter: blur(10px); /* Efeito de vidro jateado moderno */
	border-left: 6px solid var(--marsala-soft); /* Detalhe rosa com a cor da festa #c2185b*/
	border-radius: 4px 12px 12px 4px;
	padding: 15px 25px;
	color: #222;
	font-size: 2.6vh; /* Se adapta ao tamanho do telão */
	font-weight: 600;
	line-height: 1.4;
	z-index: 10; /* Sempre por cima das fotos */
	box-shadow: 0 10px 30px rgba(0,0,0,0.5);
	
	/* Efeito de transição suave quando o quadro aparece/some */
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

/* Classe que ativa a visibilidade da legenda */
.legenda-container.visible {
	opacity: 1;
	transform: translateY(0);
}

/* === BARRA LATERAL === */
.lateral {
	width: 25%;
	background: #75234e;
	background: radial-gradient(circle, rgba(117, 35, 78, 1) 0%, rgba(107, 41, 74, 1) 73%, rgba(133, 52, 95, 1) 100%);
	display: flex;
	flex-direction: column;
	justify-content: center; /* Centraliza os elementos verticalmente de forma elegante */
	align-items: center;
	padding: 30px;
	box-shadow: -10px 0 20px rgba(0,0,0,0.6); 
	z-index: 15;
}

h1 {
	color: var(--silver);
	text-align: center;
	margin-bottom: 15px;
	font-size: 4.5vh; /* Se adapta ao tamanho da tela */
}

h2 {
	color: var(--silver);
	text-align: center;
	margin-bottom: 5px;
	font-size: 5.5vh; /* Se adapta ao tamanho da tela */
}

p {
	text-align: center;
	margin-bottom: 10px;
	font-size: 3.2vh;
	line-height: 1.4;
}

.qrcode {
	width: 80%;
	max-width: 300px;
	aspect-ratio: 1 / 1; /* Garante que seja um quadrado perfeito */
	/*background: white;*/
	//border-radius: 15px; /* Cantos arredondados modernos */
	/*box-shadow: 0 4px 15px rgba(0,0,0,0.1);*/
	display: flex;
	align-items: center;
	justify-content: center;
	//padding: 10px;
	margin-bottom: 5px;
}

.qrcode img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.rodape {
	margin-top: 10px;
	font-size: 3vh;
	text-align: center;
}


.footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 10px;
}
.name{font-family:var(--font-birthdayName);font-size:clamp(53px,7vw,104px)/*font-size:clamp(70px,10vw,104px)*/;line-height:.9;color:var(--white)}
.age{font-family:var(--font-age);color:var(--white)}
.age strong{display:block;font-size:64px;font-weight:400;line-height:1}
.age span{letter-spacing:.38em;font-size:18px}
.invite-msg{font-size:18px;line-height:1.45}

.letter-name{
  width:100%;
  max-width:100%;
  margin:0 auto;
  padding-inline:.05em;
  box-sizing:border-box;
  white-space:normal;
  overflow-wrap:anywhere;
  text-align:center;
  font-size:clamp(20px,9dvw,33px);
  text-shadow: 0 -1px 0 rgba(255, 255, 255, .85), 0 1px 0 rgba(95, 95, 95, .65), 0 3px 4px rgba(0, 0, 0, .35), 0 0 30px rgba(192, 192, 192, .20);
}


.footer-text{
	position: absolute;
	font-family:Poppins, serif;
	text-align:center;
	font-size:10px;
	background-color: transparent;
	color: rgb(157 159 163/ 0.9);
	/*align-items:center;
	justify-content:flex-end;			
	padding:clamp(30px,4.2dvh,46px);
	text-transform:uppercase;*/
	margin-bottom:clamp(12px,2.5dvh,18px);
}