/**************/
/*   FONTS    */
/**************/

@font-face {
	font-family: 'PP-Editorial-Old';
	src: url('../fonts/ppeditorialold-regular-webfont.woff') format('woff');
	font-style: normal;
}

@font-face {
	font-family: 'PP-Editorial-Old';
	src: url('../fonts/ppeditorialold-italic-webfont.woff') format('woff');
	font-style: italic;
}

@font-face {
	font-family: 'PP-Pangram-Sans';
	src: url('../fonts/pppangramsans-light-webfont.woff') format('woff');
	font-style: normal;
  font-weight: 300;
}

@font-face {
	font-family: 'PP-Pangram-Sans';
	src: url('../fonts/pppangramsans-medium-webfont.woff') format('woff');
	font-style: normal;
  font-weight: 500;
}




/**************/
/* CSS REMEDY */
/**************/

/* naar een idee van Jen Simmons */
*, *::after, *::before {
  box-sizing:border-box;  
}

body {
  margin:0;
}

button:not([disabled]) {
  cursor:pointer;
}

img {
  max-width:100%;
}




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

:root {
  --color-background: #000000;
  --color-headings: #FBFBFB;
  --color-text: #FBFBFB;
  --color-dark-text: #929292;
  --color-timeline: rgb(255, 255, 255, 0.1);
  --color-info-background: #710000;
}



/********************/
/* ALGEMENE STYLING */
/********************/

h1 {
  color:var(--color-headings);
  font-family: PP-Editorial-Old, serif;
  font-size: clamp(2rem, 5.5vw, 7rem);
  font-weight: normal;
  line-height: 1.25;
  margin: 0.15em 0 0 0;
  text-align: center;
  transform: scale(0.94);
  animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
}

@keyframes scale {
  100% {
    transform: scale(1);
  }
}



h1 span {
  font-style: italic;
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
}

h1 span:nth-of-type(1) {
  animation: fade-in 1.2s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

h1 span:nth-of-type(2) {
  animation: fade-in 1.2s 1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

@keyframes fade-in {
  100% {
    opacity: 1;
    filter: blur(0);
  }
}



h2 {
  color:var(--color-headings);
  font-family: PP-Editorial-Old, serif;
  font-size: clamp(1.5rem, 4vw, 5rem);
  font-weight: normal;
  margin: 0 0 0.5em 0;
}

h2 span {
  font-style: italic;
}


h3, dt {
  font-family: PP-Editorial-Old, serif;
  color: var(--color-headings);
  font-size: clamp(1rem, 2vw, 2.6rem);
  font-weight: normal;
  font-style: italic;
  margin: 0;
}


p, dd {
  color: var(--color-text);
  font-family: PP-Pangram-Sans, Arial, sans-serif;
  font-size: clamp(1rem, 1vw, 1.8rem);
  font-weight: 300;
  line-height: 1.6;
  margin: 0;
}



.button-primary {
  font-family: PP-Pangram-Sans, Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(1rem, 1vw, 2rem);
  color: var(--color-text);
  padding: 1.25em 1.5em;
  border-radius: 50px;
  border: 2px solid var(--color-timeline);
  transition: 0.5s;
  background: none;
}

.button-primary:hover {
  background: var(--color-timeline);
  color: var(--color-text);
}


#cursor {
  width: 2.5em;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 999999;
  pointer-events: none;
  transition: opacity 500ms ease;
}


body {
  background: var(--color-background);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}







/*********************/
/*     HOME PAGE     */
/*********************/

.home-page {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  height: 100%;
}




/* ------ TEXT SECTION ------ */

.home-page section:nth-of-type(1) {
  text-align: center;
  margin: auto;
  margin-top: 2em;
}

@media (min-height: 850px) {
  .home-page section:nth-of-type(1) {
    margin-top: 15vh;
  }
}

/*logo*/
.home-page section:nth-of-type(1) img {
  width: 5vw;
  max-width: 8em;
  cursor: pointer;
  transform: scale(0.94);
  animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
}




/* ------ TARGETS SECTION ------ */

.home-page section:nth-of-type(2) {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: 1fr 0.4fr;
  margin: 0 10%;
  max-width: 125em;
}

/*shooting targets*/
.home-page section:nth-of-type(2) button {
  justify-self: center;
  transform: perspective(10em) rotateX(80deg);
  transition-duration:1s;
  transition-timing-function: ease-in;
  transform-origin: bottom center;
  background: none;
  padding: 0;
  border: none;
}

.home-page section:nth-of-type(2) button.up {
  transform: perspective(10em) rotateX(0deg);
}

.home-page section:nth-of-type(2) img:hover{
  cursor: pointer;
}




/*years*/
.home-page section:nth-of-type(2) p {
  font-weight: 500;
  padding: 0;
  margin-top: 1rem;
  background: var(--color-background);
  color: var(--color-dark-text);
  display:grid;
  place-items:center;
  text-align:center;
  z-index: 1;
}



/* individual shooting targets */
.home-page section:nth-of-type(2) button:nth-of-type(1) {
  grid-column-start: 1;
}

.home-page section:nth-of-type(2) button:nth-of-type(2) {
  grid-column-start: 3;
}

.home-page section:nth-of-type(2) button:nth-of-type(3) {
  grid-column-start: 5;
}

.home-page section:nth-of-type(2) button:nth-of-type(4) {
  grid-column-start: 7;
}

.home-page section:nth-of-type(2) button:nth-of-type(5) {
  grid-column-start: 9;
}

.home-page section:nth-of-type(2) button:nth-of-type(6) {
  grid-column-start: 11;
}


/* individual years */
.home-page section:nth-of-type(2) p:nth-of-type(1) {
  grid-row-start: 2;
  grid-column-start: 1;
}

.home-page section:nth-of-type(2) p:nth-of-type(2) {
  grid-row-start: 2;
  grid-column-start: 3;
}

.home-page section:nth-of-type(2) p:nth-of-type(3) {
  grid-row-start: 2;
  grid-column-start: 5;
}

.home-page section:nth-of-type(2) p:nth-of-type(4) {
  grid-row-start: 2;
  grid-column-start: 7;
}

.home-page section:nth-of-type(2) p:nth-of-type(5) {
  grid-row-start: 2;
  grid-column-start: 9;
}

.home-page section:nth-of-type(2) p:nth-of-type(6) {
  grid-row-start: 2;
  grid-column-start: 11;
}


/* timeline */
.home-page section:nth-of-type(2) div {
  height: 2px;
  width: 100%;
  background: var(--color-timeline);
  margin-top: 1rem;
  grid-row-start: 2;
  grid-column-start: 1;
  grid-column-end: 12;
  align-self: center;
}



/* targets falling down when shot */
.shot-target {
  animation-name: target-falling-down;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
  transform-origin: bottom center;
}

@keyframes target-falling-down{
  0% {
    transform: rotateX(0deg);
  }

  100% {
    transform: perspective(10em) rotateX(80deg);
  }
}




/*********************/
/*     INFO PAGE     */
/*********************/

.info-page {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6em;
  padding: 2em;
  z-index: 999;
  background: var(--color-info-background);
  transform: translateY(-150%);
  transition-duration: 5s;
}

.active-info {
  transform: translateY(0);
}


.blood {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  transform: translateY(-100%);
  transition-duration: 5s;
  z-index: 2;
}

.active-blood {
  transform: translateY(0);
}



/* ------ IMAGE ------ */

/* img container */
.info-page > div:nth-of-type(1) {
  border-radius: 5px;
  transition: 3s ease-in-out;
  overflow: hidden;
  height: auto;
  height: 100%;
  max-width: 30em;
  max-height: 40em;
}

/* img */
.info-page > div:nth-of-type(1) img {
  transition: 1s ease;
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: grayscale(100%);
}

.info-page > div:nth-of-type(1) img:hover {
  transform: scale(1.1);
  filter: grayscale(0%);
}

.pierce-brosnan img:hover {
  cursor: pointer;
}


/* ------ TEXT SECTION ------ */

/* text */
.info-page > div:nth-of-type(2) {
  width: 60%;
  max-width: 60em;
}

.info-page > div:nth-of-type(2) dl {
  display:grid;
  grid-template-columns: max-content 1fr;
}

.info-page > div:nth-of-type(2) dt,
.info-page > div:nth-of-type(2) dd {
  margin:0;
  border-top:solid 2px var(--color-timeline);
}

/* description term: title */
.info-page > div:nth-of-type(2) dt {
  padding: 2rem 3em 2rem 0;
}

/* description details: text */
.info-page > div:nth-of-type(2) dd {
  padding: 2rem 0 2rem 0;
}





/*********************/
/*    WASTED PAGE    */
/*********************/

/* background */
.wasted-page > div:nth-of-type(1) {
  background: var(--color-background);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  display: none;
  z-index: 99999999;
}

.wasted-background-active {
  display: block !important;
  animation-name: fade-in;
  animation-duration: 6s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}


/* text */
.wasted-page > div:nth-of-type(2) {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  opacity: 0;
  text-align: center;
  filter: blur(2px);
}

.wasted-text-active {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999999999;
  animation-name: fade-in;
  animation-duration: 1.2s;
  animation-delay: 6s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.11, 0, 0.5, 0);
}

.wasted-page p {
  max-width: 40em;
  margin-bottom: 2em;
}