* {
	margin: 0;
	padding: 0;
	line-height: 1.1em;
}

:root {
	--viewportSmall: 800px;
	--viewportMedium: 1024px;
	--viewportLarge: 1440px;
	
	--magenta: #e20074;
	--grey: #ededed;
	--anthracite: #383838;	
}

@font-face {
	font-family: 'TeleNeoExtraBold';
	src: url('../fonts/TeleNeoWeb-ExtraBold.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: 'TeleNeoMedium';
	src: url('../fonts/TeleNeoWeb-Medium.woff2') format('woff2');
	font-display: swap;
}


@keyframes pulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes pulseGlow {
	10% {
		box-shadow: 0 0 0 0 rgba(255,238,170,.4), 0 0 0 0  rgba(226,0,116,.4),0 0 0 0 rgba(255,0,255,.4);
	}
	50% {
		box-shadow: 0 0 15px 2px rgba(255,238,170,.4), 0 0 40px 30px rgba(226,0,116,.4),0 0 55px 5px rgba(255,0,255,.4);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(255,238,170,.4), 0 0 0 0  rgba(226,0,116,.4),0 0 0 0 rgba(255,0,255,.4);
	}
}

@keyframes growFirst {
	0% {
		height: 6rem;
	}
	100% {
		height: 100%;
	}
	
}

@keyframes growSecond {
	0% {
		height: 6rem;
	}
	100% {
		height: 75%;
	}
}

@keyframes growThird {
	0% {
		height: 6rem;
	}
	100% {
		height: 55%;
	}
}

html {	
	background: white;
	color: var(--anthracite);
	
	height: -webkit-fill-available;
	
	@media screen and (max-width: var(--medium)) {
		font-size: 16px;
	}
	
	@media screen and (max-width: var(--small)) {
		font-size: 15px;
	}
}

body {
	font-family: "TeleNeoMedium", "Arial", sans-serif;
	font-feature-settings: "liga";
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	
	font-size: 2.5vw;
	font-size: clamp(1.25rem, 2.5vw, 2rem);
	padding-top: 8rem;
	
	// address ios viewport height bug
	min-height: 100vh;
	min-height: -webkit-fill-available;
	
	@media screen and (orientation: portrait) {
		font-size: 2vw;
		font-size: clamp(1.2rem, 2vw, 2.5rem);
		padding-top: 6rem;
	}
}

a {
	color: var(--anthracite);
	text-decoration: underline;
	text-underline-offset: 2px;
	
	&:hover {
		color: var(--magenta);
	}
	
	&.ext:after {
		padding-left: .25ch;
		content: '↗';
		font-size: 90%;
		display: inline-block;
	}
	
	&.plain {
		text-decoration: none;
	}
}

p {
	margin-bottom: .75em;
	
	&:last-child {
		margin-bottom: 0;
	}
	
	a {
		color: var(--anthracite);
	}
}

h1, h2, h3 {
	font-family: "TeleNeoExtraBold", "Arial", sans-serif;
}

h1 {
	font-size: 5vw;
	font-size: clamp(2.5rem, 5vw, 4rem);
	line-height: 1em;
	text-shadow: 0px 2px 3px rgba(0,0,0,0.2);
	padding-bottom: .25rem;
	
	@media screen and (orientation: portrait) {
		font-size: 3vw;
		font-size: clamp(2.2rem, 3vw, 3.5rem);
	}
}

h2 {
	font-size: 4vw;
	font-size: clamp(2rem, 4vw, 3.5rem);
	padding-bottom: .5rem;
	text-align: center;
	max-width: 50ch;
	
	@media screen and (orientation: portrait) {
		font-size: 4vw;
		font-size: clamp(1.75rem, 4vw, 4rem);
	}
}

h3 {
	font-size: 2vw;
	font-size: clamp(1.5rem, 2vw, 2rem);
	padding: 2rem 0 .5rem;
	text-align: center;
	max-width: 35ch;
	margin: 0 auto;
	
	@media screen and (orientation: portrait) {
		font-size: 4vw;
		font-size: clamp(1.75rem, 4vw, 4rem);
	}
}

ul,
ol {
	padding-left: 3ch;
	
	&.plain {
		list-style: none;
		padding-left: unset;
		
		li {
			list-style-type: none;
		}
	}
}

figure {
	padding: 1rem 4rem 0;
		
	img {
		width: 100%;
		height: auto;
	}
	
	@media screen and (orientation: portrait) {
		padding: 1rem 1rem 0;	
	}
}

.tSmall {
	font-size: 1.5vw;
	font-size: clamp(.75rem, 1.5vw, 1rem);
}

.tBold {
	font-family: "TeleNeoExtraBold", "Arial", sans-serif;
}

.tHighlight {
	color: var(--magenta);
}

.tTile {
	background: var(--grey);
	border: .5px solid darkgrey;
	border-radius: 2rem;
	padding: 2px .75ch;
	white-space: nowrap;
	
	@media screen and (max-width: 410px) {
		display: block;
		text-align: center;
	}
}

.tCenter {
	text-align: center;
}

.flex {
	display: flex;
	
	&.column {
		flex-direction: column;
	}
	
	&.wrap {
		flex-wrap: wrap;
	}
	
	&.gap {
		gap: 1rem;
	}
	
	&.alignCenter {
		align-items: center;
	}
	
	&.alignEnd {
		align-items: flex-end;
	}
	
	&.justifyCenter {
		justify-content: center;
	}
	
	&.justifyEnd {
		justify-content: flex-end;
	}
	
	&.spaceBetween {
		justify-content: space-between;
	}
	
	@media screen and (orientation: portrait) {
		&.mCol {
			flex-direction: column;	
		}
		
		&.mJustifyStart {
			justify-content: flex-start;
		}
		
		&.mAlignStart {
			align-items: flex-start;
		}
		
		&.mGap {
			gap: 1rem;
		}
	}
}

.button {
	display: block;
	background: var(--magenta);

	border: 2px solid #FF83C3;
	border-radius: 3rem;
	
	width: 30ch;
	margin: 2rem auto 0;
	padding: 1.25rem .5rem;
	
	text-align: center;
	color: white;
	user-select: none;
	
	cursor: pointer;
	
	&:hover {
		color: white;
		filter: brightness(.95);
	}
	
	@media screen and (orientation: portrait) {
		width: auto;
	}
	
	&.disabled {
		background: lightgrey;
		color: grey;
		border-color: #bcbcbc;
		cursor: default;
		pointer-events: none;
	}
}

.dtag-logo {
	aspect-ratio: 1/1;
	position: relative;
	
	svg {
		max-width: 60%;
		max-height: 60%;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		position: absolute;
	}
}

.box {
	background: white;
	padding: 3rem 5vw;
	max-width: 75ch;
	margin-bottom: 3rem;
	margin-top: 1rem;
	
	@media screen and (orientation: portrait) {
		padding: 2rem 5vw;
	}
}

.panel {
	@media screen and (orientation: portrait) {
		padding: 2rem;
		
		ol {
			padding-left: 1.5rem;
			li {
				padding-left: 0;
			}
		}
	}
}

.panel {
	background: var(--grey);
	padding: 8rem 15vw;
	margin: 0;
	box-shadow: -1px -1px 10px 0px rgba(0,0,0,0.4);
	
	> div {
		padding: 0 4rem;
	}
	
	@media screen and (orientation: portrait) {
		padding: 4.5rem 5vw;	
		
		> div {
			padding: 0;
		}
	}
}

input[type="checkbox"] {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	
	line-height: 1.1em;
	
	border-radius: .25rem;
	border: 2px solid var(--magenta);
	height: 1.75rem;
	width: 1.75rem;
	
	flex: 0 0 1.75rem;
	
	&:checked {
		background: var(--magenta);
	}
}

input[type="checkbox"] + label {
	max-width: 30ch;
}

header,
figure img,
.box {
	border-radius: 2rem;	
	border: 2px solid #c5c5c5;
	position: relative;
	box-shadow: 2px 5px 17px 0px rgba(0,0,0,0.38);
}

header span,
figure picture {
	border-radius: 2rem;	
}

figure.circular  {
	width: 20vw;
	height: 20vw;
	padding: 1rem 0;
	margin: 0 auto;
	transform-origin: center center;
	animation: pulse 5s ease-in-out infinite;
	position: relative;
	
	&::after {
		display: block;
		content: 'Make some magic!';
		color: white;
		font-family: "TeleNeoExtraBold", "Arial", sans-serif;
		left: 0;
		right: 0;
		translate: 0 -12vw;
		position: absolute;
		text-align: center;
		opacity: 0;
		transition: opacity 1s .5s linear;
		
		@media screen and (orientation: portrait) {
			translate: 0 -35vw;
		}
	}
		
	img {
		transition: box-shadow 2.5s .25s ease-out;
		border-radius: 20vw;
	}
	
	&.glow img {
		//animation: pulseGlow 5s ease-in-out infinite;
	}
	
	@media screen and (pointer: fine) {
		&:hover {
			animation-play-state: paused;
			
			&::after {
				opacity: 1;
			}
		}
	
		&.glow:hover img {
			//box-shadow: 0 0 60px 4px #fea, 0 0 100px 60px #e20074,0 0 140px 10px #f0f;
			box-shadow: 0 0 100px 60px #e20074,0 0 120px 5px #f0f;
		}
	}
	
	@media screen and (pointer: coarse) {
		&.glow.activated {
			animation-play-state: paused;
			
			&::after {
				opacity: 1;
			}
			
			img {
				box-shadow: 0 0 60px 4px #fea, 0 0 100px 60px #e20074,0 0 140px 10px #f0f;
			}
		}
	}
	
	@media screen and (orientation: portrait) {
		width: 60vw;
		height: 60vw;	
		
		img {
			border-radius: 60vw;
		}	
	}
}

nav.brandBar.flex.gap {
	position: fixed;
	z-index: 5;
	box-sizing: border-box;
	top: 0;
	left: 0;
	
	background: white;
	width: 100%;
	gap: 5vw;
	
	margin-bottom: 2rem;
	padding: 0 2rem;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 9px 0px;
	
	font-size: 2vw;
	font-size: clamp(1.25rem, 2vw, 2rem);
	
		
	.dtag-logo {
		width: 10vh;
		height: 10vh;
		background: var(--magenta);
	}
	
	ol.gap {
		column-gap: 2ch;
		row-gap: 0.25em;
	}
	
	@media screen and (orientation: portrait) {
		padding: 0 10px;
		
		ol.gap {
			column-gap: 1.5ch;
		}
	}
}

header {
	background-size: cover;
	height: 70vh;
	overflow: hidden;
	
	color: white;
	margin: 0 5vw;
	text-align: center;

	> div {
		height: 100%;
		width: 100%;
		position: relative;

		background: url(https://res.cloudinary.com/electronic-beats/image/upload/f_auto/v1755722026/the-aincestors/the-aincenstors-valley-header.webp) no-repeat;
		background-position: center center;
		background-size: cover;
		background-origin: border-box;
		
		transition: transform 5s ease-in-out;
		
		@media screen and (orientation: portrait) {
			background: url(https://res.cloudinary.com/electronic-beats/image/upload/ar_9:12,c_fill,f_auto,fl_awebp,g_face,q_80,w_900/v1755722026/the-aincestors/the-aincenstors-valley-header.webp) no-repeat;
			background-size: cover;
		}
	}
	
	@media screen and (pointer: fine) {
		&:hover > div,
		&:focus > div {
			transform: scale(1.2);
		}	
	}
	
	@media screen and (pointer: coarse) {
		&:not(.activated) > div {
			transform: scale(1);
		}
		
		&.activated > div {
			transform: scale(1.2);
		}
	}
	
	> span {
		position: absolute;
		display: block;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 2rem 2rem 4rem;
		
		@media screen and (orientation: portrait) {
			padding: 2rem .5rem 3rem;
		}
	}
}

main {	
	padding: 0 5vw 5rem;
	margin: 0;
	
	&:not(.plain) {
		background: transparent linear-gradient(180deg,#fff,#F8EFDC) 0 0 no-repeat;
	}
	
	section:last-child {
		margin-bottom: 0;
	}
	
	@media screen and (orientation: portrait) {
		padding: 0 5vw 3rem;
	}
}

section {
	padding-top: 8rem;
	
	@media screen and (orientation: portrait) {
		padding-top: 4.5rem;
	}
	
	& + section:not(.panel) {
		margin-top: 5rem;
		
		@media screen and (orientation: portrait) {
			margin-top: 3rem;
		}
	}
		
	& + .box {
		margin-top: 4rem;
	}
	
	&.padded {
		h2,
		p,
		ul,
		form {
			max-width: 55ch;
			padding-left: 2.5rem;
			padding-right: 2.5rem;
			margin-left: auto;
			margin-right: auto;
			
			@media screen and (orientation: portrait) {
				padding-left: inherit;
				padding-right: inherit;	
			}
		}
		
		h2 {
			max-width: 35ch;
		}
	}
	
	figure {
		@media screen and (orientation: portrait) {
			aspect-ratio: 9/12;	
		}
	}
	
	> ol,
	> div ol,
	> ul {
		padding-left: 2.5rem;
		
		&.plain {
			padding-left: calc(2.5rem + 1ch);
		}
		
		li {
			padding-bottom: 1rem;
			padding-left: .5ch;
		}
		
		@media screen and (orientation: portrait) {
			padding: 0;
		}
	}
	
	&.legal ul,
	&.legal ol {
		padding: 0 10ch 0 15ch;
	}
	
	ol.rewards {
		gap: 2px;
		margin: 0 10vw;
		padding-top: 2rem;
		height: 30vw;
		list-style: none;
		
		@media screen and (orientation: portrait) {
			margin: 0;
			gap: 1px;
			height: 60vw;
			font-size: .8rem;
		}
		
		li {
			flex: 1 0 33%;
			color: white;
			text-align: center;
			padding: 2rem 0 0 0;
			box-sizing: border-box;
			height: 6rem;
			list-style-type: none;
			
			border-radius: 2rem 2rem 0 0;
			background: var(--magenta);
			border: 2px solid #FF83C3;
			
			span:last-child {
				transition: opacity 2s linear;
				opacity: 0;
			}
			
			@media screen and (orientation: portrait) {
				padding-top: 1rem;
				border-radius: 1rem 1rem 0 0;
			}
		}
		
		&:not(.initial) {
			li span:last-child {
				opacity: 1;
			}
			
			li:first-child 	{ 
				animation: growSecond 2s .5s ease-in-out forwards; 
			}
			
			li:nth-child(2) {
				animation: growFirst 2s .5s ease-in-out forwards; 
			}
			
			li:nth-child(3) {
				animation: growThird 2s .5s ease-in-out forwards; 
			}
		}
		
		.circled {
			display: inline-block;
			border: 2px solid white;
			padding: 4px 3px 3px;
			border-radius: 2rem;
			width: 2ch;
			height: 2ch;
			margin-bottom: 1.5rem;
			
			@media screen and (orientation: portrait) {
				margin-bottom: .75rem;
			}
		}
	}
	
	form {
		margin-top: 2rem;
		
		> div {
			padding: 0 0 1rem 2ch;
			margin: 0 auto;
		}
	
		@media screen and (orientation: portrait) { 
			margin-top: 1rem;
		}
	}
}

body > section {
	margin-left: 4rem;
	margin-right: 4rem;
	
	@media screen and (orientation: portrait) {
		margin-left: 5vw;
		margin-right: 5vw;
	}
}

footer {
	color: white;
	background: #252525;
	padding: 1rem 2rem;
	
	nav,
	> div:first-child {
		flex: 1 1 40%;
	}

	> div > .dtag-logo {
		background: transparent;
		width: 2rem;
		height: 2rem;
		
		svg {
			max-width: none;
			max-height: none;
		}
	}
	
	a {
		color: white;
	}
	
	@media screen and (orientation: portrait) {
		padding: 2rem 1rem;
	}
	
	&.padded {
		padding: 6.5rem;
	}
}