/* The first and last questions share the viewport with the adjoining content. */
@media (prefers-reduced-motion: no-preference) {
  #ghost-period .problem-intro {
    margin-bottom: 4px;
  }

  #ghost-period .lead-question-sequence {
    height: 220svh;
  }

  #ghost-period .lead-question-pin {
    height: 77svh;
    top: 11.5svh;
  }
}

@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  #ghost-period .lead-question-sequence {
    height: 212svh;
  }
}

@media (prefers-reduced-motion: reduce) {
  #ghost-period .lead-question-sequence {
    padding-bottom: 0;
  }

  #ghost-period .lead-question-pin {
    padding-block: clamp(24px, 5vw, 48px);
  }

  #ghost-period .scroll-question {
    margin-block: 0;
  }

  #ghost-period .scroll-question + .scroll-question {
    margin-top: clamp(32px, 6vw, 68px);
  }
}

#ownership .pull-quote {
  position: relative;
  isolation: isolate;
}

.ownership-foil {
  position: absolute;
  z-index: 1;
  inset: -140px -20px -75px;
  overflow: clip;
  pointer-events: none;
  user-select: none;
}

.ownership-foil > i {
  position: absolute;
  left: var(--foil-x);
  bottom: 0;
  width: 7px;
  height: 19px;
  opacity: 0;
  border-radius: 1px;
  background: linear-gradient(140deg, #ffe0a8 8%, #ffbd72 44%, #ff782c 48%, #d36b32 88%);
  box-shadow: inset 1px 0 #ffd29aab;
  will-change: transform, opacity;
  animation: ownership-foil-lift var(--foil-duration) linear var(--foil-delay) both;
}

.ownership-foil > i:nth-child(3n) {
  width: 10px;
  height: 12px;
  clip-path: polygon(0 0, 100% 28%, 15% 100%);
  background: #ffb878;
}

.ownership-foil > i:nth-child(3n + 1) {
  width: 5px;
  height: 16px;
  background: linear-gradient(150deg, #ffd8b6, #bf673e 65%, #e6b886);
}

.ownership-foil > i:nth-child(7n) {
  width: 4px;
  height: 25px;
  background: linear-gradient(150deg,#fff1d5,#ffc087 45%,#a75631);
}

.ownership-foil::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 20px;
  height: 160px;
  background: radial-gradient(ellipse at 50% 95%,#ff8d3e3d,transparent 68%);
  opacity: 0;
  transform-origin: bottom;
  animation: ownership-foil-glow 1.9s ease-out both;
}

#ownership .is-ownership-celebrating em {
  animation: ownership-word-glow 2.3s ease-out both;
}

@keyframes ownership-foil-lift {
  0% {
    opacity: 0;
    transform: translate3d(0,10px,0) rotate(var(--foil-tilt)) rotateY(0);
    animation-timing-function: cubic-bezier(.12,.65,.25,1);
  }
  8% {
    opacity: 1;
  }
  43% {
    opacity: .95;
    transform: translate3d(calc(var(--foil-drift) * .62),var(--foil-rise),0) rotate(calc(var(--foil-turn) * .45)) rotateY(145deg);
    animation-timing-function: cubic-bezier(.5,0,.85,.4);
  }
  72% {
    opacity: .85;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--foil-drift),var(--foil-fall),0) rotate(var(--foil-turn)) rotateY(310deg);
  }
}

@keyframes ownership-foil-glow {
  0% {opacity:0;transform:scaleX(.4) scaleY(.6)}
  28% {opacity:.85}
  100% {opacity:0;transform:scaleX(1.25) scaleY(1.3)}
}

@keyframes ownership-word-glow {
  0%,100% {text-shadow:0 0 0 #ff793a00}
  30% {text-shadow:0 0 26px #ff793a66}
}

@media (max-width: 640px) {
  .ownership-foil {
    inset-inline: -12px;
    bottom: -55px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ownership-foil {
    display: none;
  }
  #ownership .is-ownership-celebrating em {animation:none}
}