/**
 * WP Smooth Page Transitions - Estilos de Front-End
 *
 * Inclui animações para a View Transitions API nativa (::view-transition-old/new)
 * e fallback em overlay acelerado por hardware via transform e opacity.
 */

:root {
	--wst-duration: 550ms;
	--wst-bg-color: #0f172a;
	--wst-easing: cubic-bezier(0.22, 1, 0.36, 1);
	--wst-loader-color: #ffffff;
	--wst-logo-width: 96px;
}

/* ==========================================================================
   1. View Transitions API Nativa (MPA & SPA startViewTransition)
   ========================================================================== */

::view-transition-group(root) {
	animation-duration: var(--wst-duration);
	animation-timing-function: var(--wst-easing);
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: var(--wst-duration);
	animation-timing-function: var(--wst-easing);
	animation-fill-mode: both;
	mix-blend-mode: normal;
}

/* Efeito: Cross-Fade */
html[data-wst-effect="cross-fade"]::view-transition-old(root) {
	animation-name: wst-vt-fade-out;
}

html[data-wst-effect="cross-fade"]::view-transition-new(root) {
	animation-name: wst-vt-fade-in;
}

@keyframes wst-vt-fade-out {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes wst-vt-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Efeito: Slide (4 direções) */
html[data-wst-effect="slide"][data-wst-direction="left"]::view-transition-old(root) {
	animation-name: wst-vt-slide-out-left;
}
html[data-wst-effect="slide"][data-wst-direction="left"]::view-transition-new(root) {
	animation-name: wst-vt-slide-in-left;
}

html[data-wst-effect="slide"][data-wst-direction="right"]::view-transition-old(root) {
	animation-name: wst-vt-slide-out-right;
}
html[data-wst-effect="slide"][data-wst-direction="right"]::view-transition-new(root) {
	animation-name: wst-vt-slide-in-right;
}

html[data-wst-effect="slide"][data-wst-direction="up"]::view-transition-old(root) {
	animation-name: wst-vt-slide-out-up;
}
html[data-wst-effect="slide"][data-wst-direction="up"]::view-transition-new(root) {
	animation-name: wst-vt-slide-in-up;
}

html[data-wst-effect="slide"][data-wst-direction="down"]::view-transition-old(root) {
	animation-name: wst-vt-slide-out-down;
}
html[data-wst-effect="slide"][data-wst-direction="down"]::view-transition-new(root) {
	animation-name: wst-vt-slide-in-down;
}

@keyframes wst-vt-slide-out-left {
	from { transform: translate3d(0, 0, 0); opacity: 1; }
	to { transform: translate3d(-28%, 0, 0); opacity: 0.35; }
}
@keyframes wst-vt-slide-in-left {
	from { transform: translate3d(100%, 0, 0); }
	to { transform: translate3d(0, 0, 0); }
}

@keyframes wst-vt-slide-out-right {
	from { transform: translate3d(0, 0, 0); opacity: 1; }
	to { transform: translate3d(28%, 0, 0); opacity: 0.35; }
}
@keyframes wst-vt-slide-in-right {
	from { transform: translate3d(-100%, 0, 0); }
	to { transform: translate3d(0, 0, 0); }
}

@keyframes wst-vt-slide-out-up {
	from { transform: translate3d(0, 0, 0); opacity: 1; }
	to { transform: translate3d(0, -28%, 0); opacity: 0.35; }
}
@keyframes wst-vt-slide-in-up {
	from { transform: translate3d(0, 100%, 0); }
	to { transform: translate3d(0, 0, 0); }
}

@keyframes wst-vt-slide-out-down {
	from { transform: translate3d(0, 0, 0); opacity: 1; }
	to { transform: translate3d(0, 28%, 0); opacity: 0.35; }
}
@keyframes wst-vt-slide-in-down {
	from { transform: translate3d(0, -100%, 0); }
	to { transform: translate3d(0, 0, 0); }
}

/* Efeito: Curtain / Cortina Dupla */
html[data-wst-effect="curtain"][data-wst-origin="center"]::view-transition-old(root) {
	animation-name: wst-vt-hold;
	z-index: 1;
}
html[data-wst-effect="curtain"][data-wst-origin="center"]::view-transition-new(root) {
	animation-name: wst-vt-curtain-center-in;
	z-index: 2;
}

html[data-wst-effect="curtain"][data-wst-origin="edges"]::view-transition-old(root) {
	animation-name: wst-vt-curtain-edges-out;
	z-index: 2;
}
html[data-wst-effect="curtain"][data-wst-origin="edges"]::view-transition-new(root) {
	animation-name: wst-vt-fade-in;
	z-index: 1;
}

@keyframes wst-vt-hold {
	from { opacity: 1; }
	to { opacity: 0.9; }
}

@keyframes wst-vt-curtain-center-in {
	from { clip-path: inset(0 50% 0 50%); }
	to { clip-path: inset(0 0 0 0); }
}

@keyframes wst-vt-curtain-edges-out {
	from { clip-path: inset(0 0 0 0); opacity: 1; }
	to { clip-path: inset(0 50% 0 50%); opacity: 0.4; }
}

/* Efeito: Morph / Zoom Scale */
html[data-wst-effect="morph"]::view-transition-old(root) {
	animation-name: wst-vt-morph-out;
}
html[data-wst-effect="morph"]::view-transition-new(root) {
	animation-name: wst-vt-morph-in;
}

@keyframes wst-vt-morph-out {
	from { transform: scale(1); opacity: 1; }
	to { transform: scale(0.94); opacity: 0; }
}

@keyframes wst-vt-morph-in {
	from { transform: scale(1.06); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}

/* Efeito: Wipe Diagonal */
html[data-wst-effect="wipe"]::view-transition-old(root) {
	animation-name: wst-vt-hold;
	z-index: 1;
}
html[data-wst-effect="wipe"]::view-transition-new(root) {
	animation-name: wst-vt-wipe-diagonal;
	z-index: 2;
}

@keyframes wst-vt-wipe-diagonal {
	from {
		clip-path: polygon(-40% 0%, -40% 0%, -80% 100%, -80% 100%);
	}
	to {
		clip-path: polygon(-40% 0%, 160% 0%, 120% 100%, -80% 100%);
	}
}

/* ==========================================================================
   2. Overlay Fallback Acelerado por Hardware (transform & opacity)
   ========================================================================== */

.wst-overlay {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	overflow: hidden;
	visibility: hidden;
	pointer-events: none;
}

.wst-overlay.is-entering,
.wst-overlay.is-active {
	visibility: visible;
	pointer-events: auto;
}

.wst-overlay.is-leaving {
	visibility: visible;
	pointer-events: none;
}

.wst-overlay-panel {
	position: absolute;
	inset: 0;
	background: var(--wst-bg-color);
	will-change: transform, opacity;
	backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
	transition:
		transform var(--wst-duration) var(--wst-easing),
		opacity var(--wst-duration) var(--wst-easing);
}

.wst-overlay-panel--secondary {
	display: none;
}

/* Fallback: Cross-Fade */
.wst-overlay.wst-effect-cross-fade .wst-overlay-panel--primary {
	opacity: 0;
}
.wst-overlay.wst-effect-cross-fade.is-entering .wst-overlay-panel--primary,
.wst-overlay.wst-effect-cross-fade.is-active .wst-overlay-panel--primary {
	opacity: 1;
}
.wst-overlay.wst-effect-cross-fade.is-leaving .wst-overlay-panel--primary {
	opacity: 0;
}

/* Fallback: Slide (4 direções) */
.wst-overlay.wst-effect-slide[data-direction="left"] .wst-overlay-panel--primary {
	transform: translate3d(100%, 0, 0);
}
.wst-overlay.wst-effect-slide[data-direction="left"].is-entering .wst-overlay-panel--primary,
.wst-overlay.wst-effect-slide[data-direction="left"].is-active .wst-overlay-panel--primary {
	transform: translate3d(0, 0, 0);
}
.wst-overlay.wst-effect-slide[data-direction="left"].is-leaving .wst-overlay-panel--primary {
	transform: translate3d(-100%, 0, 0);
}

.wst-overlay.wst-effect-slide[data-direction="right"] .wst-overlay-panel--primary {
	transform: translate3d(-100%, 0, 0);
}
.wst-overlay.wst-effect-slide[data-direction="right"].is-entering .wst-overlay-panel--primary,
.wst-overlay.wst-effect-slide[data-direction="right"].is-active .wst-overlay-panel--primary {
	transform: translate3d(0, 0, 0);
}
.wst-overlay.wst-effect-slide[data-direction="right"].is-leaving .wst-overlay-panel--primary {
	transform: translate3d(100%, 0, 0);
}

.wst-overlay.wst-effect-slide[data-direction="up"] .wst-overlay-panel--primary {
	transform: translate3d(0, 100%, 0);
}
.wst-overlay.wst-effect-slide[data-direction="up"].is-entering .wst-overlay-panel--primary,
.wst-overlay.wst-effect-slide[data-direction="up"].is-active .wst-overlay-panel--primary {
	transform: translate3d(0, 0, 0);
}
.wst-overlay.wst-effect-slide[data-direction="up"].is-leaving .wst-overlay-panel--primary {
	transform: translate3d(0, -100%, 0);
}

.wst-overlay.wst-effect-slide[data-direction="down"] .wst-overlay-panel--primary {
	transform: translate3d(0, -100%, 0);
}
.wst-overlay.wst-effect-slide[data-direction="down"].is-entering .wst-overlay-panel--primary,
.wst-overlay.wst-effect-slide[data-direction="down"].is-active .wst-overlay-panel--primary {
	transform: translate3d(0, 0, 0);
}
.wst-overlay.wst-effect-slide[data-direction="down"].is-leaving .wst-overlay-panel--primary {
	transform: translate3d(0, 100%, 0);
}

/* Fallback: Curtain / Cortina Dupla */
.wst-overlay.wst-effect-curtain .wst-overlay-panel--primary,
.wst-overlay.wst-effect-curtain .wst-overlay-panel--secondary {
	display: block;
	top: 0;
	bottom: 0;
	width: 50.5%;
}

.wst-overlay.wst-effect-curtain .wst-overlay-panel--primary {
	left: 0;
	right: auto;
}

.wst-overlay.wst-effect-curtain .wst-overlay-panel--secondary {
	right: 0;
	left: auto;
}

.wst-overlay.wst-effect-curtain[data-origin="center"] .wst-overlay-panel--primary {
	transform-origin: right center;
	transform: translate3d(0, 0, 0) scaleX(0);
}
.wst-overlay.wst-effect-curtain[data-origin="center"] .wst-overlay-panel--secondary {
	transform-origin: left center;
	transform: translate3d(0, 0, 0) scaleX(0);
}

.wst-overlay.wst-effect-curtain[data-origin="edges"] .wst-overlay-panel--primary {
	transform-origin: left center;
	transform: translate3d(0, 0, 0) scaleX(0);
}
.wst-overlay.wst-effect-curtain[data-origin="edges"] .wst-overlay-panel--secondary {
	transform-origin: right center;
	transform: translate3d(0, 0, 0) scaleX(0);
}

.wst-overlay.wst-effect-curtain.is-entering .wst-overlay-panel--primary,
.wst-overlay.wst-effect-curtain.is-entering .wst-overlay-panel--secondary,
.wst-overlay.wst-effect-curtain.is-active .wst-overlay-panel--primary,
.wst-overlay.wst-effect-curtain.is-active .wst-overlay-panel--secondary {
	transform: translate3d(0, 0, 0) scaleX(1);
}

.wst-overlay.wst-effect-curtain.is-leaving .wst-overlay-panel--primary,
.wst-overlay.wst-effect-curtain.is-leaving .wst-overlay-panel--secondary {
	transform: translate3d(0, 0, 0) scaleX(0);
}

/* Fallback: Morph / Zoom Scale */
.wst-overlay.wst-effect-morph .wst-overlay-panel--primary {
	opacity: 0;
	transform: translate3d(0, 0, 0) scale(1.08);
}
.wst-overlay.wst-effect-morph.is-entering .wst-overlay-panel--primary,
.wst-overlay.wst-effect-morph.is-active .wst-overlay-panel--primary {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}
.wst-overlay.wst-effect-morph.is-leaving .wst-overlay-panel--primary {
	opacity: 0;
	transform: translate3d(0, 0, 0) scale(0.94);
}

/* Fallback: Wipe Diagonal (GPU-accelerated) */
.wst-overlay.wst-effect-wipe .wst-overlay-panel--primary {
	width: 170vw;
	left: -35vw;
	right: auto;
	transform: translate3d(-110%, 0, 0) skewX(-18deg);
}
.wst-overlay.wst-effect-wipe.is-entering .wst-overlay-panel--primary,
.wst-overlay.wst-effect-wipe.is-active .wst-overlay-panel--primary {
	transform: translate3d(0, 0, 0) skewX(-18deg);
}
.wst-overlay.wst-effect-wipe.is-leaving .wst-overlay-panel--primary {
	transform: translate3d(110%, 0, 0) skewX(-18deg);
}

/* ==========================================================================
   3. Loader Central (Logo ou Spinner SVG)
   ========================================================================== */

.wst-overlay-loader {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wst-loader-color);
	opacity: 0;
	transform: translate3d(0, 0, 0) scale(0.92);
	transition:
		opacity calc(var(--wst-duration) * 0.6) var(--wst-easing),
		transform calc(var(--wst-duration) * 0.6) var(--wst-easing);
}

.wst-overlay.is-entering .wst-overlay-loader,
.wst-overlay.is-active .wst-overlay-loader {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

.wst-overlay.is-leaving .wst-overlay-loader {
	opacity: 0;
	transform: translate3d(0, 0, 0) scale(0.92);
}

.wst-overlay-logo {
	display: block;
	width: var(--wst-logo-width);
	max-width: 70vw;
	height: auto;
	object-fit: contain;
}

/* Barra sutil de progresso para SPA quando View Transitions nativo aguarda rede lenta */
.wst-spa-loading::after {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 2147483001;
	background: var(--wst-bg-color);
	transform-origin: left center;
	animation: wst-progress-bar 1.2s var(--wst-easing) infinite;
}

@keyframes wst-progress-bar {
	0% { transform: scaleX(0.08); opacity: 0.9; }
	50% { transform: scaleX(0.65); opacity: 1; }
	100% { transform: scaleX(0.98); opacity: 0.7; }
}

/* Animações dos Spinners SVG */
.wst-spinner-ring {
	animation: wst-spin 0.9s linear infinite;
}

@keyframes wst-spin {
	to { transform: rotate(360deg); }
}

.wst-spinner-dots circle {
	animation: wst-dots-bounce 1s ease-in-out infinite;
}
.wst-spinner-dots circle:nth-child(2) {
	animation-delay: 0.16s;
}
.wst-spinner-dots circle:nth-child(3) {
	animation-delay: 0.32s;
}

@keyframes wst-dots-bounce {
	0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
	40% { opacity: 1; transform: translateY(-4px); }
}

.wst-spinner-pulse .wst-pulse-outer {
	transform-origin: center;
	animation: wst-pulse-ring 1.4s ease-out infinite;
}

@keyframes wst-pulse-ring {
	0% { transform: scale(0.65); opacity: 0.9; }
	100% { transform: scale(1.2); opacity: 0; }
}

/* ==========================================================================
   4. Acessibilidade: Respeito nativo a prefers-reduced-motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}

	.wst-overlay,
	.wst-overlay-panel,
	.wst-overlay-loader,
	.wst-spinner-ring,
	.wst-spinner-dots circle,
	.wst-spinner-pulse .wst-pulse-outer {
		transition: none !important;
		animation: none !important;
	}
}