* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  timeline-scope: --page-scroll;
}

body {
  background: #111;
  overflow-x: hidden;
  view-timeline: --page-scroll block;
}

.scene {
  display: flex;
  gap: 2px;
  min-height: 300vh;
}

.col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  will-change: transform;
}

.col-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-duration: 1ms;
}

.col-left .col-inner {
  animation-name: slide-up;
  animation-timeline: --page-scroll;
}

.col-right .col-inner {
  animation-name: slide-up;
  animation-timeline: --page-scroll;
  animation-direction: reverse;
}

@keyframes slide-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

.card {
  flex-shrink: 0;
  height: 25vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, sans-serif;
}

.card.light {
	background:#f0f0f0; color:#111;
}
.card.dark {
	background:#1a1a1a; color:#f0f0f0;
}
.card-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
}