/* Santinhoz Céu — "▶ Ouvir a historinha" (palco mágico dos posts). Carregado só nos posts que têm historinha. */

/* ---------- botão sobre a imagem do topo ---------- */
.szc .szh-com-botao { position: relative; }
.szc .szh-abrir {
	position: absolute;
	left: 50%;
	bottom: 18px;
	translate: -50% 0;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 24px 12px 12px;
	font-family: "Fredoka", sans-serif;
	font-weight: 600;
	font-size: 18px;
	white-space: nowrap;
	color: #4A2E00;
	background: linear-gradient(180deg, #FFE08A, #E8A93C);
	border: 3px solid #fff;
	border-radius: 999px;
	box-shadow: 0 6px 0 #B97D1E, 0 0 0 0 rgba(255, 214, 110, .7);
	cursor: pointer;
	animation: szh-chama 2.2s ease-in-out infinite;
}
.szc .szh-abrir:hover { filter: brightness(1.06); }
.szc .szh-abrir:active { transform: translateY(3px); box-shadow: 0 3px 0 #B97D1E; }
.szc .szh-abrir-ic {
	display: grid; place-items: center;
	width: 34px; height: 34px;
	font-size: 14px;
	color: #fff;
	background: linear-gradient(180deg, #5585CC, #3D6FB6);
	border-radius: 50%;
	padding-left: 3px;
}
.szc .blog-content > .szh-abrir { position: static; translate: none; margin: 0 auto 22px; display: flex; width: fit-content; }
@keyframes szh-chama {
	0%, 100% { box-shadow: 0 6px 0 #B97D1E, 0 0 0 0 rgba(255, 214, 110, .75); }
	50%      { box-shadow: 0 6px 0 #B97D1E, 0 0 0 14px rgba(255, 214, 110, 0); }
}
@media (max-width: 575px) {
	.szc .szh-abrir { font-size: 15.5px; bottom: 10px; padding: 9px 18px 9px 9px; }
	.szc .szh-abrir-ic { width: 28px; height: 28px; font-size: 12px; }
}

/* faíscas que explodem do botão */
.szh-faisca {
	position: fixed;
	z-index: 100001;
	pointer-events: none;
	font-size: 20px;
	color: #FFD56E;
	text-shadow: 0 0 10px rgba(255, 214, 110, .9);
	translate: -50% -50%;
	animation: szh-faisca 1.1s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes szh-faisca {
	from { transform: translate(0, 0) scale(.2) rotate(0); opacity: 1; }
	70%  { opacity: 1; }
	to   { transform: translate(var(--dx), var(--dy)) scale(var(--s)) rotate(200deg); opacity: 0; }
}

/* ---------- palco ---------- */
html.szh-aberto, html.szh-aberto body { overflow: hidden !important; }
.szh, .szh *, .szh *::before, .szh *::after { box-sizing: border-box; }
.szh {
	--azul: #2E3E6B;
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: "Nunito", sans-serif;
	color: var(--azul);
	/* portal: círculo que se abre a partir do toque */
	clip-path: circle(0 at var(--px, 50%) var(--py, 50%));
	transition: clip-path .9s cubic-bezier(.65, 0, .35, 1);
}
.szh.aberto { clip-path: circle(150vmax at var(--px, 50%) var(--py, 50%)); }
.szh.fechando { clip-path: circle(0 at 50% 50%); transition-duration: .45s; }
/* aro dourado do portal */
.szh::after {
	content: "";
	position: absolute;
	left: var(--px, 50%); top: var(--py, 50%);
	width: 10px; height: 10px;
	translate: -50% -50%;
	border-radius: 50%;
	box-shadow: 0 0 0 6px rgba(255, 224, 138, .9), 0 0 40px 18px rgba(255, 214, 110, .7);
	pointer-events: none;
	opacity: 0;
}
.szh.aberto::after { animation: szh-aro .9s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes szh-aro {
	0%   { width: 10px; height: 10px; opacity: 1; }
	100% { width: 300vmax; height: 300vmax; opacity: 0; }
}

.szh-ceu {
	position: absolute; inset: 0; overflow: hidden;
	background:
		radial-gradient(ellipse 120% 70% at 50% 0%, #1E3A78 0%, transparent 70%),
		linear-gradient(180deg, #2A4A8C 0%, #3D6FB6 38%, #6FA8DE 72%, #A9D4F2 100%);
}
.szh-raios {
	position: absolute; left: -50%; right: -50%; top: -20%; height: 95%;
	background: repeating-conic-gradient(from 180deg at 50% 0%, rgba(255, 255, 255, .08) 0 5deg, transparent 5deg 13deg);
	-webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent);
	animation: szh-gira 60s linear infinite;
}
@keyframes szh-gira { to { transform: rotate(10deg); } }
.szh-estrelas i {
	position: absolute; width: var(--t); height: var(--t); border-radius: 50%;
	background: #fff; box-shadow: 0 0 6px 1px rgba(255, 255, 255, .8);
	animation: szh-pisca var(--d) ease-in-out var(--a) infinite;
}
.szh-estrelas i.ouro { background: none; box-shadow: none; width: auto; height: auto; font-style: normal; font-size: var(--t); line-height: 1; color: #FFE08A; text-shadow: 0 0 8px rgba(255, 214, 110, .9); }
@keyframes szh-pisca { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }
.szh-nuvem {
	position: absolute; height: 16vh; aspect-ratio: 3; opacity: .8;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100'%3E%3Cg fill='%23fff'%3E%3Cellipse cx='80' cy='65' rx='60' ry='32'/%3E%3Cellipse cx='150' cy='45' rx='70' ry='42'/%3E%3Cellipse cx='225' cy='65' rx='60' ry='30'/%3E%3Crect x='40' y='60' width='220' height='35' rx='17'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
	animation: szh-voa linear infinite;
}
.szh-nuvem.n1 { top: 12%; animation-duration: 70s; animation-delay: -25s; }
.szh-nuvem.n2 { top: 30%; height: 11vh; opacity: .55; animation-duration: 95s; animation-delay: -60s; }
.szh-nuvem.n3 { top: 6%; height: 9vh; opacity: .45; animation-duration: 120s; animation-delay: -8s; }
@keyframes szh-voa { from { transform: translateX(-40vw); } to { transform: translateX(120vw); } }

/* progresso das partes da história */
.szh-pontos { position: relative; z-index: 3; display: flex; gap: 6px; width: min(860px, calc(100% - 120px)); margin: 22px auto 0; }
.szh-pontos i { flex: 1; height: 6px; border-radius: 9px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.szh-pontos i b { display: block; height: 100%; width: 0; background: #FFE08A; transition: width .25s linear; }
.szh-pontos i.feito b { width: 100%; }

.szh-fechar {
	position: absolute; top: 12px; right: 14px; z-index: 6;
	width: 46px; height: 46px; border-radius: 50%;
	font-size: 20px; font-weight: 800; line-height: 1;
	color: var(--azul); background: #fff; border: 3px solid #F3E6CA;
	box-shadow: 0 4px 0 rgba(27, 36, 71, .25); cursor: pointer;
}

/* ---------- cena: santinho + nome ---------- */
.szh-cena { position: relative; z-index: 2; flex: 1; width: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center; }
.szh-nome {
	position: relative; order: -1; flex: none; width: 100%; margin: 12px 0 6px !important; padding: 0 16px;
	text-align: center;
	font-family: "Fredoka", sans-serif !important; font-weight: 700 !important;
	font-size: clamp(24px, 4.4vw, 46px) !important; line-height: 1.1;
	color: #fff !important; text-shadow: 0 3px 0 rgba(27, 36, 71, .35), 0 0 24px rgba(255, 214, 110, .55);
}
.szh-nome span { display: inline-block; opacity: 0; }
.szh.apresentado .szh-nome span { animation: szh-letra .55s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes szh-letra { from { opacity: 0; transform: translateY(-30px) scale(.3) rotate(-20deg); } to { opacity: 1; transform: none; } }

.szh-santo { position: relative; z-index: 2; flex: 1 1 0; min-height: 0; max-height: 440px; margin-bottom: -2.5vh; transform-origin: 50% 100%; opacity: 0; transform: scale(0); }
/* surge girando e depois fica flutuando e balançando no céu */
.szh.apresentado .szh-santo { animation: szh-surge 1s cubic-bezier(.3, 1.55, .5, 1) .1s forwards, szh-balanca 3.4s ease-in-out 1.15s infinite; }
@keyframes szh-balanca {
	0%, 100% { opacity: 1; transform: translateY(0) rotate(-3deg); }
	50%      { opacity: 1; transform: translateY(-3.5%) rotate(3deg); }
}
/* oração: inclina devagar, com a auréola brilhando */
.szh.apresentado .szh-santo.reza { animation: szh-reza 3s ease-in-out infinite; }
@keyframes szh-reza {
	0%, 100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
	50%      { opacity: 1; transform: translateY(1.5%) rotate(-2deg) scale(.98); }
}
/* despedida: acena de um lado para o outro, pulando */
.szh.apresentado .szh-santo.tchau { animation: szh-acena .55s ease-in-out infinite alternate; }
@keyframes szh-acena {
	from { opacity: 1; transform: translateY(0) rotate(-9deg); }
	to   { opacity: 1; transform: translateY(-4%) rotate(9deg); }
}
@keyframes szh-surge {
	0%   { opacity: 0; transform: scale(0) rotate(-180deg); }
	60%  { opacity: 1; }
	100% { opacity: 1; transform: scale(1) rotate(0); }
}
.szh-santo img { height: 100%; width: auto; display: block; filter: drop-shadow(0 12px 16px rgba(27, 36, 71, .35)); transform-origin: 50% 100%; animation: szh-respira 2.6s ease-in-out infinite; }
@keyframes szh-respira { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, .975); } }
/* reserva: banner inteiro num cartão quando não há recorte */
.szh-santo.szh-banner { flex: 0 1 auto; max-height: none; width: min(560px, 88vw); margin-bottom: 2vh; }
.szh-santo.szh-banner img { width: 100%; height: auto; border: 5px solid #fff; border-radius: 26px; }
/* falando: um pulinho com "estica e encolhe" a cada palavra da narração (o JS liga a classe .pula) */
.szh-santo img.pula { animation: szh-pula .32s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes szh-pula {
	0%   { transform: translateY(0) scale(1, 1); }
	35%  { transform: translateY(-7%) scale(.95, 1.07); }
	70%  { transform: translateY(0) scale(1.06, .94); }
	100% { transform: translateY(0) scale(1, 1); }
}
/* parte nova da história: pulo de alegria com giradinha */
.szh-santo img.pulao { animation: szh-pulao .7s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes szh-pulao {
	0%   { transform: translateY(0) scale(1, 1) rotate(0); }
	20%  { transform: translateY(2%) scale(1.08, .9) rotate(0); }
	55%  { transform: translateY(-16%) scale(.94, 1.08) rotate(-8deg); }
	80%  { transform: translateY(0) scale(1.07, .93) rotate(3deg); }
	100% { transform: translateY(0) scale(1, 1) rotate(0); }
}
.szh-halo { position: absolute; left: 50%; top: 0; width: 90%; aspect-ratio: 1; translate: -50% -8%; border-radius: 50%; z-index: -1;
	background: radial-gradient(circle, rgba(255, 230, 140, .6), transparent 64%); animation: szh-brilha 3s ease-in-out infinite; }
.szh-santo.reza .szh-halo { background: radial-gradient(circle, rgba(255, 226, 120, 1), transparent 66%); animation-duration: 1.4s; }
@keyframes szh-brilha { 0%, 100% { opacity: .45; scale: .94; } 50% { opacity: .9; scale: 1.06; } }
/* "puf" de nuvem quando o santinho aparece */
.szh-puf { position: absolute; left: 50%; bottom: 10%; width: 120%; aspect-ratio: 2; translate: -50% 0; border-radius: 50%; opacity: 0; z-index: 3;
	background: radial-gradient(circle at 30% 60%, #fff 0 26%, transparent 27%), radial-gradient(circle at 55% 45%, #fff 0 32%, transparent 33%), radial-gradient(circle at 76% 62%, #fff 0 24%, transparent 25%); }
.szh.apresentado .szh-puf { animation: szh-puf .9s ease-out .15s; }
@keyframes szh-puf { 0% { opacity: 0; transform: scale(.2); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }

.szh-chao { position: relative; z-index: 1; width: 120%; height: 12vh; margin-top: -4vh;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 200' preserveAspectRatio='none'%3E%3Cg fill='%23E6F3FC'%3E%3Cellipse cx='60' cy='70' rx='110' ry='60'/%3E%3Cellipse cx='260' cy='50' rx='130' ry='70'/%3E%3Cellipse cx='480' cy='75' rx='120' ry='60'/%3E%3Cellipse cx='700' cy='45' rx='140' ry='72'/%3E%3Cellipse cx='920' cy='68' rx='120' ry='62'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Cellipse cx='150' cy='95' rx='120' ry='62'/%3E%3Cellipse cx='370' cy='88' rx='130' ry='66'/%3E%3Cellipse cx='590' cy='98' rx='125' ry='60'/%3E%3Cellipse cx='820' cy='86' rx='135' ry='66'/%3E%3Crect x='0' y='110' width='1000' height='90'/%3E%3C/g%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; }

/* ---------- legenda embaixo ---------- */
.szh-legenda {
	position: relative; z-index: 3;
	width: min(860px, calc(100% - 24px));
	margin: -5vh auto 0;
	padding: 16px 24px 18px;
	background: #fff;
	border: 4px solid #F3E6CA;
	border-radius: 26px;
	box-shadow: 0 10px 0 rgba(27, 36, 71, .18);
	text-align: center;
	opacity: 0;
}
.szh-legenda.troca { animation: szh-legenda .5s cubic-bezier(.3, 1.5, .5, 1) forwards; }
@keyframes szh-legenda { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: none; } }
.szh-leg-tit {
	display: inline-block; margin-bottom: 8px;
	font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
	color: #B97D1E; background: #FBEECB; border: 2px dashed #E8A93C; border-radius: 999px; padding: 3px 14px;
}
.szh-leg-tit[hidden] { display: none; }
.szh-leg-txt { margin: 0 !important; font-family: "Fredoka", sans-serif !important; font-weight: 500; font-size: clamp(18px, 2.5vw, 28px); line-height: 1.38; color: #A3ABC6; }
.szh-leg-txt span { transition: color .12s; }
.szh-leg-txt span.dita { color: var(--azul); }
.szh-leg-txt span.agora { color: #D06B84; text-shadow: 0 0 1px rgba(208, 107, 132, .3); }
.szh-legenda.oracao { background: linear-gradient(180deg, #FFFBEF, #FFF1C9); border-color: #F7CE6B; }
.szh-legenda.oracao .szh-leg-txt { font-style: italic; }

/* ---------- controles ---------- */
.szh-controles { position: relative; z-index: 3; display: flex; gap: 14px; justify-content: center; margin: 14px 0 18px; }
.szh-ctl {
	width: 52px; height: 52px; border-radius: 50%;
	font-size: 18px; color: var(--azul); background: #fff; border: 3px solid #F3E6CA;
	box-shadow: 0 4px 0 rgba(27, 36, 71, .2); cursor: pointer;
}
.szh-ctl.szh-tocar { width: 62px; height: 62px; font-size: 22px; color: #4A2E00; background: linear-gradient(180deg, #FFE08A, #E8A93C); border-color: #fff; box-shadow: 0 5px 0 #B97D1E; }
.szh-ctl:active, .szh-fechar:active { transform: translateY(2px); }

/* enfeites que sobem */
.szh-voa { position: absolute; z-index: 4; pointer-events: none; font-size: clamp(18px, 3vw, 32px); color: #FFE08A; text-shadow: 0 0 10px rgba(255, 214, 110, .8); animation: szh-sobe 2.6s ease-out forwards; }
@keyframes szh-sobe { from { transform: translateY(0) scale(.3); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(-34vh) scale(1.1) rotate(25deg); opacity: 0; } }

/* tela final */
.szh-fim {
	position: absolute; inset: 0; z-index: 5;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
	background: rgba(27, 36, 71, .45); backdrop-filter: blur(3px);
	animation: szh-legenda .5s ease both;
}
.szh-fim[hidden] { display: none; }
.szh-fim-tit { margin: 0 0 6px; font-family: "Fredoka", sans-serif !important; font-weight: 700; font-size: clamp(30px, 6vw, 56px); color: #fff; text-shadow: 0 0 24px rgba(255, 214, 110, .8); }
.szh-fim-btn {
	min-width: 230px; padding: 14px 28px;
	font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 19px;
	color: #4A2E00; background: linear-gradient(180deg, #FFE08A, #E8A93C);
	border: 3px solid #fff; border-radius: 999px; box-shadow: 0 5px 0 #B97D1E; cursor: pointer;
}
.szh-fim-btn.szh-fim-sec { color: var(--azul); background: #fff; border-color: #F3E6CA; box-shadow: 0 5px 0 rgba(27, 36, 71, .2); }

@media (max-width: 575px) {
	.szh-pontos { width: calc(100% - 84px); margin: 26px 0 0 14px; align-self: flex-start; }
	.szh-fechar { top: 12px; right: 10px; width: 42px; height: 42px; font-size: 18px; }
	.szh-legenda { padding: 12px 14px 14px; border-radius: 22px; }
	.szh-controles { margin: 12px 0 calc(14px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
	.szh, .szh * { animation: none !important; transition: none !important; }
	.szh { clip-path: none; }
	.szh-santo, .szh-legenda, .szh-nome span { opacity: 1 !important; transform: none !important; }
}