/* =========================================================
	ANIMATION EFFECTS
========================================================= */
/* =========================================================
	ANIMATION: REVEAL MASK
	<div class="mask">
		<h2 class="reveal">Headline or other text</h2>
	</div>
========================================================= */

/* INITIAL STATES */
.is-public .revealable				{will-change:transform, opacity, filter;transition-delay:var(--reveal-delay, 0s);}
.is-public .reveal-mask				{overflow:hidden;}

.is-public .reveal-vertical-down	{opacity:0.2;transform:translateY(-150px);transition:transform 0.3s cubic-bezier(.2,.8,.2,1),opacity 0.3s ease;}
.is-public .reveal-vertical-up		{opacity:0.2;transform:translateY(150px);transition:transform 0.3s cubic-bezier(.2,.8,.2,1),opacity 0.3s ease;}
.is-public .reveal-horizontal-left	{opacity:0.2;transform:translateX(-150px);transition:transform 0.3s cubic-bezier(.2,.8,.2,1),opacity 0.3s ease;}
.is-public .reveal-horizontal-right	{opacity:0.2;transform:translateX(150px);transition:transform 0.3s cubic-bezier(.2,.8,.2,1),opacity 0.3s ease;}
.is-public .reveal-scale			{opacity:0.7;transform:scale(0.7);transition:opacity 0.3s ease, filter 0.3s ease;}
.is-public .reveal-scale-up			{opacity:0.7;transform:scale(0.97);transition:transform 0.3s cubic-bezier(.2,.8,.2,1), opacity 0.3s ease;}
.is-public .reveal-focus			{opacity:0.5;filter:blur(6px);transition:opacity 0.3s ease, filter 0.3s ease;}
.is-public .reveal-masked			{transform:translateY(100%);transition:transform .7s cubic-bezier(.2,.8,.2,1);}

/* END STATES */
.is-public .reveal-vertical-down.revealed		{opacity:1;transform:translateY(0);}
.is-public .reveal-vertical-up.revealed			{opacity:1;transform:translateY(0);}
.is-public .reveal-horizontal-left.revealed		{opacity:1;transform:translateX(0);}
.is-public .reveal-horizontal-right.revealed	{opacity:1;transform:translateX(0);}
.is-public .reveal-scale-up.revealed			{opacity:1;transform:scale(1);}
.is-public .reveal-focus.revealed				{opacity:1;filter:blur(0);}
.is-public .reveal-scale.revealed				{opacity:1;filter:scale(1);}
.is-public .reveal-rotate-clockwise				{opacity:0.8;transform:translateY(0px) rotate(0deg);transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .5s ease;}
.is-public .reveal-rotate-anticlockwise			{opacity:0.8;transform:translateY(0px) rotate(0deg);transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .5s ease;}

.is-public .reveal-cover-img-scale-tilt-left-right img	{opacity:0.7;transform:scale(1) rotate(0deg);transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .5s ease;}
.is-public .reveal-cover-img-scale-tilt-right-left img	{opacity:0.7;transform:scale(1) rotate(0deg);transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .5s ease;}

.is-public .reveal-image-swap figure				{opacity:1;display:block;visibility:visible;transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .5s ease;}
.is-public .reveal-image-swap figure.alternative	{opacity:0;display:none;visibility:hidden;transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .5s ease;}
.is-public .reveal-masked.revealed					{transform:translateY(0);}

.is-public .reveal-rotate-clockwise.revealed		{opacity:1;transform:translateY(20px) rotate(1deg);}
.is-public .reveal-rotate-anticlockwise.revealed	{opacity:1;transform:translateY(-20px) rotate(-1deg);}

.is-public .reveal-cover-img-scale-tilt-left-right.revealed img	{opacity:1;transform:scale(1.1) rotate(1deg);transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .5s ease;}
.is-public .reveal-cover-img-scale-tilt-right-left.revealed img	{opacity:1;transform:scale(1.1) rotate(-1deg);transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .5s ease;}

.is-public .reveal-image-swap.revealed figure				{opacity:0;display:none;visibility:hidden;}
.is-public .reveal-image-swap.revealed figure.alternative	{opacity:1;display:block;visibility:visible;}


/* HOVER STATES */
.is-public .reveal-cover-img-scale-tilt-left-right:hover img	{opacity:1;transform:scale(1.2) rotate(-1deg);}
.is-public .reveal-cover-img-scale-tilt-right-left:hover img	{opacity:1;transform:scale(1.2) rotate(1deg);}