:root {
  color-scheme: dark;
}

html, body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #111E;
}

body {
  background-image:
    linear-gradient(transparent 50%, green 50.5%),
    linear-gradient(to right, yellow 50%, orange 50.5%)
  ;
}

h1 {
  font-size: clamp(40pt, 2.5vw, 100pt);
}

video {
  display: block;
  width: auto;
  height: 100%;
  margin-inline: auto;
  flex-grow: 1;
}

@property --break {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --transition {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --fromcolor {
  syntax: "<color>";
  inherits: true;
  initial-value: green;
}

@property --tocolor {
  syntax: "<color>";
  inherits: true;
  initial-value: yellow;
}

h1 {
  text-align: center;
}

video::cue(.notes) {
  --fromcolor: purple
}

h1, video::cue {
  --transition: 1.5%
  font-weight: bold;
  background-image:
    linear-gradient(
      to right,
      var(--tocolor),
      var(--tocolor) calc(var(--break) - var(--transition) / 2),
      var(--fromcolor) calc(var(--break) + var(--transition) / 2)
    )
  ;
  color: transparent;
  background-clip: text;
  -webkit-text-stroke: 1px color-mix(in srgb, orangered 30%, white);
  animation: /* Not allowed on `::cue` */
    slide 5s linear infinite alternate
  ;
}

video::cue::after {
  content: '';
  display: block;
  background-color: red;
}

@keyframes slide {
  from { --break: 0% }
  to { --break: 100% }
}

form {
  visibility: hidden;
}