*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--color-text);
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.6), transparent 30%),
    linear-gradient(180deg, #fbf8f3 0%, var(--color-bg) 35%, #f2ecdf 100%);
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
}

p,
h1,
h2 {
  margin: 0;
}

.page-shell {
  padding: 0 0 ;
}

.container {
  width: min(100%, var(--container-width));
  max-width: var(--container-width);
  margin: 0 auto;
}

.section-block {
  padding-block: var(--space-7);
}

.story-stack {
  display: flex;
    flex-direction: column;
    justify-content: center;
}

.reveal-left {
  transform: scaleX(0);
  transform-origin: left;
}

.reveal-top {
  transform: scaleY(0);
  transform-origin: top;
}

.slide-left {
  opacity: 0;
  transform: translateX(-24px);
}

.slide-right {
  opacity: 0;
  transform: translateX(24px);
}

.slide-top {
  opacity: 0;
  transform: translateY(-24px);
}

.reveal-left.is-inview {
  animation: grow-left cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.5s forwards;
  animation-delay: 0.4s;
}

.reveal-top.is-inview {
  animation: grow-top cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.5s forwards;
  animation-delay: 0.4;
}

.slide-left.is-inview {
  animation: slide-left-in 1.2s ease forwards;
  animation-delay: 0.7s;
}

.slide-right.is-inview {
  animation: slide-right-in 1.2s ease forwards;
  animation-delay: 0.7s;
}

.slide-top.is-inview {
  animation: slide-top-in 0.6s ease forwards;
  animation-delay: 0.4s;
}

@keyframes grow-left {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes grow-top {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

@keyframes slide-left-in {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-right-in {
  from {
    opacity: 0;
    transform: translateX(100px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-top-in {
  from {
    opacity: 0;
    transform: translateY(-24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 720px) {

  .section-block {
    padding-block: var(--space-6);
  }
}