/* ==========================================================================
   Animações do site. As de entrada/scroll só valem com html.ns-motion,
   classe que o <head> adiciona e remove sozinho se o motion.js não carregar.
   ========================================================================== */

/* ------------------------------------------------------ barra de progresso */
.ns-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	height: 3px;
	background: linear-gradient(90deg, var(--brand), var(--lilac));
	transform: scaleX(var(--p, 0));
	transform-origin: left center;
	pointer-events: none;
}
.admin-bar .ns-progress { top: 32px; }

/* ------------------------------------------------------ entrada do hero */
@keyframes ns-rise {
	from { opacity: 0; transform: translateY(26px); filter: blur(6px); }
	to { opacity: 1; transform: none; filter: none; }
}
@keyframes ns-fade { from { opacity: 0; } to { opacity: 1; } }
.ns-motion .hero__content > * { animation: ns-rise .9s cubic-bezier(.2, .8, .2, 1) both; }
.ns-motion .hero__content > :nth-child(1) { animation-delay: .1s; }
.ns-motion .hero__content > :nth-child(2) { animation-delay: .22s; }
.ns-motion .hero__content > :nth-child(3) { animation-delay: .38s; }
.ns-motion .hero__content > :nth-child(4) { animation-delay: .52s; }
.ns-motion .hero__bg { animation: ns-fade 1.6s ease both; }
.ns-motion .phero__text > * { animation: ns-rise .9s cubic-bezier(.2, .8, .2, 1) both; }
.ns-motion .phero__text > :nth-child(2) { animation-delay: .08s; }
.ns-motion .phero__text > :nth-child(3) { animation-delay: .16s; }
.ns-motion .phero__text > :nth-child(4) { animation-delay: .26s; }
.ns-motion .phero__text > :nth-child(5) { animation-delay: .36s; }
.ns-motion .phero__text > :nth-child(6) { animation-delay: .46s; }
.ns-motion .phero__visual { animation: ns-rise-side 1.1s cubic-bezier(.2, .8, .2, 1) .2s both; }
@keyframes ns-rise-side { from { opacity: 0; transform: translateX(36px) scale(.97); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* ------------------------------------------------------ revelação no scroll */
/* as entradas laterais não podem criar rolagem horizontal (clip não quebra o sticky) */
.ns-motion body { overflow-x: clip; }

.ns-motion [data-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition: none; /* esconde na hora; só a entrada é animada */
}
.ns-motion [data-reveal="left"] { transform: translateX(-40px); }
.ns-motion [data-reveal="right"] { transform: translateX(40px); }
.ns-motion [data-reveal="zoom"] { transform: scale(.94); }
.ns-motion [data-reveal].is-in {
	opacity: 1;
	transform: none;
	transition:
		opacity .7s ease,
		transform .85s cubic-bezier(.2, .8, .2, 1);
	transition-delay: calc(var(--d, 0) * 90ms);
}

/* ------------------------------------------------------ botões */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn:not(.btn--ghost)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform .7s ease;
}
.btn:not(.btn--ghost):hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(.98); }

/* ------------------------------------------------------ cartões */
.card {
	transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease;
}
.card:hover {
	transform: translateY(-6px);
	border-color: #d9d0f5;
	box-shadow: 0 22px 48px -18px rgba(60, 20, 140, .28);
}
.card--dark:hover { border-color: var(--ink); box-shadow: 0 22px 48px -18px rgba(23, 15, 46, .7); }
.card--media .mock { transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease; }
.card--media:hover .mock { transform: scale(1.015); box-shadow: inset 0 0 0 1px #e2d8fb; }
.icon, .icon svg { transition: transform .35s cubic-bezier(.2, .8, .2, 1), background .25s ease, stroke .25s ease; }
.card--icon:hover .icon { transform: translateY(-3px) rotate(-6deg); background: var(--brand); }
.card--icon:hover .icon svg { stroke: #fff; }
.card .tag { transition: letter-spacing .3s ease; }

/* diferencial */
.tile { transition: transform .35s cubic-bezier(.2, .8, .2, 1), background .3s ease; }
.tile:hover { transform: translateY(-6px); background: #5a07b8; }

/* cases: leve 3D e parallax no palco dos dispositivos (variáveis definidas no motion.js) */
.case__visual { perspective: 1400px; }
.dv-stage {
	transform: translateY(var(--py, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transform-style: preserve-3d;
	transition: transform .5s cubic-bezier(.2, .8, .2, 1);
	will-change: transform;
}
.case__visual.is-tilting .dv-stage { transition: transform .12s linear; }
.ticks li::before { transition: transform .3s ease; }
.case__text:hover .ticks li::before { transform: scale(1.4); }

/* quem faz */
.timeline div { transition: transform .3s cubic-bezier(.2, .8, .2, 1), background .3s ease; }
.timeline div:hover { transform: translateX(4px); background: var(--ink-3); }
.about__photo { overflow: hidden; }
.about__photo img { transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.about:hover .about__photo img { transform: scale(1.03); }

/* contato */
.contact__card { transition: border-color .2s ease, transform .3s cubic-bezier(.2, .8, .2, 1), background .3s ease; }
a.contact__card:hover { transform: translateY(-4px); background: rgba(44, 33, 86, .95); }

@media (hover: none) {
	.card:hover, .tile:hover, a.contact__card:hover, .timeline div:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ns-progress { display: none; }
	.btn::after { display: none; }
	.card, .tile, .timeline div, .contact__card, .card--media .mock, .about__photo img, .dv-stage, .icon, .icon svg { transition: none; }
	.card:hover, .tile:hover, a.contact__card:hover, .timeline div:hover, .card--media:hover .mock, .about:hover .about__photo img { transform: none; }
}