:root {
  --card-height: 40vw;
  --card-margin: 4vw;
  --card-top-offset: 1em;
}

body {
  background: #111;
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  margin: 0;
  padding-bottom: 10vh;
}

header {
  height: 80vh;
  display: grid;
  place-items: center;
}

h1 {
  font-size: clamp(3rem, 10vw, 10rem);
  text-transform: uppercase;
  text-align: center;
  line-height: 0.8;
  margin: 0;

  /* Typography styles */
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.5);
  color: transparent;
  background: linear-gradient(to bottom, #fff 0%, transparent 100%);
  background-clip: text;
  -webkit-background-clip: text;

  /* Scroll animation */
  animation: fill-text linear both;
  animation-timeline: scroll();
  animation-range: 0 50vh;
}

@keyframes fill-text {
  to {
    -webkit-text-stroke: 0;
    color: #fff;
  }
}

#cards {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, var(--card-height));
  gap: var(--card-margin);
  padding-bottom: calc(4 * var(--card-margin));
  margin-bottom: var(--card-margin);
  max-width: 90vw;
  margin: 0 auto;
}

.card {
  position: sticky;
  top: 10vh;
  height: var(--card-height);
  padding-top: calc(var(--index) * var(--card-top-offset));
  perspective: 1000px; /* 3D context */
}

.card__content {
  box-sizing: border-box;
  padding: 50px;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  background: #1c1c1c;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;

  /* Transform config */
  transform-origin: 50% 0%;
  will-change: transform, filter;
  transform-style: preserve-3d;

  /* Animate based on viewport visibility */
  animation: scale-card linear forwards;
  animation-timeline: view();
  animation-range: exit-crossing 0% exit-crossing 100%;
}

/* Card variants */
.card:nth-child(1) {
  --index: 1;
}
.card:nth-child(1) .card__content {
  background: #ff2a6d;
  --shadow-color: rgba(255, 42, 109, 0.8);
}

.card:nth-child(2) {
  --index: 2;
}
.card:nth-child(2) .card__content {
  background: #05d9e8;
  color: #000;
  --shadow-color: rgba(5, 217, 232, 0.8);
}

.card:nth-child(3) {
  --index: 3;
}
.card:nth-child(3) .card__content {
  background: #ffe600;
  color: #000;
  --shadow-color: rgba(255, 230, 0, 0.8);
}

.card:nth-child(4) {
  --index: 4;
}
.card:nth-child(4) .card__content {
  background: #fafac6;
  color: #000;
  --shadow-color: rgba(250, 250, 198, 0.8);
}

@keyframes scale-card {
  to {
    transform: scale(0.8) translateY(-10vh) rotateX(-20deg);
    filter: brightness(0.6);
    border-radius: 20px;
    /* Dynamic shadow */
    box-shadow: 0 50px 80px -10px var(--shadow-color);
  }
}

/* Content Styling */
h2 {
  font-size: 4rem;
  margin: 0;
}
p {
  font-size: 1.5rem;
  max-width: 600px;
  line-height: 1.4;
  opacity: 0.8;
}

.number {
  font-size: 10rem;
  position: absolute;
  right: 2rem;
  top: -2rem;
  opacity: 0.3;
  font-weight: bold;
}

/* Scroll Progress Circle (SVG) */
.progress-circle {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 80px;
  height: 80px;
  z-index: 100;
}

.progress-circle circle {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;

  /* Scroll-linked dashoffset */
  stroke-dasharray: 251; /* 2 * pi * r (r=40) approx 251 */
  stroke-dashoffset: 251;

  animation: progress-spin linear;
  animation-timeline: scroll();
}

@keyframes progress-spin {
  to {
    stroke-dashoffset: 0;
  }
}