/**
 * Klicaki — Animações cinematográficas de scroll (camada adicional)
 * Paleta: #0A0A0F · #0055FF · #6B21A8 · #FFFFFF
 */

/* --------------------------------------------------------------------------
   Variáveis locais (não alteram o tema base)
   -------------------------------------------------------------------------- */
:root {
	--klicaki-anim-bg: #0a0a0f;
	--klicaki-anim-blue: #0055ff;
	--klicaki-anim-purple: #6b21a8;
	--klicaki-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--klicaki-anim-duration: 0.7s;
	--klicaki-anim-duration-half: 0.35s;
}

/* --------------------------------------------------------------------------
   Fade-up — secções, títulos e parágrafos
   -------------------------------------------------------------------------- */
.fade-up {
	opacity: 0;
	visibility: hidden;
	transform: translateY(40px);
	transition:
		opacity var(--klicaki-anim-duration) var(--klicaki-anim-ease),
		transform var(--klicaki-anim-duration) var(--klicaki-anim-ease),
		visibility var(--klicaki-anim-duration);
	will-change: opacity, transform;
}

.fade-up.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.fade-up--delay {
	transition-delay: 0.15s;
}

/* --------------------------------------------------------------------------
   Slide-in alternado — cards de serviços
   -------------------------------------------------------------------------- */
#servicos .services-grid {
	perspective: 1000px;
}

.slide-left,
.slide-right {
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--klicaki-anim-duration) var(--klicaki-anim-ease),
		transform var(--klicaki-anim-duration) var(--klicaki-anim-ease),
		visibility var(--klicaki-anim-duration);
	will-change: opacity, transform;
}

.slide-left {
	transform: translateX(-60px);
}

.slide-right {
	transform: translateX(60px);
}

.slide-left.is-visible,
.slide-right.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

/* Tilt 3D — activado via JS inline transform */
#servicos .service-card {
	transform-style: preserve-3d;
	transition: box-shadow 0.35s var(--klicaki-anim-ease);
}

#servicos .service-card.is-tilting {
	transition: transform 0.12s ease-out, box-shadow 0.35s var(--klicaki-anim-ease);
}

#servicos .service-card.is-tilting:hover {
	box-shadow: 0 24px 48px rgba(0, 85, 255, 0.12);
}

/* --------------------------------------------------------------------------
   Curtain reveal — imagem principal da loja
   -------------------------------------------------------------------------- */
.curtain-reveal {
	position: relative;
	overflow: hidden;
}

.curtain-reveal__overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: var(--klicaki-anim-bg);
	transform-origin: left center;
	transform: scaleX(1);
	transition: transform 0.9s var(--klicaki-anim-ease);
	z-index: 2;
	pointer-events: none;
}

.curtain-reveal.is-visible .curtain-reveal__overlay {
	transform: scaleX(0);
}

.curtain-reveal__media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: transform;
}

/* Parallax aplicado ao wrapper da imagem */
.loja-parallax-target {
	will-change: transform;
}

/* --------------------------------------------------------------------------
   Shimmer — botão CTA principal
   -------------------------------------------------------------------------- */
.btn-shimmer {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.btn-shimmer::after {
	content: "";
	position: absolute;
	top: -50%;
	left: -60%;
	width: 40%;
	height: 200%;
	background: linear-gradient(
		105deg,
		transparent 0%,
		rgba(255, 255, 255, 0.45) 45%,
		rgba(255, 255, 255, 0.65) 50%,
		rgba(255, 255, 255, 0.45) 55%,
		transparent 100%
	);
	transform: translateX(-120%) rotate(25deg);
	animation: klicakiShimmer 3s ease-in-out infinite;
	pointer-events: none;
	z-index: 1;
}

@keyframes klicakiShimmer {
	0%,
	72% {
		transform: translateX(-120%) rotate(25deg);
	}
	100% {
		transform: translateX(320%) rotate(25deg);
	}
}

/* --------------------------------------------------------------------------
   Quem Somos — wireframe de cordas em fundo da secção (#quemsomos)
   -------------------------------------------------------------------------- */
.scene-about--wireframe::after {
	display: none;
}

.about-wireframe-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Hero — padrão de marca (zoom lento + parallax leve via JS)
   -------------------------------------------------------------------------- */
@keyframes heroBrandZoom {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.1);
	}
}

html.animations-reduced .hero-brand-pattern {
	transform: none;
}

html.animations-reduced .hero-brand-pattern__zoom {
	animation: none;
	transform: scale(1.03);
}

html.animations-reduced .hero-glow {
	animation: none;
}

html.animations-reduced .about-wireframe-canvas {
	display: none;
}

html.animations-reduced .scene-about--wireframe::after {
	display: block;
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		linear-gradient(125deg, rgba(0, 85, 255, 0.08) 0%, transparent 42%),
		linear-gradient(305deg, rgba(107, 33, 168, 0.06) 0%, transparent 40%);
}

/* --------------------------------------------------------------------------
   Cursor personalizado
   -------------------------------------------------------------------------- */
body.klicaki-custom-cursor,
body.klicaki-custom-cursor a,
body.klicaki-custom-cursor button {
	cursor: none !important;
}

body.klicaki-custom-cursor .cursor-glow {
	opacity: 0 !important;
	visibility: hidden !important;
}

.klicaki-cursor,
.klicaki-cursor-trail {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	transform: translate(-50%, -50%);
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
}

.klicaki-cursor-trail {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: linear-gradient(135deg, #0055ff 0%, #6b21a8 100%);
	z-index: 10000;
	box-shadow: 0 0 0 rgba(0, 85, 255, 0);
	transition: box-shadow 0.25s ease;
	isolation: isolate;
}

.klicaki-cursor {
	width: 56px;
	height: auto;
	z-index: 10002;
	filter: drop-shadow(0 0 8px rgba(0, 85, 255, 0.35));
}

.klicaki-cursor-trail.is-filled {
	box-shadow:
		0 0 14px rgba(0, 85, 255, 0.45),
		0 0 22px rgba(107, 33, 168, 0.35);
}

/* --------------------------------------------------------------------------
   Estado final sem animação (reduced motion / fallback)
   -------------------------------------------------------------------------- */
html.animations-reduced .fade-up,
html.animations-reduced .slide-left,
html.animations-reduced .slide-right {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	transition: none !important;
}

html.animations-reduced .curtain-reveal__overlay {
	display: none;
}

html.animations-reduced .btn-shimmer::after {
	animation: none;
	display: none;
}

/* --------------------------------------------------------------------------
   Mobile — performance e acessibilidade táctil
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	:root {
		--klicaki-anim-duration: 0.35s;
	}

	.fade-up {
		transform: translateY(20px);
	}

	.slide-left {
		transform: translateX(-30px);
	}

	.slide-right {
		transform: translateX(30px);
	}

	body.klicaki-custom-cursor,
	body.klicaki-custom-cursor a,
	body.klicaki-custom-cursor button {
		cursor: auto !important;
	}

	.klicaki-cursor,
	.klicaki-cursor-trail {
		display: none !important;
	}

	#servicos .service-card.is-tilting {
		transform: none !important;
	}

	.hero-brand-pattern {
		background-position: center center;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fade-up,
	.slide-left,
	.slide-right,
	.curtain-reveal__overlay,
	.btn-shimmer::after {
		animation: none !important;
		transition: none !important;
	}
}