body {
  background-color: #f7f7f8;
}

.header__title {
  height: 100vh;
  position: relative;
  
  & .header__logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    height: 100vh;
  
    & img {
      width: 266px;
    }
  }
}

.winner {
  padding: 0 16px;
  margin-bottom: 1000px;
  position: relative;
  
  & header {
    margin-bottom: 56px;
  }
  
  & .photo {
    border-radius: 30px;
    animation: reveal ease-out;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
  
  & .photo:nth-of-type(2) {
    position: absolute;
    left: 45%;
    top: 70%;
  }
}

.point {
  z-index: -1;
  animation: move ease-in-out;
  animation-timeline: scroll(root block);
  
  &.point-green {
    width: 30px;
    height: 30px;
    background: green;
    position: fixed;
    top: 30%;
    left: 20%;
    border-radius: 50%;
  }
  
  &.point-gold {
    width: 35px;
    height: 35px;
    background: rgb(140,129,42);
    position: fixed;
    top: 40%;
    left: 85%;
    border-radius: 50%;
  }
  
  &.point-circle {
    width: 50px;
    height: 50px;
    border: 5px solid rgb(140,129,42);
    position: fixed;
    top: 70%;
    left: 10%;
    border-radius: 50%;
  }
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(48px); }
  50% { transform: translateY(0); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes move {
  from { transform: translateY(0); }
  to { transform: translateY(-5vh); }
}

/* Show warning for browsers without support */
.warning {
	border: 1px solid black;
	z-index: 9999;
	color: black;
	background: rgba(255 255 225 / 0.9);
	z-index: 1;

	position: fixed;
	bottom: 1em;
	left: 1em;
	right: 1em;
	text-align: center;
}

.warning p {
	margin: 1em 0;
}

/* Hide warning when native view-timeline support detected */
@supports (scroll-timeline: --works) {
	.warning {
		display: none;
	}
}