/* ==========================================================================
   Spin Cycle Stories
   One large image per post, crossfading with a slow settle from 1.08 to 1.
   Text sits on the image in both modes, so it is always light on a scrim.
   ========================================================================== */

.spin-stories {
  --spin-stories-ease: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --spin-stories-ink: var(--spin-karlie, #FAF9F5);
  position: relative;
  margin-inline: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  margin-top: var(--spin-sp-mt-d, 0);
  margin-bottom: calc(var(--spin-sp-mb-d, 0px) - 25px);
  /* Full bleed, edge to edge. Editor padding still applies if set. */
  padding: var(--spin-sp-pt-d, 0) 0 var(--spin-sp-pb-d, 0);
}

.spin-stories__frame {
  position: relative;
  height: clamp(560px, 86vh, 860px);
  overflow: hidden;
  /* Top corners match the footer's 25px. The bottom ones stay square: the
     footer tucks over them, and its own curve shows the image behind. */
  border-radius: 25px 25px 0 0;
  background-color: var(--spin-black-sunshine, #141413);
  color: var(--spin-stories-ink);
  isolation: isolate;

  /* Text lines up with the site's 1231px content column, like the case
     studies track, with an 80px floor on narrower screens. */
  --spin-stories-gutter: max(80px, (100% - 1231px) / 2);
}

/* The image's rounded top corners, and the space around it while the reveal
   plays, show the section's own background. It takes the colour of the
   section above so it reads as that section carrying on, not the page. */
.spin-stories {
  --spin-stories-fill: var(--spin-aneurysm, #F3F0E8);
  background-color: var(--spin-stories-fill);
}

[data-spin-mode="dark"] .spin-stories {
  --spin-stories-fill: var(--spin-heart-shaped-box, #1F1E1D);
}

.spin-stories--fill-page,
[data-spin-mode="dark"] .spin-stories--fill-page {
  --spin-stories-fill: var(--spin-surface-page, #FAF9F5);
}

.spin-stories--fill-white_limo {
  --spin-stories-fill: var(--spin-white-limo, #E8E6DC);
}

[data-spin-mode="dark"] .spin-stories--fill-white_limo {
  --spin-stories-fill: var(--spin-everlong, #2A2926);
}

/* The panel sits just above the footer. Tucking the footer 25px up over it
   (the size of the footer's top corners) lets the image show behind the
   curve. The footer is lifted above the panel so it paints on top. */
.spin-footer {
  position: relative;
  z-index: 1;
}

/* --- Reveal ---------------------------------------------------------------
   After Collins: the panel waits as a rounded window the width of the content
   column, cropped to 72% height and sitting 240px low, then opens out to full
   bleed as it rises into place. The script arms it (so it's never hidden
   without JS) and toggles .is-in when the panel comes into view. */

.spin-stories.is-armed .spin-stories__frame {
  clip-path: inset(0 var(--spin-stories-gutter) 28% var(--spin-stories-gutter) round 24px);
  transform: translateY(240px);
  transition: clip-path 1.4s cubic-bezier(0.19, 1, 0.22, 1), transform 1.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.spin-stories.is-armed.is-in .spin-stories__frame {
  clip-path: inset(0 0 0 0 round 25px 25px 0 0);
  transform: none;
}

/* --- Images --------------------------------------------------------------- */

.spin-stories__images {
  position: absolute;
  inset: 0;
}

.spin-stories__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 700ms var(--spin-stories-ease), transform 7s cubic-bezier(0.19, 1, 0.22, 1);
}

.spin-stories__img[data-active] {
  opacity: 1;
  transform: scale(1);
}

.spin-stories__img--blank {
  display: block;
  background-color: var(--spin-heart-shaped-box, #1F1E1D);
}

/* Darkens the left for the heading and the foot for the bars and pill. */
.spin-stories__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(20, 20, 19, 0.62) 0%, rgba(20, 20, 19, 0.28) 38%, rgba(20, 20, 19, 0) 62%),
    linear-gradient(0deg, rgba(20, 20, 19, 0.55) 0%, rgba(20, 20, 19, 0) 26%);
}

/* --- Step controls: each half of the frame -------------------------------- */

.spin-stories__controls {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.spin-stories__step {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: w-resize;
}

.spin-stories__step--next {
  cursor: e-resize;
}

.spin-stories__step:focus-visible {
  outline: 2px solid var(--spin-accent-hover, #FF4A17);
  outline-offset: -6px;
}

/* --- Heading --------------------------------------------------------------- */

.spin-stories__head {
  position: absolute;
  top: 50%;
  left: var(--spin-stories-gutter);
  right: var(--spin-stories-gutter);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 520px;
  transform: translateY(-50%);
  pointer-events: none;
}

.spin-stories__head > * {
  pointer-events: auto;
}

.spin-stories__eyebrow {
  margin: 0;
  font-family: var(--spin-font-body, "Soehne", Helvetica, Arial, sans-serif);
  font-weight: 300;
  font-size: 16px;
  line-height: 25px;
  color: var(--spin-cowboys, #B0AEA5);
}

.spin-stories__heading {
  margin: 0 0 8px;
  font-family: var(--spin-font-heading, "Quincy CF", Georgia, serif);
  font-weight: 400;
  font-size: var(--spin-h3, 56px);
  line-height: 1.05;
  letter-spacing: var(--spin-heading-tracking, -0.035em);
  color: var(--spin-stories-ink);
}

/* The frame stays dark in both modes, so the Cycle hover always fills light. */
.spin-stories .spin-stories__cta {
  text-decoration: none;
  --spin-btn-cycle-bg: var(--spin-karlie, #FAF9F5);
  --spin-btn-cycle-ink: var(--spin-black-sunshine, #141413);
}

/* --- Foot: progress bars and the post pill --------------------------------- */

.spin-stories__shell {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 32px;
  align-items: end;
  padding: 0 var(--spin-stories-gutter) 65px;
  pointer-events: none;
}

.spin-stories__nav {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-bottom: 20px;
  pointer-events: auto;
}

/* The hit area is taller than the line, so the bars are easy to tap. */
.spin-stories__bar {
  position: relative;
  width: 64px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.spin-stories__bar::before,
.spin-stories__bar-fill {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 3px;
}

.spin-stories__bar::before {
  right: 0;
  background-color: rgba(250, 249, 245, 0.35);
}

.spin-stories__bar-fill {
  width: 100%;
  background-color: var(--spin-stories-ink);
  transform: scaleX(0);
  transform-origin: left center;
}

.spin-stories__bar.is-done .spin-stories__bar-fill {
  transform: scaleX(1);
}

/* The active fill runs for the interval; the script sets the duration. */
.spin-stories__bar[data-active] .spin-stories__bar-fill {
  animation: spin-stories-fill var(--spin-stories-interval, 7s) linear forwards;
}

.spin-stories.is-paused .spin-stories__bar[data-active] .spin-stories__bar-fill {
  animation-play-state: paused;
}

.spin-stories__bar:focus-visible {
  outline: 2px solid var(--spin-accent-hover, #FF4A17);
  outline-offset: 2px;
  border-radius: 4px;
}

@keyframes spin-stories-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.spin-stories__links {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: end;
  min-height: 52px;
}

/* All pills share one grid cell; only the active one is shown. */
.spin-stories__link {
  grid-area: 1 / 1;
  display: inline-flex;
  gap: 12px;
  align-items: center;
  max-width: 100%;
  min-height: 52px;
  padding: 8px 18px 8px 22px;
  border-radius: 999px;
  background-color: rgba(250, 249, 245, 0.16);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  font-family: var(--spin-font-body, "Soehne", Helvetica, Arial, sans-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: var(--spin-stories-ink);
  text-decoration: none;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 500ms var(--spin-stories-ease), transform 800ms cubic-bezier(0.19, 1, 0.22, 1), background-color 250ms ease;
}

.spin-stories__link[data-active] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.spin-stories__link:hover,
.spin-stories__link:focus-visible {
  background-color: rgba(250, 249, 245, 0.28);
}

.spin-stories__link:focus-visible {
  outline: 2px solid var(--spin-accent-hover, #FF4A17);
  outline-offset: 2px;
}

.spin-stories__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spin-stories__arrow {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 250ms ease;
}

.spin-stories__link:hover .spin-stories__arrow {
  transform: translate(2px, -2px);
}

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 1024px) {
  .spin-stories {
    margin-top: var(--spin-sp-mt-t, 0);
    margin-bottom: calc(var(--spin-sp-mb-t, 0px) - 25px);
    padding: var(--spin-sp-pt-t, 0) 0 var(--spin-sp-pb-t, 0);
  }

  .spin-stories__frame {
    height: clamp(520px, 80vh, 760px);
  }

  .spin-stories__frame {
    --spin-stories-gutter: 64px;
  }

  .spin-stories__shell {
    padding-bottom: 57px;
  }
}

@media (max-width: 767px) {
  .spin-stories {
    margin-top: var(--spin-sp-mt-m, 0);
    margin-bottom: calc(var(--spin-sp-mb-m, 0px) - 25px);
    padding: var(--spin-sp-pt-m, 0) 0 var(--spin-sp-pb-m, 0);
  }

  .spin-stories__frame {
    height: clamp(520px, 78vh, 680px);
    --spin-stories-gutter: 20px;
  }

  .spin-stories__scrim {
    background:
      linear-gradient(0deg, rgba(20, 20, 19, 0.78) 0%, rgba(20, 20, 19, 0.35) 45%, rgba(20, 20, 19, 0.15) 70%);
  }

  /* Heading moves up over the image; bars and pill stack at the foot. */
  .spin-stories__head {
    top: auto;
    bottom: 150px;
    transform: none;
  }

  .spin-stories__heading {
    font-size: 40px;
  }

  .spin-stories__shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 0 var(--spin-stories-gutter) 45px;
  }

  .spin-stories__nav {
    order: 2;
    padding: 0;
  }

  .spin-stories__bar {
    flex: 1;
    width: auto;
  }

  .spin-stories__links {
    justify-items: stretch;
  }

  @media (prefers-reduced-motion: reduce) {
  .spin-stories.is-armed .spin-stories__frame {
    clip-path: none;
    transform: none;
    transition: none;
  }

  .spin-stories__img,
  .spin-stories__link {
    transition: opacity 200ms linear;
    transform: none;
  }
}