@charset "utf-8";

/* ================================= =/
	ANIMAR TRANSFORMAR
/= ================================= */

.anipe-horizontal-direita {
	transition-timing-function: ease;
	transform: translateX(-50%)
}
.anipe-horizontal-esquerda {
	transition-timing-function: ease;
	transform: translateX(50%)
}
.anipe-diagonal-direita {
	transition-timing-function: ease;
	transform: translate(-50%,-50%)
}
.anipe-diagonal-esquerda {
	transition-timing-function: ease;
	transform: translate(50%,-50%)
}
.anipe-vertical-subir {
	transition-timing-function: ease;
	transform: translateY(50%)
}
.anipe-vertical-descer {
	transition-timing-function: ease;
	transform: translateY(-50%)
}
.anipe-crescer {
	transition-timing-function: ease-in-out;
	transform: scale(0.6,0.6)
}
.anipe-encolher {
	transition-timing-function: ease;
	transform: scale(1.8,1.8)
}
.anipe-abrir-horizontal {
	transition-timing-function: ease;
	transform: scale(0.1,1)
}
.anipe-abrir-vertical {
	transition-timing-function: ease;
	transform: scale(1,0.1)
}
.anipe-rodar-horario {
	transition-timing-function: ease-in-out;
	transform: rotate(-720deg)
}
.anipe-rodar-antihor {
	transition-timing-function: ease-in-out;
	transform: rotate(720deg)
}
.anipe-rodar-horario, .anipe-rodar-antihor {
	transition-property: transform, opacity;
	transition-duration: 2s;
	width: fit-content;
	opacity: 0.2
}
.anipe-iluminar, .anipe-aparecer {
	transition-timing-function: ease-in-out;
	transition-property: opacity;
	transition-duration: 2s
}
.anipe-iluminar
	{ opacity: 0.1 }
.anipe-aparecer
	{ opacity: 0 }

[class*="anipe-diagonal-"],	[class*="anipe-horizontal-"],
[class*="anipe-vertical-"],	[class*="anipe-abrir-"],
.anipe-crescer,				.anipe-encolher {
	transition-property: transform, opacity;
	transition-duration: 2s;
	opacity: 0
}
.ipe-animar .atraso-03
	{ transition-delay: 0.3s }
.ipe-animar .atraso-06
	{ transition-delay: 0.6s }
.ipe-animar .atraso-2s
	{ transition-delay: 2.0s }
.ipe-animar .atraso-4s
	{ transition-delay: 4.0s }
.ipe-animar .atraso-6s
	{ transition-delay: 6.0s }

.ipe-animar.ativo [class*="anipe-"],
[class*="anipe-"].ativo
	{ transform: none; opacity: 1 }

.ipe-animar
	{ overflow: hidden }

/* ================================= =/
	FILTROS E CLIP
/= ================================= */

.anipe-revelar {
	filter: hue-rotate(360deg); opacity: 0;
	transition-property: opacity, filter;
	transition-timing-function: ease;
	transition-duration: 2s
}
.anipe-hue {
	filter: hue-rotate(260deg) /*saturate(400%)*/;
	transition-timing-function: ease;
	transition-property: filter;
	transition-duration: 4s
}
.anipe-sepia {
	filter: sepia(100%) hue-rotate(240deg);
	transition-timing-function: ease;
	transition-property: filter;
	transition-duration: 4s;
}
.ipe-animar.ativo .anipe-revelar,	.anipe-revelar.ativo,
.ipe-animar.ativo .anipe-sepia,		.anipe-sepia.ativo,
.ipe-animar.ativo .anipe-hue,		.anipe-hue.ativo
	{ filter: none }

.anipe-circulo {
	transition-timing-function: ease-out;
	transition-property: clip-path;
	transition-duration: 2s;
	clip-path: circle(0%)
}
.ipe-animar.ativo .anipe-circulo,
.anipe-circulo.ativo
	{ clip-path: circle(100%) }

:root {
--colunas-01: polygon(
	000% 000%,020% 000%,020% 100%,040% 100%,040% 000%,060% 000%,060% 100%,080% 100%,
	080% 000%,100% 000%,100% 100%,100% 000%,080% 000%,080% 100%,060% 100%,
	060% 000%,040% 000%,040% 100%,020% 100%,020% 000%,000% 000%,000% 100%
);
--colunas-02: polygon(
	000% 000%,020% 000%,020% 000%,040% 000%,040% 000%,060% 000%,060% 000%,080% 000%,
	080% 000%,100% 000%,100% 100%,100% 100%,080% 100%,080% 100%,060% 100%,
	060% 100%,040% 100%,040% 100%,020% 100%,020% 100%,000% 100%,000% 100%
);
--colunas-03: polygon(
	000% 000%,000% 020%,100% 020%,100% 040%,000% 040%,000% 060%,100% 060%,100% 080%,
	000% 080%,000% 100%,100% 100%,000% 100%,000% 080%,100% 080%,100% 060%,
	000% 060%,000% 040%,100% 040%,100% 020%,000% 020%,000% 000%,100% 000%
);
--colunas-04: polygon(
	000% 000%,000% 020%,000% 020%,000% 040%,000% 040%,000% 060%,000% 060%,000% 080%,
	000% 080%,000% 100%,100% 100%,100% 100%,100% 080%,100% 080%,100% 060%,
	100% 060%,100% 040%,100% 040%,100% 020%,100% 020%,100% 000%,100% 000%
);
--estrela-41: polygon(050% 050%,050% 025%,050% 050%,075% 050%,050% 050%,050% 075%,050% 050%,025% 050%);
--estrela-42: polygon(000% 000%,050% 000%,100% 000%,100% 050%,100% 100%,050% 100%,000% 100%,000% 050%);

--estrela-61: polygon(
	020% 030%,050% 050%,050% 010%,050% 050%,080% 030%,050% 050%,
	080% 070%,050% 050%,050% 090%,050% 050%,020% 070%,050% 050%
);
--estrela-62: polygon(
	000% 000%,025% 000%,050% 000%,075% 000%,100% 000%,100% 050%,
	100% 100%,075% 100%,050% 100%,025% 100%,000% 100%,000% 050%
);
--persianas-01: polygon(
	010% 000%,010% 000%,010% 100%,030% 100%,030% 000%,030% 000%,030% 100%,050% 100%,050% 000%,050% 000%,
	050% 100%,070% 100%,070% 000%,070% 000%,070% 100%,090% 100%,090% 000%,090% 000%,090% 100%,010% 100%
);
--persianas-02: polygon(
	000% 000%,020% 000%,020% 100%,020% 100%,020% 000%,040% 000%,040% 100%,040% 100%,040% 000%,060% 000%,
	060% 100%,060% 100%,060% 000%,080% 000%,080% 100%,080% 100%,080% 000%,100% 000%,100% 100%,000% 100%
);
--persianas-03: polygon(
	000% 010%,000% 010%,100% 010%,100% 030%,000% 030%,000% 030%,100% 030%,100% 050%,000% 050%,000% 050%,
	100% 050%,100% 070%,000% 070%,000% 070%,100% 070%,100% 090%,000% 090%,000% 090%,100% 090%,100% 010%
);
--persianas-04: polygon(
	000% 000%,000% 020%,100% 020%,100% 020%,000% 020%,000% 040%,100% 040%,100% 040%,000% 040%,000% 060%,
	100% 060%,100% 060%,000% 060%,000% 080%,100% 080%,100% 080%,000% 080%,000% 100%,100% 100%,100% 000%
);
--janela-01: polygon(000% 000%,100% 000%,050% 000%,050% 100%,100% 100%,000% 100%,050% 100%,050% 000%);
--janela-02: polygon(000% 000%,100% 000%,100% 020%,100% 080%,100% 100%,000% 100%,000% 080%,000% 020%);

--iris-41: polygon(
	100% 000%,100% 000%,050% 050%,100% 100%,100% 100%,050% 050%,
	000% 100%,000% 100%,050% 050%,000% 000%,000% 000%,050% 050%
);
--iris-42: polygon(
	000% 000%,100% 000%,100% 000%,100% 000%,100% 100%,100% 100%,
	100% 100%,000% 100%,000% 100%,000% 100%,000% 000%,000% 000%
);
--iris-06: polygon(
	000% 084%,050% 050%,000% 016%,050% 050%,050% 000%,050% 050%,
	100% 016%,050% 050%,100% 084%,050% 050%,050% 100%,050% 050%
);
}
.anipe-persianas-5v {
	transition-timing-function: ease-out;
	transition-property: clip-path;
	clip-path: var(--persianas-01);
	transition-duration: 2s
}
.ipe-animar.ativo .anipe-persianas-5v,
.anipe-persianas-5v.ativo
	{ clip-path: var(--persianas-02) }

.anipe-persianas-5h {
	transition-timing-function: ease-out;
	transition-property: clip-path;
	clip-path: var(--persianas-03);
	transition-duration: 2s
}
.ipe-animar.ativo .anipe-persianas-5h,
.anipe-persianas-5h.ativo
	{ clip-path: var(--persianas-04) }

.anipe-colunas-5v {
	transition-timing-function: ease-out;
	transition-property: clip-path;
	clip-path: var(--colunas-01);
	transition-duration: 2s
}
.ipe-animar.ativo .anipe-colunas-5v,
.anipe-colunas-5v.ativo
	{ clip-path: var(--colunas-02) }

.anipe-colunas-5h {
	transition-timing-function: ease-out;
	transition-property: clip-path;
	clip-path: var(--colunas-03);
	transition-duration: 2s
}
.ipe-animar.ativo .anipe-colunas-5h,
.anipe-colunas-5h.ativo
	{ clip-path: var(--colunas-04) }

.anipe-estrela-04 {
	transition-timing-function: ease-out;
	transition-property: clip-path;
	clip-path: var(--estrela-41);
	transition-duration: 2s
}
.ipe-animar.ativo .anipe-estrela-04,
.anipe-estrela-04.ativo
	{ clip-path: var(--estrela-42) }

.anipe-estrela-06 {
	transition-timing-function: linear;
	transition-property: clip-path;
	clip-path: var(--estrela-61);
	transition-duration: 2s
}
.ipe-animar.ativo .anipe-estrela-06,
.anipe-estrela-06.ativo
	{ clip-path: var(--estrela-62) }

.anipe-janela {
	transition-timing-function: ease-out;
	transition-property: clip-path;
	clip-path: var(--janela-01);
	transition-duration: 2s
}
.ipe-animar.ativo .anipe-janela,
.anipe-janela.ativo
	{ clip-path: var(--janela-02) }

.anipe-iris-04 {
	transition-timing-function: ease-out;
	transition-property: clip-path;
	clip-path: var(--iris-41);
	transition-duration: 2s
}
.ipe-animar.ativo .anipe-iris-04,
.anipe-iris-04.ativo
	{ clip-path: var(--iris-42) }

.anipe-iris-06 {
	transition-timing-function: ease-out;
	transition-property: clip-path;
	clip-path: var(--iris-06);
	transition-duration: 2s
}
.ipe-animar.ativo .anipe-iris-06,
.anipe-iris-06.ativo
	{ clip-path: var(--estrela-62) }

/* ================================= =/
	GIRAR
/= ================================= */

.ipe-animar.wp-block-columns, .ipe-girar-mouse
  { background-color: transparent; perspective: 2000px }

.ipe-girar-mouse:hover [class*="anipe-girar"]
	{ transform: none }

.ipe-frente
	{ position: relative; margin: 0 }
.ipe-verso
	{ position: absolute; margin: 0 }
.ipe-verso:not([class*="bordada-"])
	{ width: 100% }

.ipe-sepia-01
	{ position: absolute }
.ipe-sepia-01 img
	{ filter: invert(100%) sepia(100%) hue-rotate(240deg) }

[class*="anipe-girar"] {
	transform-style: preserve-3d;
	backface-visibility: hidden;
	transition: transform 0.8s;
	position: relative
}
.anipe-girar-horizontal
	{ transform: rotateX(180deg) }
.anipe-girar_horizontal
	{ transform: rotateX(-180deg) }

.anipe-girar-vertical
	{ transform: rotateY(180deg) }
.anipe-girar_vertical
	{ transform: rotateY(-180deg) }

.anipe-girar_horizontal [class*="ipe-verso"],
.anipe-girar-horizontal [class*="ipe-verso"]
	{ backface-visibility: hidden; transform: rotateX(180deg); bottom: 0 }

.anipe-girar_vertical [class*="ipe-verso"],
.anipe-girar-vertical [class*="ipe-verso"]
	{ backface-visibility: hidden; transform: rotateY(180deg) }

.ipe-nao-girar
	{ position: relative }

.ipe-frente-80 figcaption, .ipe-verso-80 figcaption,
.ipe-frente figcaption, .ipe-verso figcaption
	{ position: absolute; right: 2em; bottom: 0 }

/* ================================= =/
	PARALAXE
/= ================================= */
.ipe-paralaxe {
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	min-height: 600px; 
}