/**
 * Scroll feel only. No layout, colour, or type changes in styles.css.
 *
 * To undo: delete motion.css and motion.js, and remove their <link>/<script>
 * tags plus the .scroll-progress div from each HTML page.
 */

.scroll-progress {
  display: none;
}

.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--accent-deep);
}

@media (max-width: 720px) {
  .scroll-progress {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    width: 100%;
    height: 6px;
    pointer-events: none;
    background: rgb(100 1 6 / 18%);
  }
}

@keyframes mumbership-hero-demo-drift {
  from {
    translate: 0 0;
  }

  to {
    translate: 0 1.6rem;
  }
}

@keyframes mumbership-hero-copy-drift {
  from {
    translate: 0 0;
  }

  to {
    translate: 0 -2.25rem;
  }
}

@keyframes mumbership-heading-enter {
  from {
    translate: 0 3.2rem;
    opacity: 0.28;
    filter: blur(10px);
  }

  to {
    translate: 0 0;
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes mumbership-line-enter {
  from {
    translate: 0 2.6rem;
    opacity: 0.2;
    filter: blur(8px);
  }

  to {
    translate: 0 0;
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes mumbership-focus-enter {
  from {
    opacity: 0.28;
    filter: blur(10px);
  }

  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes mumbership-pin-land {
  0% {
    opacity: 0;
    translate: 0 -1.05rem;
    scale: 0.78;
  }

  68% {
    opacity: 1;
    translate: 0 0.1rem;
    scale: 1.05;
  }

  100% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

.locations-map-canvas.is-pins-pending .map-pin {
  opacity: 0;
  translate: 0 -1.05rem;
  scale: 0.78;
}

.locations-map-canvas.is-pins-landing .map-pin {
  animation-name: mumbership-pin-land;
  animation-duration: 460ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
  animation-delay: calc(var(--pin-stagger, 0) * 1ms);
}

@supports (animation-timeline: scroll()) {
  @media (min-width: 901px) {
    .hero-demo-stage {
      animation-name: mumbership-hero-demo-drift;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-duration: 1s;
      animation-timeline: scroll();
      animation-timeline: scroll(root);
      animation-range: 0 40vh;
    }

    .hero-copy-main {
      animation-name: mumbership-hero-copy-drift;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-duration: 1s;
      animation-timeline: scroll();
      animation-timeline: scroll(root);
      animation-range: 0 42vh;
    }
  }
}

@supports (animation-timeline: view()) {
  .section-heading h2,
  .story-card h2,
  .cta-copy h2,
  .partner-form-copy h3,
  .policy-card h2,
  .payment-success-copy h1 {
    animation-name: mumbership-heading-enter;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-duration: 1s;
    animation-timeline: view();
    animation-range: cover 0% cover 16%;
  }

  .story-aside li,
  .pricing-points article {
    animation-name: mumbership-line-enter;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-duration: 1s;
    animation-timeline: view();
    animation-range: cover 0% cover 14%;
  }

  .section-heading .eyebrow,
  .section-heading .partner-hero-body,
  .story-card .eyebrow,
  .story-card [data-story-paragraphs],
  .story-aside .aside-label,
  .cta-copy .eyebrow,
  .cta-copy [data-cta-body],
  .locations-section .partner-filter-field,
  .instagram-copy [data-instagram-body],
  .instagram-frame,
  .membership-copy,
  .benefit-list article,
  .pricing-card-focus,
  .faq-item,
  .cta-actions,
  .partner-more-button,
  .locations-map-card,
  .partner-grid .partner-card {
    animation-name: mumbership-focus-enter;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-duration: 1s;
    animation-timeline: view();
    animation-range: cover 0% cover 16%;
  }
}

@media (max-width: 720px) {
  @supports (animation-timeline: view()) {
    .cta-copy h2,
    .section-heading h2,
    .story-card h2 {
      animation-name: mumbership-heading-enter;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-duration: 1s;
      animation-timeline: view();
      animation-range: cover 0% cover 16%;
    }

    .benefit-list article,
    .story-aside li,
    .pricing-points article {
      animation-name: mumbership-line-enter;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-duration: 1s;
      animation-timeline: view();
      animation-range: cover 0% cover 14%;
    }

    @keyframes mumbership-heading-enter {
      from {
        translate: 0 2.4rem;
        opacity: 0.3;
        filter: blur(8px);
      }

      to {
        translate: 0 0;
        opacity: 1;
        filter: blur(0);
      }
    }

    @keyframes mumbership-line-enter {
      from {
        translate: 0 2rem;
        opacity: 0.25;
        filter: blur(6px);
      }

      to {
        translate: 0 0;
        opacity: 1;
        filter: blur(0);
      }
    }

    @keyframes mumbership-focus-enter {
      from {
        opacity: 0.3;
        filter: blur(8px);
      }

      to {
        opacity: 1;
        filter: blur(0);
      }
    }

    .section-heading .eyebrow,
    .story-card .eyebrow,
    .story-card [data-story-paragraphs],
    .story-aside .aside-label,
    .cta-copy .eyebrow,
    .cta-copy [data-cta-body],
    .locations-section .partner-filter-field,
    .instagram-copy [data-instagram-body],
    .instagram-frame,
    .membership-copy,
    .pricing-card-focus,
    .faq-item,
    .cta-actions,
    .partner-more-button,
    .locations-map-card,
    .partner-grid .partner-card {
      animation-range: cover 0% cover 16%;
    }
  }
}

@keyframes mumbership-welcome-settle {
  from {
    translate: 0 -1.15rem;
  }

  to {
    translate: 0 0;
  }
}

.membership-issue-page .membership-ticket .eyebrow,
.membership-issue-page .membership-ticket .payment-success-copy {
  animation-name: mumbership-welcome-settle;
  animation-duration: 1000ms;
  animation-delay: 1500ms;
  animation-timing-function: cubic-bezier(0.45, 0.2, 0.2, 1);
  animation-fill-mode: both;
}

@keyframes mumbership-welcome-actions {
  from {
    opacity: 0;
    translate: 0 0.7rem;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

.membership-issue-page .membership-ticket .payment-success-actions .button {
  animation-name: mumbership-welcome-actions;
  animation-duration: 760ms;
  animation-delay: 2140ms;
  animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
  animation-fill-mode: both;
}

.membership-issue-page .membership-ticket .payment-success-actions .button:nth-child(2) {
  animation-delay: 2320ms;
}

@keyframes mumbership-welcome-step {
  from {
    opacity: 0;
    translate: 0 0.4rem;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

.membership-issue-page .membership-ticket .payment-success-next li {
  animation-name: mumbership-welcome-step;
  animation-duration: 580ms;
  animation-delay: 1500ms;
  animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
  animation-fill-mode: both;
}

.membership-issue-page .membership-ticket .payment-success-next li:nth-child(2) {
  animation-delay: 1620ms;
}

.membership-issue-page .membership-ticket .payment-success-next li:nth-child(3) {
  animation-delay: 1740ms;
}

@property --issue-blur {
  syntax: "<length>";
  inherits: true;
  initial-value: 22px;
}

@property --issue-tint {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.52;
}

.membership-issue {
  --issue-blur: 22px;
  --issue-tint: 0.52;
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.membership-issue-glass {
  position: absolute;
  inset: 0;
  background: rgb(242 227 235 / var(--issue-tint));
  backdrop-filter: blur(var(--issue-blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--issue-blur)) saturate(120%);
}

@media (max-width: 720px) {
  .membership-issue {
    --issue-blur: 16px;
  }

  .membership-issue-page .membership-ticket .eyebrow,
  .membership-issue-page .membership-ticket .payment-success-copy {
    animation-name: mumbership-welcome-settle-compact;
  }
}

@keyframes mumbership-welcome-settle-compact {
  from {
    translate: 0 -0.75rem;
  }

  to {
    translate: 0 0;
  }
}

.membership-issue img {
  position: relative;
  z-index: 1;
  display: block;
  width: min(16.5rem, 58vw);
  height: auto;
  animation-name: mumbership-issue-stamp;
  animation-duration: 1900ms;
  animation-delay: 560ms;
  animation-timing-function: cubic-bezier(0.65, 0, 0.2, 1);
  animation-fill-mode: both;
}

@keyframes mumbership-issue-stamp {
  from {
    opacity: 1;
    scale: 1;
  }

  to {
    opacity: 0;
    scale: 1.32;
  }
}

html:has(.membership-issue-page) {
  overflow-y: scroll;
}

@keyframes mumbership-maps-jump {
  0% {
    translate: 0 0;
  }

  36% {
    translate: 0 -0.5rem;
  }

  70% {
    translate: 0 0.06rem;
  }

  100% {
    translate: 0 0;
  }
}

.partner-address-action {
  animation-duration: 680ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
}

.partner-address-link:nth-child(2) .partner-address-action {
  animation-delay: 110ms;
}

.partner-address-link:nth-child(3) .partner-address-action {
  animation-delay: 220ms;
}

.partner-address-link:nth-child(n + 4) .partner-address-action {
  animation-delay: 330ms;
}

@media (hover: hover) and (pointer: fine) {
  .partner-card:hover .partner-address-action,
  .partner-card:focus-within .partner-address-action {
    animation-name: mumbership-maps-jump;
  }
}

@media (hover: none), (pointer: coarse) {
  .partner-card.is-lifted:not(.is-lift-quiet) .partner-address-action {
    animation-name: mumbership-maps-jump;
  }

  .partner-grid .partner-card.is-lift-instant {
    transition: none;
  }

  .partner-grid .partner-card.reveal.is-visible.is-lifted {
    transform: translateY(-0.45rem);
    box-shadow: 0 22px 46px rgba(58, 35, 45, 0.12);
  }

  .partner-grid .partner-card.reveal.is-visible.is-resting {
    transform: translateY(0.12rem) scale(0.985);
    box-shadow: 0 8px 18px rgba(58, 35, 45, 0.028);
  }
}

.partner-grid .partner-card {
  transition:
    transform 640ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 640ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 460ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .partner-grid .partner-card.reveal.is-visible:hover,
  .partner-grid .partner-card.reveal.is-visible:focus-within {
    transform: translateY(-0.45rem);
    box-shadow: 0 22px 46px rgba(58, 35, 45, 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress,
  .hero-demo-stage,
  .hero-copy-main,
  .section-heading h2,
  .section-heading .eyebrow,
  .section-heading .partner-hero-body,
  .story-card .eyebrow,
  .story-card [data-story-paragraphs],
  .story-aside .aside-label,
  .cta-copy .eyebrow,
  .cta-copy [data-cta-body],
  .locations-section .partner-filter-field,
  .instagram-copy [data-instagram-body],
  .instagram-frame,
  .membership-copy,
  .benefit-list article,
  .pricing-card-focus,
  .faq-item,
  .cta-actions,
  .partner-more-button,
  .locations-map-card,
  .partner-grid .partner-card,
  .partner-address-action,
  .membership-copy h2,
  .story-card h2,
  .cta-copy h2,
  .partner-form-copy h3,
  .policy-card h2,
  .payment-success-copy h1,
  .story-aside li,
  .benefit-list article,
  .pricing-points article,
  .map-pin,
  .membership-ticket,
  .membership-ticket .eyebrow,
  .membership-ticket .payment-success-copy,
  .membership-ticket .payment-success-actions .button,
  .membership-ticket .payment-success-next li,
  .membership-issue {
    animation: none !important;
    translate: none;
    scale: none;
    filter: none;
    opacity: 1;
  }

  .membership-issue {
    display: none !important;
  }

  .brand-note {
    transition: none;
  }

  .partner-grid .partner-card.is-lifted,
  .partner-grid .partner-card.is-resting,
  .partner-grid .partner-card:hover,
  .partner-grid .partner-card:focus-within {
    transform: none;
    box-shadow: 0 12px 30px rgba(58, 35, 45, 0.045);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .membership-issue {
    display: none !important;
  }
}