@property --hc-case-riffle-section-width {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

body {
  --hc-case-riffle-page-bg: var(--bodycolor, #050407);
  --hc-case-riffle-page-fg: var(--colorone, #fff);
}

.hc-case-riffle {
  --bodycolor: #050407;
  --colorone: #fff;
  --newtext-bluegray: #afafbc;
  --hc-case-riffle-heading-space: clamp(25px, 4vw, 56px);
  position: relative;
  isolation: isolate;
  margin-block: 75px;
  overflow-x: clip;
  background: var(--bodycolor);
  color: var(--colorone);
}

.hc-case-riffle *, .hc-case-riffle *::before, .hc-case-riffle *::after { box-sizing: border-box; }
.hc-case-riffle .hairline-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hc-case-riffle::before {
  position: absolute;
  content: '';
  z-index: -1;
  inset: 8% -8% 14% 38%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, #13244d55, transparent 68%);
}

.hc-case-riffle__heading {
  max-width: 1040px;
  margin: 0 auto var(--hc-case-riffle-heading-space);
  color: var(--colorone);
  font-family: var(--font-heading, 'Zalando Sans Expanded', sans-serif);
  font-size: clamp(30px, 5vw, 55px);
  line-height: 1.18;
  font-weight: 400;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.hc-case-riffle__heading[data-align="left"],
.hc-case-riffle__heading[data-align="right"] { max-width: none; }
.hc-case-riffle__heading[data-align="left"] { text-align: left; }
.hc-case-riffle__heading[data-align="right"] { text-align: right; }

.hc-case-riffle--wide .hc-case-riffle__heading {
  margin-block: 0;
}
.hc-case-riffle--wide .hc-case-riffle__heading + .hc-case-riffle__layout .hc-case-riffle__scene { margin-top: 10px; }
/* The SVG reserves empty space above the tallest pose. Keep the visible gap close to the title. */
.hc-case-riffle--wide[data-ready="true"] .hc-case-riffle__heading + .hc-case-riffle__layout .hc-case-riffle__scene {
  margin-top: calc(clamp(6px, 1vw, 8px) - 2.55%);
}

.hc-case-riffle__layout {
  display: grid;
  grid-template-areas: "copy visual";
  grid-template-columns: minmax(475px, .82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: 48px;
}

.hc-case-riffle--framed .hc-case-riffle__layout {
  padding: clamp(12px, 1.5vw, 15px);
  border: 1px solid #2b3048;
  border-radius: 50px;
}

.hc-case-riffle--framed .hc-case-riffle__copy { padding-inline-start: clamp(16px, 2.4vw, 35px); }

.hc-case-riffle__copy { grid-area: copy; min-width: 0; }
.hc-case-riffle__description { max-width: 48ch; margin: 12px 0 0; color: var(--newtext-bluegray); font-family: var(--font-paragraph); font-size: 16px; line-height: 24px; font-weight: 400; }
.hc-case-riffle__cta {
  grid-row: 3;
  justify-self: start;
  align-self: start;
  max-width: 100%;
  margin-top: 8px;
  line-height: 20px;
  transition: background-position 200ms, color 300ms ease-in-out, box-shadow 300ms ease-in-out;
}
.hc-case-riffle__cta svg { flex: 0 0 20px; width: 20px; height: auto; }

.hc-case-riffle__visual { grid-area: visual; min-width: 0; }
.hc-case-riffle__scene { position: relative; }
.hc-case-riffle__stage {
  width: 100%;
  aspect-ratio: 267.89093 / 296;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  --hairline-plate: #090d16;
  --hairline-hi: #83bdff;
  --hairline-edge: #8497b9;
  --hairline-mid: #475b7c;
  --hairline-lo: #23334d;
  --hairline-stroke: 1;
}
.hc-case-riffle__stage > img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 20px; }
.hc-case-riffle__stage:focus-visible { outline: none; }
.hc-case-riffle__stage:focus-visible::after {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  outline: 2px solid #82beff;
  outline-offset: 4px;
  pointer-events: none;
  content: '';
}
.hc-case-riffle--wide .hc-case-riffle__heading + .hc-case-riffle__layout .hc-case-riffle__stage:focus-visible::after {
  inset-block-start: 3%;
}
.hc-case-riffle__stage .cs-card { cursor: pointer; }
.hc-case-riffle__stage .cs-card-rim { pointer-events: none; }
.hc-case-riffle__stage svg a { outline: none; }
.hc-case-riffle :is(.hc-case-riffle__cta, .hc-case-riffle__step):focus-visible { outline: 2px solid #83bdff; outline-offset: 4px; }

/* The projects share row heights so the copy and CTA stay in place. */
.hc-case-riffle__details { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.hc-case-riffle__detail { grid-area: 1 / 1 / span 3; display: grid; grid-template-rows: subgrid; color: #fff; }
.hc-case-riffle__details > :not([data-active]) { visibility: hidden; pointer-events: none; }
.hc-case-riffle__tags { grid-row: 1; display: flex; flex-wrap: wrap; align-self: start; gap: 8px; color: var(--newtext-bluegray, #b7bdcc); }
.hc-case-riffle__tags span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border: 1px solid #2b3048; border-radius: 26px; font-size: 13px; line-height: 16px; font-weight: 300; }
.hc-case-riffle__tags span::before { content: ''; width: 5px; height: 5px; flex: none; border-radius: 50%; background: currentColor; }
.hc-case-riffle__text { grid-row: 2; }
.hc-case-riffle__title { margin: 0; font-family: var(--font-heading, 'Zalando Sans Expanded', sans-serif); font-size: 22px; line-height: 30px; font-weight: 400; text-wrap: pretty; color: #fff; }
.hc-case-riffle__step {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--new-linecolor, #2b3048);
  border-radius: 50%;
  background: var(--hc-case-riffle-page-bg);
  color: var(--hc-case-riffle-page-fg);
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.hc-case-riffle__step:active { filter: brightness(.9); }
.hc-case-riffle__step svg { width: 20px; height: 20px; fill: currentColor; }
.hc-case-riffle__step:first-child svg { transform: rotate(180deg); }
.hc-case-riffle__controls { display: none; }

@media (width > 1000px) {
  .hc-case-riffle__title { font-size: 28px; line-height: 36px; }
  .hc-case-riffle--wide { container-type: inline-size; }
  .hc-case-riffle--wide .hc-case-riffle__layout {
    /* Resolve the section width before the grid becomes the nearest size container. */
    --hc-case-riffle-section-width: 100cqw;
    --hc-case-riffle-breakout: calc((var(--hc-case-riffle-section-width) - 100cqw) / 2);
    container-type: inline-size;
  }
  /* Give the copy the space freed by moving the animation to the edge. */
  .hc-case-riffle--wide .hc-case-riffle__copy {
    margin-inline-end: calc(-1 * var(--hc-case-riffle-breakout));
  }
  .hc-case-riffle--wide .hc-case-riffle__description { max-width: 64ch; }
  .hc-case-riffle--wide .hc-case-riffle__visual {
    translate: var(--hc-case-riffle-breakout) 0;
  }
  /* Use part of the SVG's outer padding while keeping the full card motion in view. */
  .hc-case-riffle--wide .hc-case-riffle__stage > svg { translate: 1.5% 0; }
  .hc-case-riffle--wide .hc-case-riffle__stage:focus-visible::after { inset-inline-end: 7px; }
  .hc-case-riffle--wide .hc-case-riffle__controls:not([hidden]) { inset-inline-end: 10px; }
}

@media (max-width: 1180px) {
  .hc-case-riffle__layout { gap: 26px; }
}
@media (max-width: 1000px) {
  .hc-case-riffle__layout { grid-template-areas: "visual" "copy"; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .hc-case-riffle__copy,
  .hc-case-riffle__visual { width: 100%; max-width: 740px; margin: 0 auto; }
  .hc-case-riffle--framed .hc-case-riffle__layout { border-radius: 40px; }
  .hc-case-riffle--framed .hc-case-riffle__copy { padding: 0 8px 12px; }
}
@media (max-width: 850px), (hover: none), (pointer: coarse) {
  .hc-case-riffle__controls:not([hidden]) {
    position: absolute;
    z-index: 1;
    inset-inline: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
  }
}
@media (max-width: 430px) {
  .hc-case-riffle__title { font-size: 20px; line-height: 28px; }
  .hc-case-riffle__details { gap: 10px; }
  .hc-case-riffle__tags { gap: 6px; }
  .hc-case-riffle__tags span { gap: 5px; padding: 5px 7px; font-size: 12px; }
}
@media (max-width: 350px) {
  .hc-case-riffle__cta { padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hc-case-riffle *, .hc-case-riffle *::before, .hc-case-riffle *::after { transition: none !important; }
}