/*************/
/* CSS RESET */
/*************/

*,
*::after,
*::before {
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

*,
html {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  zoom: reset;
  touch-action: manipulation;
}

* {
  cursor: none;
}

body {
  margin: 0;
  overflow: hidden;
  cursor: none;
}


/*********************/
/* CUSTOM PROPERTIES */
/*********************/

:root {
  /* FONTS */
  --main-font-family: 'Open Sans', sans-serif;

  /* COLORS */
  --fifa-light-blue: #1277d9;
  --fifa-light-blue-transparent: #1276d900;

  --fifa-blue: #505b73;
  --fifa-blue-transparent: #505b7300;

  --fifa-dark-blue: #00182f;
  --fifa-dark-blue-transparent: #00182f7e;

  --fifa-broken-white: #e4e8f0;
  --fifa-broken-white-transparent: #e4e8f000;

  --total-white: #ffffff;

  /* EFFECTS */
  --main-backdrop: blur(10px);
  --ball-shadows: rgba(255, 3, 3, .17) 0 -23px 25px 0 inset,
  rgba(0, 0, 0, .15) 0 -36px 30px 0 inset,
  rgba(0, 0, 0, .1) 0 -79px 40px 0 inset, rgba(0, 0, 0, .06) 0 2px 1px,
  rgba(0, 0, 0, .09) 0 4px 2px, rgba(0, 0, 0, .09) 0 8px 4px,
  rgba(0, 0, 0, .09) 0 16px 8px, rgba(0, 0, 0, .09) 0 32px 16px;
  --cursor-backdrop: drop-shadow(2px 2px 2px #222);


  /* LOTTERY FADE IN */
  --delay-animation-factor: 1.4;
  --delay-total-animation: 1.8s;
}


/*******************/
/* GENERAL STYLING */
/*******************/

header {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

main {
  width: 100%;
  height: 100vh;
  background-image: url("../images/main-background.jpg");
  background-position: center;
  background-size: cover;
}

h1 {
  width: 100%;
  background-color: var(--fifa-dark-blue);
  text-align: center;
  border-radius: .4em .4em 0 0;
  font-family: var(--main-font-family);
  color: var(--total-white);
  font-weight: 700;
  padding: .16em 0;
  font-size: 1.4em;

  animation-duration: 2s;
  animation-delay: 1.2s;
  animation-name: heading-delay;
  animation-timing-function: cubic-bezier(.5, .05, 1, .5);
  animation-fill-mode: backwards;
  animation-timing-function: ease;
}

@keyframes heading-delay {
  0% {
    color: rgba(255, 255, 255, 0);
  }
  100% {
    color: var(--total-white);
  }
}

h2 {
  font-family: var(--main-font-family);
  color: var(--total-white);
  font-weight: 700;
  font-size: 3.2em;
  text-align: center;
}

h3 {
  position: absolute;
  transform: translate(-50%, -50%);
  margin-top: -.1em;
  background-color: var(--fifa-broken-white);
  text-align: center;
  font-family: var(--main-font-family);
  color: var(--fifa-blue);
  font-weight: 400;
  padding: .16em 0;
  font-size: 1em;
  width: 4em;
  border-left: .4em solid var(--fifa-light-blue);

  animation-duration: 1.6s;
  animation-delay: 5s;
  animation-name: year;
  animation-timing-function: cubic-bezier(.5, .05, 1, .5);
  animation-fill-mode: backwards;
  animation-timing-function: ease;
}

@keyframes year {
  0% {
    width: 0;
    border-left: .4em solid var(--fifa-light-blue-transparent);
    background-color: var(--fifa-broken-white-transparent);
    color: var(--fifa-blue-transparent);
  }
  1% {
    background-color: var(--fifa-broken-white);
    border-left: .4em solid ;
  }
  96% {
    color: var(--fifa-blue);
  }
  100% {
    width: 4em;
  }
}

p {
  font-family: var(--main-font-family);
  color: var(--total-white);
  opacity: .6;
  font-weight: 400;
  padding: .16em 0;
  font-size: 1em;
  text-align: center;
}

a {
  position: absolute;
  font-family: var(--main-font-family);
  color: var(--fifa-light-blue);
  font-weight: 400;
  font-size: .8em;
  text-decoration: none;
  bottom: -1.6em;
  right: .4em;

  animation-duration: 2s;
  animation-delay: 6.2s;
  animation-name: anchor-delay;
  animation-timing-function: cubic-bezier(.5, .05, 1, .5);
  animation-fill-mode: backwards;
  animation-timing-function: ease;
}

@keyframes anchor-delay {
  0% {
    color: var(--fifa-light-blue-transparent);
  }
  100% {
    color: var(--fifa-light-blue);
  }
}

.divider {
  background-color: var(--total-white);
  width: 100%;
  height: .25em;
  border-radius: .075em;
  margin: 1em 0;
}


/*******************/
/* GOALKEEPER CURSOR */
/*******************/

.goalkeeper-cursor {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  z-index: 100;
  pointer-events: none;
  -webkit-filter: var(--cursor-backdrop);
  filter: var(--cursor-backdrop);
}

.goalkeeper-cursor img {
  transform: scale(.5);
}

.cursor {
  opacity: 0;
}


/*******************/
/* LINE-UP STYLING */
/*******************/

main > section:first-of-type {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  height: 78vw;
  max-width: 96%;
  aspect-ratio: 5.6 / 4;
  max-height: 90%;
  background-color: var(--fifa-dark-blue-transparent);
  backdrop-filter: var(--main-backdrop);
  border-radius: .8em;

  animation-duration: 1.5s;
  animation-delay: .5s;
  animation-name: lineup;
  animation-timing-function: cubic-bezier(.5, .05, 1, .5);
  animation-fill-mode: backwards;
  animation-timing-function: ease;
}

@keyframes lineup {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(0) scaleY(.8);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scaleY(1) scaleY(1);
  }
}

li {
  position: absolute;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

.info {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 3em;
  pointer-events: none;
  z-index: 25;
  opacity: 0;
  transition-duration: 2s;
  transition-delay: .6s;
  background-position: center;
  background-size: cover;
}

.information-visible {
  opacity: 1;
  pointer-events: all;
}


/******************/
/* BALL POSITIONS */
/******************/

ol li div button {
  position: absolute;
  aspect-ratio: 1 / 1;
  height: 18%;
  border-radius: 100%;
  background-color: transparent;
  border: none;
  list-style: none;
  animation-delay: .6s;
  transform: translate(-50%, -50%);
  transition: 3s, outline .125s, background-color .125s;


  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  box-shadow: var(--ball-shadows);
  /* From: https://getcssscan.com/css-box-shadow-examples */

  animation-duration: .75s;
  animation-delay: .5s;
  animation-name: lottery-fade-in;
  animation-timing-function: cubic-bezier(.5, .05, 1, .5);
  animation-fill-mode: backwards;
  animation-timing-function: ease;
  outline: solid 0 var(--total-white);
}

@keyframes lottery-fade-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(4);
    pointer-events: all;
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: all;
  }
}

ol li div button:hover, ol li div button:focus {
  outline: solid .28em var(--total-white);
  background-color:  var(--total-white);
}

ol li:nth-of-type(1) button {
  top: 12.5%;
  left: 8.33%;
  z-index: 23;
  background-image: url("../images/ball-1930.png");
  animation-delay: calc(var(--delay-animation-factor) * .6s + var(--delay-total-animation));
}
ol li:nth-of-type(2) button {
  top: 12.5%;
  left: 25%;
  z-index: 22;
  background-image: url("../images/ball-1934.png");
  animation-delay: calc(var(--delay-animation-factor) * .7s + var(--delay-total-animation));
}

ol li:nth-of-type(3) button {
  top: 12.5%;
  left: 41.67%;
  z-index: 21;
  background-image: url("../images/ball-1938.png");
  animation-delay: calc(var(--delay-animation-factor) * .8s + var(--delay-total-animation));
}
ol li:nth-of-type(4) button {
  top: 12.5%;
  left: 58.33%;
  z-index: 20;
  background-image: url("../images/ball-1950.png");
  animation-delay: calc(var(--delay-animation-factor) * .9s + var(--delay-total-animation));
}
ol li:nth-of-type(5) button {
  top: 12.5%;
  left: 75%;
  z-index: 19;
  background-image: url("../images/ball-1954.png");
  animation-delay: calc(var(--delay-animation-factor) * 1s + var(--delay-total-animation));
}
ol li:nth-of-type(6) button {
  top: 12.5%;
  left: 91.67%;
  z-index: 18;
  background-image: url("../images/ball-1958.png");
  animation-delay: calc(var(--delay-animation-factor) * 1.1s + var(--delay-total-animation));
}

ol li:nth-of-type(7) button {
  top: 37.5%;
  left: 16.67%;
  z-index: 17;
  background-image: url("../images/ball-1962.png");
  animation-delay: calc(var(--delay-animation-factor) * .9s + var(--delay-total-animation));
}
ol li:nth-of-type(8) button {
  top: 37.5%;
  left: 33.33%;
  z-index: 16;
  background-image: url("../images/ball-1966.png");
  animation-delay: calc(var(--delay-animation-factor) * 1s + var(--delay-total-animation));
}
ol li:nth-of-type(9) button {
  top: 37.5%;
  left: 50%;
  z-index: 15;
  background-image: url("../images/ball-1970.png");
  animation-delay: calc(var(--delay-animation-factor) * 1.1s + var(--delay-total-animation));
}
ol li:nth-of-type(10) button {
  top: 37.5%;
  left: 66.67%;
  z-index: 14;
  background-image: url("../images/ball-1974.png");
  animation-delay: calc(var(--delay-animation-factor) * 1.2s + var(--delay-total-animation));
}
ol li:nth-of-type(11) button {
  top: 37.5%;
  left: 83.33%;
  z-index: 13;
  background-image: url("../images/ball-1978.png");
  animation-delay: calc(var(--delay-animation-factor) * 1.3s + var(--delay-total-animation));
}

ol li:nth-of-type(12) button {
  top: 62.5%;
  left: 8.33%;
  z-index: 12;
  background-image: url("../images/ball-1982.png");
  animation-delay: calc(var(--delay-animation-factor) * 1.1s + var(--delay-total-animation));
}
ol li:nth-of-type(13) button {
  top: 62.5%;
  left: 25%;
  z-index: 11;
  background-image: url("../images/ball-1986.png");
  animation-delay: calc(var(--delay-animation-factor) * 1.2s + var(--delay-total-animation));
}
ol li:nth-of-type(14) button {
  top: 62.5%;
  left: 41.67%;
  z-index: 10;
  background-image: url("../images/ball-1990.png");
  animation-delay: calc(var(--delay-animation-factor) * 1.3s + var(--delay-total-animation));
}
ol li:nth-of-type(15) button {
  top: 62.5%;
  left: 58.33%;
  z-index: 9;
  background-image: url("../images/ball-1994.png");
  animation-delay: calc(var(--delay-animation-factor) * 1.4s + var(--delay-total-animation));
}
ol li:nth-of-type(16) button {
  top: 62.5%;
  left: 75%;
  z-index: 8;
  background-image: url("../images/ball-1998.png");
  animation-delay: calc(var(--delay-animation-factor) * 1.5s + var(--delay-total-animation));
}
ol li:nth-of-type(17) button {
  top: 62.5%;
  left: 91.67%;
  z-index: 7;
  background-image: url("../images/ball-2002.png");
  animation-delay: calc(var(--delay-animation-factor) * 1.6s + var(--delay-total-animation));
}

ol li:nth-of-type(18) button {
  top: 87.5%;
  left: 16.67%;
  z-index: 6;
  background-image: url("../images/ball-2006.png");
  animation-delay: calc(var(--delay-animation-factor) * 1.4s + var(--delay-total-animation));
}
ol li:nth-of-type(19) button {
  top: 87.5%;
  left: 33.33%;
  z-index: 5;
  background-image: url("../images/ball-2010.png");
  animation-delay: calc(var(--delay-animation-factor) * 1.5s + var(--delay-total-animation));
}
ol li:nth-of-type(20) button {
  top: 87.5%;
  left: 50%;
  z-index: 4;
  background-image: url("../images/ball-2014.png");
  animation-delay: calc(var(--delay-animation-factor) * 1.6s + var(--delay-total-animation));
}
ol li:nth-of-type(21) button {
  top: 87.5%;
  left: 66.67%;
  z-index: 3;
  background-image: url("../images/ball-2018.png");
  animation-delay: calc(var(--delay-animation-factor) * 1.7s + var(--delay-total-animation));
}
ol li:nth-of-type(22) button {
  top: 87.5%;
  left: 83.33%;
  z-index: 2;
  background-image: url("../images/ball-2022.png");
  animation-delay: calc(var(--delay-animation-factor) * 1.8s + var(--delay-total-animation));
}

.balls-zoom-in {
  top: 50% !important;
  left: 25% !important;
  transform: translate(-50%, -50%) scale(4.2);
  z-index: 99 !important;
}

li:nth-of-type(4) a {
  position: absolute;
  z-index: 99; 
  opacity: 1;
  right: 0%;
}

li:nth-of-type(4) a img {
  height: 3em;
  transition-duration: 2.8s;
  transition-delay: .3s;
}

.brick-visible {
  height: 3em;
  opacity: 0;
  /* pointer-events: all; */
}


/******************/
/* YEAR POSITIONS */
/******************/

.year {
  position: absolute;
  margin: 0;
  padding: 0;
  height: 64vw;
  aspect-ratio: 6 / 4;
  max-height: 80%;
  z-index: 24;
  pointer-events: none;
}

ol li div {
  position: relative;
  margin: 0;
  padding: 0;
  height: 64vw;
  aspect-ratio: 6 / 4;
  max-height: 80%;
}

ol li:nth-of-type(1) section:first-of-type h3 {
  top: 24.5%;
  left: 8.33%;
}
ol li:nth-of-type(2) section:first-of-type h3 {
  top: 24.5%;
  left: 25%;
}
ol li:nth-of-type(3) section:first-of-type h3 {
  top: 24.5%;
  left: 41.67%;
}
ol li:nth-of-type(4) section:first-of-type h3 {
  top: 24.5%;
  left: 58.33%;
}
ol li:nth-of-type(5) section:first-of-type h3 {
  top: 24.5%;
  left: 75%;
}
ol li:nth-of-type(6) section:first-of-type h3 {
  top: 24.5%;
  left: 91.67%;
}
ol li:nth-of-type(7) section:first-of-type h3 {
  top: 49.5%;
  left: 16.67%;
}
ol li:nth-of-type(8) section:first-of-type h3 {
  top: 49.5%;
  left: 33.33%;
}
ol li:nth-of-type(9) section:first-of-type h3 {
  top: 49.5%;
  left: 50%;
}
ol li:nth-of-type(10) section:first-of-type h3 {
  top: 49.5%;
  left: 66.67%;
}
ol li:nth-of-type(11) section:first-of-type h3 {
  top: 49.5%;
  left: 83.33%;
}
ol li:nth-of-type(12) section:first-of-type h3 {
  top: 74.5%;
  left: 8.33%;
}
ol li:nth-of-type(13) section:first-of-type h3 {
  top: 74.5%;
  left: 25%;
}
ol li:nth-of-type(14) section:first-of-type h3 {
  top: 74.5%;
  left: 41.67%;
}
ol li:nth-of-type(15) section:first-of-type h3 {
  top: 74.5%;
  left: 58.33%;
}
ol li:nth-of-type(16) section:first-of-type h3 {
  top: 74.5%;
  left: 75%;
}
ol li:nth-of-type(17) section:first-of-type h3 {
  top: 74.5%;
  left: 91.67%;
}
ol li:nth-of-type(18) section:first-of-type h3 {
  top: 99.5%;
  left: 16.67%;
}
ol li:nth-of-type(19) section:first-of-type h3 {
  top: 99.5%;
  left: 33.33%;
}
ol li:nth-of-type(20) section:first-of-type h3 {
  top: 99.5%;
  left: 50%;
}
ol li:nth-of-type(21) section:first-of-type h3 {
  top: 99.5%;
  left: 66.67%;
}
ol li:nth-of-type(22) section:first-of-type h3 {
  top: 99.5%;
  left: 83.33%;
}

.resource {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  height: 78vw;
  max-width: 96%;
  aspect-ratio: 5.6 / 4;
  max-height: 90%;
}


/****************************/
/* EXTRA INFORMATION POP-UP */
/****************************/

#background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: -28;
}

.info section {
  position: absolute;
  top: 48%;
  right: 10%;
  transform: translate(0%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 26em;
}


/*****************/
/* MEDIA QUERIES */
/*****************/

@media (max-width: 1140px) {
  .info section {
    position: absolute;
    top: 64%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22em;
  }

  .balls-zoom-in {
    top: 15% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(3.2) !important;
  }
}