/* The closing sections: the statement, the workshop and the final call to action. */

/* Statement: the first sentence is struck through as the second arrives. */
.statement {
  padding-block: clamp(140px, 22vh, 260px);
}

.statement-text {
  font-size: clamp(2.4rem, 6.2vw, 6.4rem);
  letter-spacing: -0.05em;
  line-height: 1.02;
  text-wrap: balance;
}

.statement-a,
.statement-b {
  display: block;
}

.statement-a > span {
  --strike: 0%;
  color: var(--dim);
  background: linear-gradient(var(--accent), var(--accent)) 0 56% / var(--strike) 0.06em no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

html:not(.motion) .statement-a > span {
  --strike: 100%;
}

.statement-b {
  margin-top: 0.12em;
}

.statement .lead {
  margin-top: 44px;
}

/* Built by a team that runs on it: a full-bleed shot of the workshop that settles as you arrive. */
.built {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 115vh;
  padding-bottom: clamp(80px, 14vh, 160px);
  overflow: hidden;
}

.built-media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.built-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.built-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, var(--bg) 6%, rgb(6 8 11 / 0.5) 48%, rgb(6 8 11 / 0.92) 100%),
    linear-gradient(90deg, rgb(6 8 11 / 0.7), transparent 60%);
}

.built-copy h2 {
  max-width: 13ch;
}

.built-copy .lead {
  margin-top: 24px;
  color: var(--text);
  opacity: 0.85;
}

/* Final call to action, over a grid floor that rolls towards you. */
.final {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(150px, 26vh, 280px) clamp(130px, 20vh, 220px);
  text-align: center;
}

.final::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 30%;
  z-index: -1;
  width: min(1100px, 120%);
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(108 240 200 / 0.2), transparent);
  transform: translateX(-50%);
  filter: blur(20px);
}

.final-floor {
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: 0;
  z-index: -2;
  height: 90%;
  background-image:
    linear-gradient(rgb(108 240 200 / 0.4) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgb(108 240 200 / 0.4) 1.5px, transparent 1.5px);
  background-size: 64px 64px;
  transform: perspective(500px) rotateX(60deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(0deg, #000 25%, transparent 90%);
  mask-image: linear-gradient(0deg, #000 25%, transparent 90%);
}

.motion .final-floor {
  animation: floor-roll 4s linear infinite;
}

@keyframes floor-roll {
  to {
    background-position: 0 64px, 0 0;
  }
}

.final h2 {
  font-size: clamp(3.2rem, 9.5vw, 9.6rem);
  letter-spacing: -0.06em;
  line-height: 0.95;
}

.final .lead {
  margin: 28px auto 44px;
}

.final .cta-row {
  justify-content: center;
}

@media (max-width: 900px) {
  .built {
    min-height: 90vh;
  }
}