<!-- 
  The original JS version is here, https://content.ameba.jp/blogoftheyear/2019/
  © CyberAgent, Inc

  Forked from https://codepen.io/herablog/pen/dygjeQE
-->

<div class="warning">
	<p>⚠️ 你的浏览器版本低，不支持。Your browser does not support CSS Scroll-Driven Animations with <code>scroll-timeline</code>. Please use Chrome 115+ to check out this demo.</p>
</div>

<div class="header__title">
  <h1 class="header__logo">
    <img class="header__logoBalloon" src="logo-balloon.a5c92776.svg" alt="BLOG of the year 2019"><img class="header__logoAbemakun" src="logo-abemakun.4326b3ad.svg" alt="">      
  </h1>
</div>
<main>
  <section class="winner">
    <header>
      <img src="title-excellence.ad99c28c.svg" width="195" height="100" alt="優秀賞" />
    </header>
    <img class="photo" src="main-l.2decfb32.jpg" width="596" height="596" />
    <img class="photo" src="sub-l.bd653989.jpg" width="368" height="553" />
  </section>
</main>
<div class="point point-green"></div>
<div class="point point-gold"></div>
<div class="point point-circle"></div>

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;
	}
}