/* Mobile project sequence stability */

@media (max-width: 48rem) {
  .project-sequence {
    overflow-x: clip;
    padding-bottom:
      calc(
        clamp(2.5rem, 10vw, 4rem)
        + env(safe-area-inset-bottom)
      );
  }

  .project-sequence__stage,
  .project-sequence__copy-stack {
    width: 100%;
    min-width: 0;
  }

  .project-sequence__copy-item {
    width: 100%;
    max-width: 100%;
    filter: none !important;
    will-change: transform, opacity;
  }

  .project-sequence .page-top {
    position: relative;
    z-index: 4;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .project-sequence__mobile-open {
    gap: 0.55rem;
    align-items: center;
    justify-content: center;
  }

  .project-sequence__mobile-open-icon {
    display: inline-grid;
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    place-items: center;
    line-height: 1;
    transition: transform var(--dur) var(--ease);
  }

  .project-sequence__mobile-open-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .project-sequence__mobile-open:hover
  .project-sequence__mobile-open-icon,
  .project-sequence__mobile-open:focus-visible
  .project-sequence__mobile-open-icon {
    transform: translate(0.15rem, -0.15rem);
  }
}