/*
Homepage specific styles
Purpose: Styles for the homepage template including intro text animation and works grid
*/

h1.intro,
h2.intro {
    font-size: var(--txt-l);
    line-height: var(--size-l);
    margin: 0;
    padding: 0;
}

span.swap-list {
	margin: 0;
	padding: 0;
	display: inline-block;
	overflow: hidden;
	height: var(--size-l);
}

span.swap-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
	
	animation: swaptext 10s ease infinite;
}

@keyframes swaptext {
  0%      { margin-top: calc(0 * var(--size-l)); }
  15.0%   { margin-top: calc(0 * var(--size-l)); }
  15.6%   { margin-top: calc(-1 * var(--size-l)); }

  32.0%     { margin-top: calc(-1 * var(--size-l)); }
  32.6%     { margin-top: calc(-2 * var(--size-l)); }

  48.0%   { margin-top: calc(-2 * var(--size-l)); }
  48.6%   { margin-top: calc(-3 * var(--size-l)); }

  65.0%     { margin-top: calc(-3 * var(--size-l)); }
  65.6%     { margin-top: calc(-4 * var(--size-l)); }

  81.0%   { margin-top: calc(-4 * var(--size-l)); }
  81.6%   { margin-top: calc(-5 * var(--size-l)); }

  99.95%     { margin-top: calc(-5 * var(--size-l)); }
  99.99%     { margin-top: calc(-6 * var(--size-l)); }
  100%    { margin-top: calc(0 * var(--size-l)); }
}

span.swap-list ul li {
	margin: 0;
	padding: 0;
}

section.works {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--size-xs);
    margin-top: var(--size-xl);
}

section.works a {
	/*! aspect-ratio: 4 / 2.5; */
}

section.works a img {
	object-fit: cover;
	width: 100%;
	height: 100%;		/*works only on firefox other browsers counts 100% of viewport?*/
	object-position: left;
	transition: all 0.15s;
	filter: grayscale(100%) contrast(1.2);
}

section.works a img:hover {
	filter: none;
}

section.works a img.label {
	width: calc(150 * var(--size));
	position: absolute;
	margin-top: calc(15 * var(--size));
	margin-left: calc(-23 * var(--size));
} 

section.works a img:hover ~ div.tag {
	transition: all 0.15s;
	filter: grayscale(100%) contrast(1.2);
}

section.works a div.tag {
	display: block;
	background: rgba(var(--alpha), 1);
	color: rgba(var(--dark), 1);
	line-height: var(--size-s);
	font-size: var(--txt-s);
	padding: calc(2.4 * var(--size)) calc(4 * var(--size));
	padding-left: calc(5 * var(--size));
	position: absolute;
	margin-top: calc(-13 * var(--size));
	margin-left: calc(0 * var(--size));
	letter-spacing: 0.005em;
}


/* 1. Landscape screen or narrow screen */
@media screen and (max-aspect-ratio: 3/2), (max-width: 1500px) {
	section.works {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}
}

/* 2. Square screen */
@media screen and (max-aspect-ratio: 3/2.6) {
	section.works {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
}

/* 3. Vertical screen (Portrait) */
@media screen and (max-aspect-ratio: 2.6/3) {
	section.works {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
	}
}