/*!
 * Spirit Core — camada criativa (docs/CRIATIVO.md). Author: Lui.
 * Cortina/preloader saem só com CSS (nada preso se o JS falhar). Sem CLS.
 */

/* ---------- 1–2. Cortina entre páginas + preloader ---------- */
.sp-curtain {
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: grid;
	place-items: center;
	background: var(--sp-yellow, #FAFA2F);
	color: var(--sp-ink, #181818);
	transform: translate3d(0, 100%, 0);
	visibility: hidden;
	pointer-events: none;
}
.sp-curtain__logo,
.sp-curtain__seal {
	grid-area: 1 / 1;
	height: auto;
	opacity: 0;
}
.sp-curtain__logo { width: clamp(140px, 16vw, 260px); }
.sp-curtain__seal { width: clamp(150px, 14vw, 230px); }

/* Chegada por link interno: começa cobrindo e desce (revelando a página) */
.sp-fx-enter .sp-curtain {
	visibility: visible;
	transform: none;
	animation: sp-curtain-out 650ms var(--sp-ease-in-out, cubic-bezier(.65, 0, .35, 1)) 80ms forwards;
}
.sp-fx-enter .sp-curtain__logo { opacity: 1; animation: sp-curtain-logo-out 450ms var(--sp-ease, cubic-bezier(.22, 1, .36, 1)) forwards; }

/* 1ª visita da sessão: selo pulsando, no máximo 1,2 s no total */
.sp-fx-preload .sp-curtain {
	visibility: visible;
	transform: none;
	animation: sp-curtain-out 550ms var(--sp-ease-in-out, cubic-bezier(.65, 0, .35, 1)) 650ms forwards;
}
.sp-fx-preload .sp-curtain__seal { animation: sp-seal-in 650ms var(--sp-ease, cubic-bezier(.22, 1, .36, 1)) forwards; }

/* Saindo da página (JS): a cortina sobe cobrindo a tela com o logo */
.sp-fx-leave .sp-curtain {
	visibility: visible;
	animation: sp-curtain-in 420ms var(--sp-ease-in-out, cubic-bezier(.65, 0, .35, 1)) forwards;
}
.sp-fx-leave .sp-curtain__seal { opacity: 0; animation: none; }
.sp-fx-leave .sp-curtain__logo { animation: sp-curtain-logo-in 420ms var(--sp-ease, cubic-bezier(.22, 1, .36, 1)) 120ms forwards; }

@keyframes sp-curtain-in { from { transform: translate3d(0, 100%, 0); } to { transform: none; } }
@keyframes sp-curtain-out { from { transform: none; } to { transform: translate3d(0, 100%, 0); visibility: hidden; } }
@keyframes sp-curtain-logo-in { from { opacity: 0; transform: translateY(24px) rotate(-4deg); } to { opacity: 1; transform: none; } }
@keyframes sp-curtain-logo-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-16px); } }
@keyframes sp-seal-in {
	0% { opacity: 0; transform: scale(.82) rotate(-8deg); }
	55% { opacity: 1; transform: scale(1.04) rotate(1deg); }
	100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* ---------- 3. Cursor do site ---------- */
.sp-dot {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99980;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	pointer-events: none;
	opacity: 0;
	mix-blend-mode: difference;
	transition: opacity var(--sp-dur-fast, 300ms) ease;
	will-change: transform;
}
.sp-dot::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--sp-yellow, #FAFA2F);
	transition: transform var(--sp-dur, 600ms) var(--sp-ease, cubic-bezier(.22, 1, .36, 1));
}
.sp-dot.is-on { opacity: 1; }
.sp-dot.is-link::before { transform: scale(3.6); }
.sp-dot.is-down::before { transform: scale(.7); }
.sp-dot.is-link.is-down::before { transform: scale(3); }
/* O cursor "VIEW" do spirit-projects assume nos cards */
.sp-dot.is-hidden { opacity: 0; }

/* ---------- 4. Botões magnéticos (propriedade translate, não conflita com transform) ---------- */
/* A transição de translate é somada às existentes pelo JS (spirit-fx.js). */

/* ---------- 5. Marquee ---------- */
.sp-marquee {
	--sp-marquee-gap: clamp(40px, 5vw, 96px);
	overflow: hidden;
	max-width: 100%;
}
.sp-marquee__track {
	display: flex;
	width: max-content;
	gap: var(--sp-marquee-gap);
	animation: sp-marquee var(--sp-marquee-dur, 40s) linear infinite;
}
.sp-marquee--reverse .sp-marquee__track { animation-direction: reverse; }
.sp-marquee:hover .sp-marquee__track,
.sp-marquee:focus-within .sp-marquee__track { animation-play-state: paused; }
.sp-marquee__group {
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--sp-marquee-gap);
}
.sp-marquee__group > * { flex: none; }
@keyframes sp-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-50% - var(--sp-marquee-gap) / 2), 0, 0); } }

/* ---------- 6. Vídeo de fundo ---------- */
.sp-video {
	position: relative;
	overflow: hidden;
	background: var(--sp-ink, #181818);
}
.sp-video--ratio { height: 0; padding-top: var(--sp-video-ratio, 56.25%); }
.sp-video--cover { position: absolute; inset: 0; z-index: 0; }
.sp-video__poster,
.sp-video__el,
.sp-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}
.sp-video__poster { z-index: 2; transition: opacity var(--sp-dur-slow, 1200ms) var(--sp-ease, cubic-bezier(.22, 1, .36, 1)); }
.sp-video iframe,
.sp-video__el { z-index: 1; opacity: 0; transition: opacity var(--sp-dur, 600ms) ease; }
.sp-video.is-playing iframe,
.sp-video.is-playing .sp-video__el { opacity: 1; }
.sp-video.is-playing .sp-video__poster { opacity: 0; }
/* Cobrir a caixa com o iframe 16:9 (as medidas vêm do JS) */
.sp-video--cover iframe {
	inset: auto;
	top: 50%;
	left: 50%;
	width: max(100%, calc(var(--sp-vh, 100%) * 1.7778));
	height: max(100%, calc(var(--sp-vw, 100%) * .5625));
	transform: translate(-50%, -50%);
}
.sp-video--ratio iframe { pointer-events: none; }

/* fit="cover": cobre o container pai (ex.: hero do Elementor). Se o vídeo estiver sozinho num
   parágrafo/elemento, esse elemento vira a camada de fundo e os irmãos ficam por cima. */
:where(:has(> .sp-video--cover), :has(> * > .sp-video--cover:only-child)) { position: relative; isolation: isolate; }
:where(:has(> .sp-video--cover:only-child)) {
	position: absolute !important;
	inset: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
	z-index: 0;
}
:where(:has(> * > .sp-video--cover:only-child)) > :where(:not(:has(> .sp-video--cover:only-child))),
:where(:has(> .sp-video--cover)) > :where(:not(.sp-video)) { position: relative; z-index: 1; }
.sp-video--cover iframe { pointer-events: none; }

/* ---------- 12. Números contando ---------- */
.sp-count__num { display: inline; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }
.sp-count__n { display: inline-block; font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- Menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
	.sp-curtain { display: none !important; }
	.sp-dot { display: none !important; }
	.sp-marquee { overflow-x: auto; }
	.sp-marquee__track { animation: none !important; }
	.sp-is-magnetic { translate: none !important; }
}