/* DVT Users & Challenges Addon – Bloco "Elementos Flutuantes"
 *
 * Camada decorativa absoluta por cima de uma secção (na prática, um
 * Container do Spectra), com os elementos posicionados em % para
 * acompanharem sempre o tamanho real da secção — mesma decisão já tomada
 * nos blobs do next-challenge-block.css: em px fixos, o deslocamento fica
 * desproporcionado assim que a secção é mais estreita e a mancha parece
 * solta em vez de encostada ao sítio certo do design.
 *
 * Todos os valores por elemento chegam em custom properties inline vindas
 * do PHP (ver class-dvtuca-floating-decor-block.php).
 */

@font-face {
	font-family: 'GoodDogNewW00-Regular';
	src: url( '../fonts/GoodDogNewW00-Regular.ttf' ) format( 'truetype' );
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* O !important no position não é preguiça: o Spectra força
 * `width:100%; position:relative` a todos os filhos diretos do Container
 * que não estejam na lista de exceções dele (ver a regra
 * `body .wp-block-uagb-container>.uagb-container-inner-blocks-wrap>*:not(…)`
 * em assets/css/blocks/container.css), com uma especificidade altíssima
 * por causa da pilha de :not(). Sem isto a camada entrava no fluxo e
 * empurrava o conteúdo do hero para baixo.
 *
 * O container-type serve a dois fins: dá a unidade cqw usada no tamanho do
 * texto e, por implicar `contain: layout`, cria o contexto de
 * empilhamento que torna o z-index abaixo previsível. */
.dvtuca-floating-decor {
	position: absolute !important;
	top: 0;
	bottom: 0;
	/* A camada quebra sempre para a largura do ecrã: vive dentro do
	 * .uagb-container-inner-blocks-wrap, que está travado na largura de
	 * conteúdo (1200px por omissão), e sem isto um elemento a 95% ficava no
	 * limite dos 1200px em vez do limite do ecrã. Mesma técnica dos 100vw já
	 * usada no wave-divider-block.css. O !important é preciso porque a mesma
	 * regra do Spectra também impõe `width:100%`. */
	left: 50%;
	right: auto;
	width: 100vw !important;
	margin-left: -50vw;
	pointer-events: none;
	container-type: inline-size;
	overflow: visible;
}

/* Atrás do conteúdo. z-index negativo não serve — sairia do contexto de
 * empilhamento do Container (que é `position:relative` mas sem z-index,
 * logo não é contexto nenhum) e a camada acabava atrás do próprio fundo da
 * secção, invisível. Em vez disso fica no nível 0 e sobe-se o conteúdo:
 * o combinador `~` trata dos irmãos seguintes, que é a ordem correta de
 * utilização (o bloco é para ficar como PRIMEIRO elemento da secção). */
.dvtuca-floating-decor--behind {
	z-index: 0;
}

.dvtuca-floating-decor--behind ~ * {
	position: relative;
	z-index: 1;
}

/* À frente do conteúdo, mas por baixo do overlay de link do Spectra
 * (.spectra-container-link-overlay, z-index:10) para não roubar cliques
 * a secções inteiras clicáveis. */
.dvtuca-floating-decor--front {
	z-index: 5;
}

/* Caixa de referência alternativa, para os elementos que têm de acompanhar
 * os cards em vez das margens do ecrã. Reproduz a área de conteúdo do
 * Container: centrada e travada na mesma largura máxima. O transform faz
 * dela o bloco contentor dos elementos absolutos lá dentro, que é o que
 * passa a medir as percentagens contra esta caixa e não contra os 100vw. */
.dvtuca-floating-decor__content-area {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: min( 100%, var( --dvtuca-decor-content-width, 1200px ) );
	transform: translateX( -50% );
	pointer-events: none;
	/* Também é container: assim o tamanho do texto ancorado ao conteúdo
	 * escala com esta caixa e não com o ecrã, tal como a posição. */
	container-type: inline-size;
}

/* Posição fica no elemento de fora, animação no de dentro — juntos, os
 * keyframes (que animam transform) apagavam o translate/rotate da posição.
 * O translate(-50%,-50%) faz com que X/Y sejam o CENTRO do elemento, que é
 * como se lê um design, e não o canto superior esquerdo. */
.dvtuca-floating-decor__item {
	position: absolute;
	top: var( --dvtuca-decor-y, 50% );
	left: var( --dvtuca-decor-x, 50% );
	width: var( --dvtuca-decor-width, auto );
	line-height: 0;
	opacity: var( --dvtuca-decor-opacity, 1 );
	transform: translate( -50%, -50% ) rotate( var( --dvtuca-decor-rotation, 0deg ) );
}

.dvtuca-floating-decor__anim {
	display: block;
	will-change: transform;
}

.dvtuca-floating-decor__anim--float {
	animation: dvtuca-decor-float var( --dvtuca-decor-duration, 3s ) ease-in-out var( --dvtuca-decor-delay, 0s ) infinite alternate;
}

.dvtuca-floating-decor__anim--bounce {
	animation: dvtuca-decor-bounce var( --dvtuca-decor-duration, 3s ) cubic-bezier( 0.5, 0, 0.5, 1 ) var( --dvtuca-decor-delay, 0s ) infinite;
}

/* Percentagens em translateY são relativas à ALTURA DO PRÓPRIO elemento —
 * a amplitude acompanha sozinha o tamanho de cada elemento, sem precisar
 * de um controlo extra na sidebar. */
@keyframes dvtuca-decor-float {
	from {
		transform: translateY( -6% );
	}

	to {
		transform: translateY( 6% );
	}
}

@keyframes dvtuca-decor-bounce {
	0%,
	100% {
		transform: translateY( 0 );
	}

	50% {
		transform: translateY( -18% );
	}
}

.dvtuca-floating-decor__image {
	display: block;
	width: 100%;
	height: auto;
}

.dvtuca-floating-decor__image--flip {
	transform: scaleX( -1 );
}

.dvtuca-floating-decor__image--shadow {
	filter: drop-shadow( 0 6px 16px rgba( 0, 0, 0, 0.35 ) );
}

/* font-size: o cliente escolhe px "de referência" a 1200px de largura de
 * secção; /12 converte esse valor em cqw (1200/100), por isso o texto
 * encolhe com a secção em vez de estourar em colunas estreitas — e o
 * clamp garante que nunca fica ilegível nem passa do valor pedido.
 * cqw (não vw!), pela mesma razão documentada em next-challenge-block.css:
 * tem de ser relativo à secção, não ao viewport. */
.dvtuca-floating-decor__text {
	display: block;
	font-family: 'GoodDogNewW00-Regular', 'Comic Sans MS', ui-rounded, sans-serif;
	font-size: clamp( 12px, calc( var( --dvtuca-decor-font-size, 40 ) / 12 * 1cqw ), calc( var( --dvtuca-decor-font-size, 40 ) * 1px ) );
	font-weight: 400;
	line-height: 1.1;
	text-transform: uppercase;
	white-space: nowrap;
	color: var( --dvtuca-decor-color, #ffffff );
}

.dvtuca-floating-decor__text--shadow {
	text-shadow: 0 4px 12px rgba( 0, 0, 0, 0.45 );
}

/* Mesmo breakpoint dos blocos irmãos. Em mobile a secção é muito mais
 * estreita e alguns elementos do design deixam de ter sítio — em vez de
 * os empilhar em cima do texto, o cliente esconde-os um a um. */
@media ( max-width: 600px ) {
	.dvtuca-floating-decor__item--hide-mobile {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.dvtuca-floating-decor__anim {
		animation: none !important;
	}
}

/* ── Editor ───────────────────────────────────────────────────────────────
 * Sendo uma camada absoluta e sem eventos de rato, no canvas o bloco
 * ficaria com 0px de altura e sem forma de lhe clicar para o selecionar.
 * A etiqueta que o JS do editor desenha por cima resolve a seleção; isto
 * garante que ela é mesmo clicável. */
.editor-styles-wrapper .dvtuca-floating-decor__editor-label {
	pointer-events: auto;
}