.home-hero-rolling {
  --hero-horizontal-padding: var(--wp--preset--spacing--space-60);
  /* Drum motion — keep in sync with home-hero-rolling-script.js ANIM_DURATION */
  --rolling-move-duration: 0.62s;
  --rolling-move-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --rolling-out-opacity-duration: 0.28s;
  --rolling-in-opacity-duration: 0.4s;
  --rolling-in-opacity-delay: 0.07s;
  --rolling-blur-out: 3px;
  --rolling-width-duration: 0.22s;
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0a0a0a;
}

/* Rolling slot: width in px from JS (scrollWidth) so CSS can interpolate; drum = no width transition */
.rolling-wrapper {
  display: inline-grid;
  overflow: hidden;
  vertical-align: bottom;
  align-items: center;
  justify-items: center;
  box-sizing: border-box;
  width: var(--pill-word-width, max-content);
  min-width: 4ch;
  max-width: 100%;
  /* One line cap — old text slides out, new slides in (overflow clips) */
  min-height: 1lh;
  height: 1lh;
  transition: width var(--rolling-width-duration, 0.22s)
    var(--rolling-move-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.rolling-wrapper.is-animating,
.rolling-wrapper.rolling-width-snap {
  transition: width 0s linear;
}

@supports not (height: 1lh) {
  .rolling-wrapper {
    min-height: 1.35em;
    height: 1.35em;
  }
}

.home-hero-rolling__slider {
  position: relative;
  width: 100%;
  min-height: 560px;
  height: min(800px, calc(100vh - 104px));
}

.home-hero-rolling__slide-media,
.home-hero-rolling__slide-media img {
  width: 100%;
  height: 100%;
}

.home-hero-rolling__slide-media img {
  display: block;
  object-fit: cover;
  object-position: center;
}

.home-hero-rolling__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, var(--home-hero-overlay-alpha, 0.3));
  pointer-events: none;
  z-index: 2;
}

.home-hero-rolling__rolling {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--space-12);
  padding: var(--wp--preset--spacing--space-24) var(--hero-horizontal-padding);
  color: #fff;
  background: linear-gradient(
    90deg,
    rgba(10, 10, 10, 0) 0%,
    rgba(10, 10, 10, 0.55) 50%,
    rgba(10, 10, 10, 0) 100%
  );
  backdrop-filter: blur(4px);
}

.home-hero-rolling__text {
  font-family: var(--wp--preset--font-family--sora);
  font-size: var(--wp--preset--font-size--headline-5);
  font-weight: 400;
  line-height: var(--wp--custom--typography--line-height--relaxed);
  letter-spacing: var(--wp--custom--typography--letter-spacing--normal);
  white-space: nowrap;
}

.home-hero-rolling__break {
  display: none;
}

/*
 * Pill: no chevron icon, no hover dim.
 * min-width keeps the border outline stable regardless of the rolling word length.
 * Font-size is 7px smaller than the surrounding sentence text (4px base + 3px client tweak).
 */
.home-hero-rolling__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 11rem;
  padding: var(--wp--preset--spacing--space-4)
    var(--wp--preset--spacing--space-16);
  border: 1px solid #fff;
  border-radius: 100px;
  background: transparent;
  color: #fff;
  font-family: var(--wp--preset--font-family--sora);
  font-size: calc(var(--wp--preset--font-size--headline-5) - 0.25rem - 3px);
  font-weight: 400;
  line-height: var(--wp--custom--typography--line-height--relaxed);
  letter-spacing: var(--wp--custom--typography--letter-spacing--normal);
  cursor: pointer;
}

/* Idle: no transition — avoids false "snap back" when .is-animating is removed */
.rolling-current,
.rolling-next {
  grid-area: 1 / 1;
  align-self: center;
  white-space: nowrap;
  backface-visibility: hidden;
  transition: none;
  will-change: auto;
  filter: none;
}

.rolling-next {
  transform: translate3d(0, 100%, 0);
  opacity: 0;
  pointer-events: none;
}

/* Drum: transform + opacity + filter only (compositor-friendly) */
.rolling-wrapper.is-animating .rolling-current {
  transition:
    transform var(--rolling-move-duration) var(--rolling-move-ease),
    opacity var(--rolling-out-opacity-duration) ease-out,
    filter var(--rolling-out-opacity-duration) ease-out;
  transform: translate3d(0, -100%, 0) scale(0.97);
  opacity: 0;
  filter: blur(var(--rolling-blur-out));
}

.rolling-wrapper.is-animating .rolling-next {
  transition:
    transform var(--rolling-move-duration) var(--rolling-move-ease),
    opacity var(--rolling-in-opacity-duration) ease-out
      var(--rolling-in-opacity-delay),
    filter calc(var(--rolling-in-opacity-duration) + 0.05s) ease-out
      var(--rolling-in-opacity-delay);
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-rolling {
    --rolling-move-duration: 0.01ms;
    --rolling-out-opacity-duration: 0.01ms;
    --rolling-in-opacity-duration: 0.01ms;
    --rolling-in-opacity-delay: 0s;
    --rolling-blur-out: 0;
    --rolling-width-duration: 0.01ms;
  }

  .rolling-wrapper.is-animating .rolling-current {
    transform: translate3d(0, -100%, 0);
    filter: none;
  }

  .rolling-wrapper.is-animating .rolling-next {
    filter: none;
  }
}

@media (max-width: 991px) {
  .home-hero-rolling {
    --hero-horizontal-padding: var(--wp--preset--spacing--space-24);
  }

  .home-hero-rolling__rolling {
    flex-wrap: wrap;
    row-gap: var(--wp--preset--spacing--space-12);
    padding-top: var(--wp--preset--spacing--space-16);
    padding-bottom: var(--wp--preset--spacing--space-16);
  }

  .home-hero-rolling__text {
    font-size: var(--wp--preset--font-size--headline-5);
  }

  .home-hero-rolling__pill {
    font-size: calc(var(--wp--preset--font-size--body-1) - 0.25rem - 3px);
    min-width: 7.5rem;
  }
}

@media (max-width: 767px) {
  .home-hero-rolling__slider {
    min-height: 460px;
    height: 72vh;
  }

  .home-hero-rolling__rolling {
    justify-content: center;
    row-gap: var(--wp--preset--spacing--space-16);
  }

  .home-hero-rolling__break {
    display: block;
    flex: 0 0 100%;
    width: 100%;
    height: 0;
  }

  .home-hero-rolling__text {
    font-size: var(--wp--preset--font-size--headline-5);
  }

  .home-hero-rolling__pill {
    font-size: calc(var(--wp--preset--font-size--body-2) - 0.25rem - 3px);
    min-width: 6rem;
  }
}