/*
Theme Name: vivanc● audiovisual
Theme URI: https://vivancoaudiovisual.com
Author: Vivanco Audiovisual
Author URI: https://vivancoaudiovisual.com
Description: Tema sob medida da produtora vivanc● audiovisual. Leve, escuro e cinematográfico, com fontes locais, tipografia fluida e seções editáveis no editor do WordPress.
Version: 1.0.3
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vivanco
*/

/* ---------- Base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "ss01", "cv11";
}

::selection { background: var(--wp--preset--color--signal); color: var(--wp--preset--color--paper); }

:where(a, button, input, textarea, select):focus-visible {
	outline: 2px solid var(--wp--preset--color--signal);
	outline-offset: 3px;
}

/* Grão de filme sutil sobre a página inteira */
body::after {
	content: "";
	position: fixed;
	inset: -50%;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.045;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@media (prefers-reduced-motion: no-preference) {
	body::after { animation: vv-grain 0.9s steps(4) infinite; }
}
@keyframes vv-grain {
	0% { transform: translate(0, 0); }
	25% { transform: translate(-3%, 2%); }
	50% { transform: translate(2%, -3%); }
	75% { transform: translate(-2%, -1%); }
	100% { transform: translate(0, 0); }
}

/* Ponto vermelho do logo */
.vv-dot { color: var(--wp--preset--color--signal); }

/* ---------- Rótulos tipo timecode ---------- */
.vv-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--smoke);
	line-height: 1.4;
}
.vv-label strong { color: var(--wp--preset--color--signal); font-weight: 400; }

.vv-muted { color: var(--wp--preset--color--smoke); }
.vv-serif, em.vv-serif, .vv-serif em {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.01em;
}
h1 em, h2 em, h3 em {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.015em;
}

/* ---------- Cabeçalho ---------- */
.vv-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--wp--preset--color--ink) 72%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--bone) 8%, transparent);
}
.admin-bar .vv-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .vv-header { top: 0; } }

.vv-header .wp-block-navigation a { opacity: 0.75; transition: opacity 0.25s ease, color 0.25s ease; }
.vv-header .wp-block-navigation a:hover { opacity: 1; color: var(--wp--preset--color--bone); }
.vv-header .wp-block-navigation .vv-nav-cta a {
	opacity: 1;
	border: 1px solid var(--wp--preset--color--graphite);
	border-radius: 999px;
	padding: 0.55rem 1rem;
}
.vv-header .wp-block-navigation .vv-nav-cta a:hover {
	border-color: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--signal);
}
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--bone) !important;
	padding: 2rem clamp(1rem, 4vw, 3rem);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 2rem;
	letter-spacing: -0.03em;
	text-transform: none;
}

/* ---------- Hero ---------- */
.vv-hero.wp-block-cover { padding-top: 8rem; padding-bottom: clamp(2.5rem, 6vw, 5rem); align-items: flex-end; }
.vv-hero .wp-block-cover__inner-container { width: 100%; }
.vv-hero h1 { max-width: 15ch; text-wrap: balance; }
.vv-hero .vv-hero-sub { max-width: 46ch; }
.vv-hero video.wp-block-cover__video-background { filter: saturate(0.9) contrast(1.05); }

.vv-hero-meta {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--bone) 14%, transparent);
	padding-top: 1.25rem;
}

/* ---------- Seções ---------- */
.vv-section { position: relative; }
.vv-section-head { border-top: 1px solid var(--wp--preset--color--graphite); padding-top: 1.25rem; }
.vv-section h2 { text-wrap: balance; max-width: 18ch; }

/* Lista de serviços */
.vv-services { border-top: 1px solid var(--wp--preset--color--graphite); }
.vv-service {
	border-bottom: 1px solid var(--wp--preset--color--graphite);
	padding-block: clamp(1.5rem, 3vw, 2.25rem);
	transition: background-color 0.35s ease;
}
.vv-service h3 { transition: transform 0.45s cubic-bezier(.2,.7,.2,1); }
.vv-service:hover h3 { transform: translateX(0.5rem); }
.vv-service:hover .vv-label strong { color: var(--wp--preset--color--bone); }

/* Grade de trabalhos */
.vv-work .wp-block-post-template { gap: clamp(1.25rem, 3vw, 2.5rem) !important; }
.vv-card { position: relative; }
.vv-card-media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 30% 20%, var(--wp--preset--color--graphite), var(--wp--preset--color--charcoal) 70%);
	border-radius: 2px;
}
.vv-card-media::before {
	content: "●";
	position: absolute;
	left: 1rem; bottom: 0.75rem;
	color: var(--wp--preset--color--signal);
	font-size: 0.75rem;
	z-index: 0;
}
.vv-card-media .wp-block-post-featured-image { margin: 0; height: 100%; position: relative; z-index: 1; }
.vv-card-media .wp-block-post-featured-image a,
.vv-card-media .wp-block-post-featured-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vv-card-media img { transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter 0.6s ease; filter: saturate(0.85); }
.vv-card:hover .vv-card-media img { transform: scale(1.04); filter: saturate(1); }
.vv-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.vv-card .wp-block-post-title { transition: color 0.25s ease; }
.vv-card:hover .wp-block-post-title a { color: var(--wp--preset--color--signal); }

/* Processo */
.vv-steps > .wp-block-column {
	border-top: 1px solid var(--wp--preset--color--graphite);
	padding-top: 1.25rem;
}

/* Autoral */
.vv-authorial { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); }
.vv-authorial h2, .vv-authorial h3, .vv-authorial a { color: var(--wp--preset--color--ink); }
.vv-authorial .vv-label { color: #6c6963; }
.vv-authorial .vv-section-head, .vv-authorial .vv-film { border-color: #d9d4cb; }
.vv-film { border-top: 1px solid #d9d4cb; padding-top: 1rem; }
.vv-authorial .wp-block-button__link {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--ink);
}

/* Contato */
.vv-contact h2 { max-width: 14ch; }
.vv-contact .vv-mail a {
	font-size: clamp(1.5rem, 4.5vw, 3.75rem);
	letter-spacing: -0.04em;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 100% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: color 0.25s ease;
	word-break: break-word;
}
.vv-contact .vv-mail a:hover { color: var(--wp--preset--color--signal); }

/* Rodapé */
.vv-footer { border-top: 1px solid var(--wp--preset--color--graphite); }
.vv-footer a { text-decoration: none; color: var(--wp--preset--color--smoke); }
.vv-footer a:hover { color: var(--wp--preset--color--bone); }
.vv-footer .wp-block-site-title a { color: var(--wp--preset--color--bone); }

/* Página de projeto */
.vv-project-hero .wp-block-post-featured-image img { aspect-ratio: 21 / 9; object-fit: cover; width: 100%; }
.vv-project-body .wp-block-embed iframe,
.vv-project-body video { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.vv-project-body figure { margin-block: 2.5rem; }
.wp-block-post-content > .alignwide,
.wp-block-post-content > .alignfull { margin-block: 3rem; }

/* 404 */
.vv-404 h1 { font-size: clamp(4rem, 20vw, 16rem); line-height: 0.85; }

/* Paginação */
.wp-block-query-pagination { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }

/* ---------- Movimento: entrada suave ao rolar (sem JavaScript) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.vv-hero h1, .vv-hero .vv-hero-sub, .vv-hero .wp-block-buttons {
		animation: vv-rise 1.1s cubic-bezier(.2,.7,.2,1) both;
	}
	.vv-hero .vv-hero-sub { animation-delay: 0.12s; }
	.vv-hero .wp-block-buttons { animation-delay: 0.24s; }

	@supports (animation-timeline: view()) {
		.vv-reveal > *, .vv-service, .vv-card, .vv-steps > .wp-block-column, .vv-film {
			animation: vv-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 35%;
		}
	}
}
@keyframes vv-rise {
	from { opacity: 0; transform: translateY(28px); }
	to { opacity: 1; transform: none; }
}

/* ---------- Telas pequenas ---------- */
@media (max-width: 781px) {
	.vv-hero.wp-block-cover { min-height: 88svh !important; padding-top: 6rem; }
	.vv-service .wp-block-columns { gap: 0.5rem; }
	.vv-hide-mobile { display: none !important; }
}

/* Nome do site: "audiovisual" mais leve que "vivanc●" */
.wp-block-site-title .vv-sub { font-weight: 300; color: var(--wp--preset--color--smoke); letter-spacing: -0.02em; }

/* Datas e metadados em mono */
.wp-block-post-date { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.12em; color: var(--wp--preset--color--smoke); }
.wp-block-post-navigation-link a { text-decoration: none; }

/* Seções coladas, sem faixas entre elas */
.wp-site-blocks > main, .wp-site-blocks > footer { margin-block-start: 0; }
.vv-main-home > * { margin-block: 0 !important; }

/* Abertura alinhada com o resto da página */
.vv-hero.wp-block-cover { padding-left: 0; padding-right: 0; }

/* Home editável como página: seções coladas */
.vv-main-home .wp-block-post-content > * { margin-block: 0 !important; }

/* ---------- Logo oficial (arquivo vetorial do manual de marca) ---------- */
.vv-logo { display: inline-block; line-height: 0; text-decoration: none; }
.vv-logo svg { display: block; width: 100%; height: auto; }
.vv-header .vv-logo { width: 150px; }
.vv-footer .vv-logo { width: 260px; }
.vv-footer .wp-block-site-title { margin-bottom: 2.75rem; }
.vv-header-inner { padding-top: 0.9rem !important; padding-bottom: 0.9rem !important; }
@media (max-width: 781px) {
	.vv-header .vv-logo { width: 128px; }
	.vv-footer .vv-logo { width: 200px; }
}