* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

@font-face {
	font-family: 'continuum';
	src: url('assets/fonts/contm.ttf') format('truetype');
}

body {
	background: #fff;
	font-family: 'continuum', sans-serif;
}

.bg-video {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translateY(20%);
	z-index: -1;
}

.video-fade {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;

	background: radial-gradient(
		ellipse 200% 150% at 50% 0%,
		white 25%,
		transparent 50%
	);
}

.strip {
	position: absolute;
	top: 67%;
	left: 0;
	bottom: 0;
	width: 100%;
	background-image: url(assets/img/strip.png);
	background-size: auto 25vh;
	background-repeat: repeat-x;
	background-position: left top;
	z-index: 1;
}

.strip-orange {
	position: absolute;
	top: 70%;
	left: 0;
	width: 100%;
	height: 3.3vh;
	background: #f9e6c8;
	z-index: 2;
}

.strip-blue {
	position: absolute;
	top: calc(70% + 3.3vh);
	left: 0;
	width: 100%;
	height: 3.3vh;
	background: #afe0ff;
	z-index: 2;
}

.press-wrap {
	position: absolute;
	top: 73%;
	left: 49%;
	transform: translate(-50%, -50%);
	width: 63vh;
	z-index: 6;
}

.press-text {
	display: block;
	width: 100%;
	height: auto;
}

.a {
	position: absolute;
	top: 50%;
	left: 34%;
	transform: translate(-50%, -50%);
	width: 9%;
	height: auto;
}

.b {
	position: absolute;
	top: 50%;
	left: 57%;
	transform: translate(-50%, -50%);
	width: 9%;
	height: auto;
}

.copyright {
	position: absolute;
	top: 80%;
	left: 49%;
	transform: translate(-50%, -50%);
	width: 40vh;
	height: auto;
	z-index: 6;
}

.wiimote-wrap {
	position: absolute;
	top: 73%;
	left: 72%;
	transform: translateY(-50%);
	width: 27vh;
	z-index: 7;
}

.circle-blue {
  position: absolute;
  top: 70%;
  left: 72.5%;
  width: calc(24vh + 2 * 6.6vh);
  height: calc(12vh + 6.6vh);
  /* la formula, cuanto de gordo es = t 
  width: calc(24vh + (2 * t));
  height: calc(12vh + t);
  lo podia haber hecho mucho mas sencillo pero nose*/
  border-radius: 0 0 calc(24vh + 3.3vh *2) calc(24vh + 3.3vh* 2);
  background: #afe0ff;
  transform: translate(-6.6vh, 0);
  clip-path: inset(3.3vh 0 0 0);
  z-index: 3;
}

.circle-orange {
	position: absolute;
	top: 70%;
	left: 72.5%;
	width: calc(24vh + 2 * 3.3vh);
  height: calc(12vh + 2 * 1.65vh);
	border-radius: 0 0 calc(24vh + 3.3vh) calc(24vh + 3.3vh);
	background: #f9e6c8;
	transform: translate(-3.3vh, 0%);
	z-index: 4;
}

.circle {
	position: absolute;
	top: 70%;
	left: 72.5%;
	width: 24vh;
	height: 12vh;
	border-radius: 0 0 22vh 22vh;
	background: #fff;
	z-index: 5;
}

.wiimote {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
}

.a2 {
	position: absolute;
	top: -6%;
	left: 39%;
	transform: translate(-50%, -50%);
	transform-origin: 50% 100%;
	width: 30%;
	height: auto;
}
.b2 {
	position: absolute;
	top: 56%;
	left: 12%;
	transform: translate(-50%, -50%);
	transform-origin: 100% 0%;
	width: 30%;
	height: auto;
}

.animated {
  position: absolute;
  inset: 0;
  z-index: 7;
  animation: idle 2s ease-in-out infinite;
}

@keyframes idle {
  0%, 100% {
    transform: translateY(0.5vh);
  }

  50% {
    transform: translateY(-0.5vh);
  }
}

.idk {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: start 0.5s ease both;
  animation-delay: 1.2s;
  z-index:10;
}

@keyframes start {
  0% {
    transform: translateY(45vh);
  }
  70% {
    transform: translateY(-2vh);
  }
  88% {
    transform: translateY(0.3vh);
  }
  100% {
    transform: translateY(0);
  }
}

.a2, .b2 {
  transition: transform 0.1s ease, filter 0.1s ease;
}
.a2.active, .b2.active {
  filter: invert(1);
  transform: translate(-50%, -50%) scale(1.5);
}

.strip-orange, .circle-orange {
  transition: background 0.15s ease;
}
.strip-blue, .circle-blue {
  transition: background 0.15s ease;
}

.strip-orange.active, .circle-orange.active {
  background: #ffa733;
}
.strip-blue.active, .circle-blue.active {
  background: #4fc3f7;
}
.title {
	position: absolute;
	top: 25%;
	left: 52%;
	transform: translate(-50%, -50%) scale(1.65);
	display: flex;
	align-items: baseline;
	z-index: 8;
}

.letter {
	position: relative;
}

.letter img {
	display: block;
	visibility: hidden;
}

.fill {
	position: absolute;
	inset: 0;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
}

.wii {
	background-color: #9c9c9c;
}

.party {
	background-color: #E72D6E;
}

.W .fill {
	mask-image: url(assets/img/title/w.png);
}

.I .fill {
	mask-image: url(assets/img/title/i.png);
}

.I2 .fill {
	mask-image: url(assets/img/title/i.png);
}

.P .fill {
	mask-image: url(assets/img/title/p.png);
}

.A .fill {
	mask-image: url(assets/img/title/a.png);
}

.R .fill {
	mask-image: url(assets/img/title/r.png);
}

.T .fill {
	mask-image: url(assets/img/title/t.png);
}

.Y .fill {
	mask-image: url(assets/img/title/y.png);
}

.W {
	top: -0.05vh;
	left: 0;
}

.I {
	top: -0.5vh;
	left: 0vh;
}

.I2 {
	top: -0.5vh;
	left: 0vh;
}

.P {
	top: 0vh;
	left: 1vh;
}

.A {
	top: 0.2vh;
	left: -1vh;
}

.R {
	top: -0.4vh;
	left: -3vh;
}

.T {
	top: -0.7vh;
	left: -5.3vh;
}

.Y {
	top: 3.7vh;
	left: -7.9vh;
}

.letter {
	position: relative;
	transform-origin: 50% 100%;
	opacity: 0;
	animation-name: letter-in;
	animation-duration: 0.2s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: both;
}

@keyframes letter-in {
	0% {
		opacity: 0;
		transform: translateY(-4vh) scale(0.4);
	}

	15% {
		opacity: 1;
		transform: translateY(-6vh) scale(1);
	}

	60% {
		opacity: 1;
		transform: translateY(0) scaleX(1) scaleY(1);
	}

	80% {
		opacity: 1;
		transform: translateY(0) scaleX(1.1) scaleY(0.9);
	}

	100% {
		opacity: 1;
		transform: translateY(0) scaleX(1) scaleY(1);
	}
}

.W {
	animation-delay: 0.3s;
}

.I {
	animation-delay: 0.4s;
}

.I2 {
	animation-delay: 0.5s;
}

.P {
	animation-delay: 0.6s;
}

.A {
	animation-delay: 0.7s;
}

.R {
	animation-delay: 0.8s;
}

.T {
	animation-delay: 0.9s;
}

.Y {
	animation-delay: 1s;
}

.burst {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 4vh;
	height: 4vh;
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(0);
	z-index: 9;
	animation-name: ring-burst;
	animation-duration: 1.875s;
	animation-fill-mode: both;
	animation-delay: 1s;
	background: radial-gradient(
		circle closest-side,
		transparent 0%,
		transparent 45%,
		rgba(156, 156, 156, 0.5) 45%,
		rgba(156, 156, 156, 0.5) 55%,
		rgba(231, 45, 110, 0.25) 55%,
		rgba(231, 45, 110, 0.25) 70%,
		rgba(156, 156, 156, 0.5) 70%,
		rgba(156, 156, 156, 0.5) 80%,
		rgba(231, 45, 110, 0.5) 80%,
		rgba(231, 45, 110, 0.5) 100%
	);
}

@keyframes ring-burst {
	0% {
		transform: translate(-50%, -50%) scale(0);
	}

	100% {
		transform: translate(-50%, -50%) scale(150);
	}
}

.intro-overlay {
	position: fixed;
	inset: 0;
	z-index: 7;
	pointer-events: none;
	animation-name: overlay-fade;
	animation-duration: 2s;
	animation-timing-function: ease;
	animation-fill-mode: both;
}

@keyframes overlay-fade {
	0% {	background-color: rgba(255, 255, 255, 1);
	}

	70% {
		background-color: rgba(255, 255, 255, 1);
	}

	100% {
		background-color: rgba(255, 255, 255, 0);
	}
}

.reflection {
	position: absolute;
	top: calc(25% + 45vh);
	left: 52%;
	transform: translate(-50%, 0%) scale(1.65) scaleY(-1);
	transform-origin: 50% 0%;
	z-index: 7;
	opacity: 0.35;
	animation-name: reflection-out;
	animation-duration: 0.3s;
	animation-timing-function: ease;
	animation-fill-mode: both;
	animation-delay: 1s;
}

@keyframes reflection-out {
	0% {
		clip-path: inset(0 0 0 0);
	}

	100% {
		clip-path: inset(0 100% 0 0);
	}
}
.reflection .title {
	position: relative;
	top: 0;
	left: 0;
	transform: none;
	-webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 90%);
	mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 90%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}