/* Right below is the original CSS from https://codepen.io/cameronknight/pen/qBNvrRQ
 * Scroll down to see the extra CSS Additions to implement is using CSS @scroll-timeline
 */
:root {
  --text-color: #111;
  --bg-color: #b9b3a9;
}

body {
  font-family: termina, sans-serif;
  color: var(--text-color);
  background: var(--bg-color);
  transition: 0.3s ease-out;
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
  overscroll-behavior: none;
}

section {
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  position: relative;
}

section:not(#sectionPin) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 2rem;
  padding: 50px 10vw;
  margin: auto;
  place-items: center;
}

img {
  height: 80vh;
  width: auto;
  object-fit: cover;
}

h1 {
  font-size: 5rem;
  line-height: 1;
  font-weight: 800;
  margin-bottom: 1rem;
  position: absolute;
  top: 10vw;
  left: 10vw;
  z-index: 4;
  overflow-wrap: break-word;
  hyphens: auto;

  @media (max-width: 768px) {
    font-size: 16vw;
  }

  span {
    display: block;
  }
}

h2 {
  font-size: 2rem;
  max-width: 400px;
}

.credit {
  font-family: Termina, sans-serif;
  a {
    color: var(--text-color);
  }
}

* {
  box-sizing: border-box;
}

#sectionPin {
  height: 100vh;
  overflow: hidden;
  display: flex;
  left: 0;
  background: var(--text-color);
  color: var(--bg-color);
}

.pin-wrap {
  height: 100vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 50px 10vw;

  & > * {
    min-width: 60vw;
    padding: 0 5vw;
  }
}

p {
  position: absolute;
  bottom: 10vw;
  right: 10vw;
  width: 200px;
  line-height: 1.5;
}













/* CSS Additions by Bramus */

/* Show warning for older browser */
.warning {
  position: fixed;
  top: 1em;
  right: 1em;
  left: 1em;
	padding: 1em;
	border: 1px solid black;
  z-index: 9999;
  text-align: center;
  color: black;
  background: rgba(255 255 225 / 0.9);
}

.warning a {
  color: blue;
}

@supports (animation-timeline: works) {
  
  /* Hide Warning */
  .warning {
    display: none;
  }
  
  
  /* Move the horizontal scrolling section as we #sectionPin enters and leaves the viewport  */
  :root {
    --sections-individual-size: 100vh;
    --sections-pinned-size: 5;
  }
  
  @scroll-timeline horizontal-section-scrolling-into-view {
    source: selector(body);

		scroll-offsets:
      /* Start when #sectionPin touches the top edge of the scrollport and is visible inside the scrollport */
      selector(#sectionPin) start 1,
      /* End when #sectionPin touches the bottom edge of the scrollport and is visible inside the scrollport */
		  selector(#sectionPin) end 1
    ;
		start: selector(#sectionPin) start 1;
		end: selector(#sectionPin) end 1;

    time-range: 1s;
  }

  @keyframes move-horizontal-scrolling-section {
    to {
      transform: translateX(calc(-100% + 100vw)); /* Move horizontally so that right edge is aligned against the viewport */
    }
  }
  
  #sectionPin {
    height: calc(var(--sections-pinned-size) * var(--sections-individual-size)); /* Stretch it out, so that we create room for the horizontal scroll animation */
    overflow: visible; /* To make position sticky work … */
  }
  
  .pin-wrap {
    /* Stick to Top */
    height: var(--sections-individual-size);
    position: sticky;
    top: 0;
    
    /* Move to right using animation timeline*/
    will-change: transform;
    animation: 1s linear move-horizontal-scrolling-section forwards;
    animation-timeline: horizontal-section-scrolling-into-view;
  }
  
  
  
  /* Parallax Effects for other components*/
  :root {
    --sections-total-size: calc(2 + var(--sections-pinned-size));
    --sections-total-height: calc(var(--sections-total-size) * var(--sections-individual-size));
    
    --duration: 1s;
    
    --single-section-duration: calc(var(--duration) / var(--sections-total-size));
    --horizontal-section-duration: calc(var(--single-section-duration) * var(--sections-pinned-size));
    --last-section-delay: calc(var(--duration) / var(--sections-total-size) * calc(var(--sections-total-size) - 1));
  }
  
  
  /* Main Body Scroll Timeline */
  @scroll-timeline scrolling {
    source: selector(body);
    scroll-offsets: 0, 100%;
    start: 0;
    end: 100%;
    time-range: 1s;
  }

  /* Move the title up as we scroll through the first screen */
  @keyframes move-title {
    to {
      transform: translateY(-10vh);
    }
  }
  h1 {
    animation: var(--single-section-duration) linear move-title forwards;
    animation-timeline: scrolling;
  }

  /* Move the tagline up as we scroll through the first screen */
  @keyframes move-tagline {
    to {
      transform: translateY(-20vh);
    }
  }
  p {
    animation: var(--single-section-duration) linear move-tagline forwards;
    animation-timeline: scrolling;
  }
  
  /* Move the credit up as we scroll through the last screen */
  @keyframes move-credit {
    from {
      transform: translateY(10vh);
    }
    to {
      transform: translateY(-20vh);
    }
  }
  .credit {
    animation: var(--single-section-duration) linear move-credit var(--last-section-delay) forwards;
    animation-timeline: scrolling;
  }
}