/*
 * Hamo Gallery - Infinity — muro de imagens 3D com rolagem infinita.
 * 100% CSS (sem JS). Diferença estrutural vs. a referência: a distância da
 * rolagem é percentual à altura da própria coluna (translateY(-100% + h)),
 * então funciona igualmente com imagens de altura uniforme ou naturais.
 * Nunca declarar aqui as CSS vars que os controles escrevem no {{WRAPPER}}
 * (lição do shadowing) — apenas consumi-las com var(--x, fallback).
 */

.hamo-gi__viewport {
	position: relative;
	width: 100%;
	height: var(--hamo-gi-h, 340px);
	perspective: var(--hamo-gi-persp, 1000px);
	overflow: clip;
}

/* O plano 3D inclinado, maior que a área visível (como na referência:
   largura 175% e deslocado para cima/direita em -100%). Largura, rotações
   e deslocamentos são todos responsivos via controles do Elementor. */
.hamo-gi__columns {
	position: absolute;
	top: -100%;
	right: -100%;
	width: var(--hamo-gi-plane-w, 175%);
	display: grid;
	grid-template-columns: repeat(var(--hamo-gi-cols, 5), 1fr);
	transform-style: preserve-3d;
	transform-origin: 50%;
	transform:
		rotateX(var(--hamo-gi-rx, 45deg))
		rotateY(var(--hamo-gi-ry, 20deg))
		rotate(var(--hamo-gi-rz, -25deg))
		translate3d(var(--hamo-gi-tx, -6em), var(--hamo-gi-ty, 8em), var(--hamo-gi-tz, 8em));
}

.hamo-gi__column {
	display: flex;
	flex-direction: column;
	gap: var(--hamo-gi-row-gap, 8px);
	margin-left: var(--hamo-gi-col-gap, 8px);
	margin-right: var(--hamo-gi-col-gap, 8px);
}

/* Defasagem vertical entre colunas vizinhas (padrão da referência). */
.hamo-gi__column:nth-child(3n + 1) {
	padding-top: 100px;
}

.hamo-gi__column:nth-child(3n + 2) {
	padding-top: 50px;
}

.hamo-gi__item {
	width: 100%;
	height: var(--hamo-gi-img-h, 200px);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

/* Modo "naturais": a altura vem do aspect-ratio inline de cada imagem. */
.hamo-gi--natural .hamo-gi__item {
	height: auto;
}

/* Rolagem infinita em pingue-pongue (alternate), como na referência.
   min() zera o deslocamento se a coluna for mais curta que a área visível
   (poucas imagens), em vez de deslizar para o lado errado. */
@keyframes hamo-gi-up {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(min(0px, calc(-100% + var(--hamo-gi-h, 340px))));
	}
}

@keyframes hamo-gi-down {
	from {
		transform: translateY(min(0px, calc(-100% + var(--hamo-gi-h, 340px))));
	}

	to {
		transform: translateY(0);
	}
}

.hamo-gi__column--up {
	animation: hamo-gi-up var(--hamo-gi-speed, 25s) linear infinite alternate;
}

.hamo-gi__column--down {
	animation: hamo-gi-down var(--hamo-gi-speed, 25s) linear infinite alternate;
}

/* Gradiente externo nas 4 bordas, na cor escolhida — esfumaça a galeria
   para dentro do fundo da seção, criando a sensação de infinito. */
.hamo-gi__fade {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(to bottom, var(--hamo-gi-fade, #000) 0%, transparent var(--hamo-gi-fade-size, 18%)),
		linear-gradient(to top, var(--hamo-gi-fade, #000) 0%, transparent var(--hamo-gi-fade-size, 18%)),
		linear-gradient(to right, var(--hamo-gi-fade, #000) 0%, transparent var(--hamo-gi-fade-size, 18%)),
		linear-gradient(to left, var(--hamo-gi-fade, #000) 0%, transparent var(--hamo-gi-fade-size, 18%));
}

/* Mobile: em telas estreitas os deslocamentos em `em` são proporcionalmente
   muito maiores e 175% de largura vira pouca cobertura absoluta — os cantos
   do plano inclinado invadiam a área visível ("bordas vazando"). O scale()
   entra ANTES do translate na cadeia (aplicado primeiro), ampliando o plano
   em torno do próprio centro sem mexer nos deslocamentos do usuário; o
   max() garante o piso de cobertura mas respeita valores maiores definidos
   nos controles responsivos. */
@media (max-width: 767px) {
	.hamo-gi__columns {
		width: max(var(--hamo-gi-plane-w, 175%), 320%);
		transform:
			rotateX(var(--hamo-gi-rx, 45deg))
			rotateY(var(--hamo-gi-ry, 20deg))
			rotate(var(--hamo-gi-rz, -25deg))
			translate3d(var(--hamo-gi-tx, -6em), var(--hamo-gi-ty, 8em), var(--hamo-gi-tz, 8em))
			scale(1.45);
	}

	/* Esfumaçado reforçado: piso de 26% para as bordas nunca aparecerem
	   secas na tela estreita (o controle vence se definir valor maior). */
	.hamo-gi__fade {
		background:
			linear-gradient(to bottom, var(--hamo-gi-fade, #000) 0%, transparent max(var(--hamo-gi-fade-size, 18%), 26%)),
			linear-gradient(to top, var(--hamo-gi-fade, #000) 0%, transparent max(var(--hamo-gi-fade-size, 18%), 26%)),
			linear-gradient(to right, var(--hamo-gi-fade, #000) 0%, transparent max(var(--hamo-gi-fade-size, 18%), 26%)),
			linear-gradient(to left, var(--hamo-gi-fade, #000) 0%, transparent max(var(--hamo-gi-fade-size, 18%), 26%));
	}
}

/* Respeita usuários com preferência por menos movimento. */
@media (prefers-reduced-motion: reduce) {
	.hamo-gi__column--up,
	.hamo-gi__column--down {
		animation: none;
	}
}