@import url("https://fonts.googleapis.com/css2?family=Oxanium:wght@700&family=Great+Vibes&display=swap");
@property --k {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}
html {
  overflow-x: hidden;
  scrollbar-color: gold #121212;
}

body {
  margin: 0;
}

header, footer {
  display: grid;
  place-content: center;
  min-height: 100vh;
  background: silver;
  text-align: center;
  text-shadow: 1px 1px 3px;
}

footer {
  font-family: Great Vibes, cursive;
}

section {
  height: 500vh;
  background: #212121;
}
@supports (animation-timeline: view()) {
  section {
    background: linear-gradient(90deg, rgba(255, 215, 0, calc(1 - round(down, var(--k)))) calc(var(--k)*100%), #0000 0) 0 0/100% 0.5rem no-repeat fixed #212121;
    animation: k 1s both;
    animation-timeline: view();
    animation-range: contain;
  }
}

@keyframes k {
  to {
    --k: 1 ;
  }
}
h2 {
  color: #ededed;
  font: 900 2em/2 sans-serif;
}

img {
  width: min(30vmax, 70vmin);
  aspect-ratio: 1;
  object-fit: cover;
  box-shadow: 2px 2px 5px;
}

.stick {
  box-sizing: border-box;
  display: grid;
  align-content: center;
  container-type: inline-size;
  position: sticky;
  top: 0;
  padding: 2em;
  height: 100vh;
}

.wrap {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 2em;
  translate: calc(var(--k)*(50cqw - 100%));
}

/* just support info */
aside {
  position: fixed;
  bottom: 0;
  padding: 1em;
}

.box-info-scrollani {
  margin: 1em;
  border-left: solid 5px #dc3055;
  padding: 1em;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.35);
  background: #851d40;
  color: #fff;
  font: 1.25em/1.25 ubuntu, trebuchet ms, arial, sans-serif;
}
@supports (animation-timeline: view()) {
  .box-info-scrollani {
    display: none;
  }
}

kbd {
  padding: 2px;
  background: rgba(0, 0, 0, 0.35);
  font: 1.1em/1.2 ubuntu mono, consolas, monaco, monospace;
}

a {
  color: gold;
}

a:is(:focus, :hover) {
  color: lightskyblue;
}