/* Approved CASES cards · 2026-10-15. Opt in with .fill-cases--story.
   Keeps the reviewed bright photos, local feathered title scrim, compact
   bottom copy and text-arrow links. Reuses shared native-pixel Content
   Card geometry and type tokens. Case-center and detail pages do not opt in.
   2026-10-23: available destinations use one native link across the card;
   image feedback matches the approved case-center scale and motion tokens. */
html body.wy-responsive #cases.fill-cases--story .fill-case {
  display: grid;
}

html body.wy-responsive #cases.fill-cases--story .fill-case__link {
  display: grid;
  min-width: 0;
  min-height: 0;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}

html body.wy-responsive #cases.fill-cases--story .fill-case__link:focus-visible {
  outline: 2px solid var(--wy-g0);
  outline-offset: -4px;
}

html body.wy-responsive #cases.fill-cases--story .fill-case__scene {
  opacity: 1;
  transform: none;
  transition: transform var(--wy-dur) var(--wy-ease);
}

html body.wy-responsive #cases.fill-cases--story .fill-case__content {
  display: grid;
  grid-template-rows: 1fr 1fr;
  align-items: stretch;
  gap: 0;
  padding-block-end: var(--wy-s4);
}

html body.wy-responsive #cases.fill-cases--story .fill-case__logo {
  align-self: start;
}

html body.wy-responsive #cases.fill-cases--story .fill-case__details {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  justify-content: flex-end;
  min-width: 0;
  padding-block-start: var(--wy-s5);
  gap: var(--wy-s4);
}

/* Barely visible scrim, limited to the text/button region. Its 24px feather
   ends at the beginning of the title; the photo keeps its original brightness. */
html body.wy-responsive #cases.fill-cases--story .fill-case__details::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--wy-s5)) calc(-1 * var(--wy-s5)) calc(-1 * var(--wy-s4));
  background: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .04) var(--wy-s5), rgba(0, 0, 0, .08) 100%);
  pointer-events: none;
}

html body.wy-responsive #cases.fill-cases--story .fill-case__story {
  margin-block-start: 0;
  gap: var(--wy-s3);
}

/* Strengthen title contrast locally. The ellipse's explicit 50% vertical
   radius reaches full transparency at the box's top/bottom, so clipping
   cannot create a horizontal seam. Use a longer, eased feather. */
html body.wy-responsive #cases.fill-cases--story .fill-case__title {
  position: relative;
  isolation: isolate;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .28);
}

html body.wy-responsive #cases.fill-cases--story .fill-case__title::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--wy-s8)) calc(-1 * var(--wy-s5));
  background: radial-gradient(ellipse 90% 50% at 20% 50%, rgba(0, 0, 0, .52) 0%, rgba(0, 0, 0, .5) 20%, rgba(0, 0, 0, .4) 40%, rgba(0, 0, 0, .24) 60%, rgba(0, 0, 0, .1) 75%, rgba(0, 0, 0, .02) 90%, transparent 100%);
  pointer-events: none;
}

html body.wy-responsive #cases.fill-cases--story .fill-case__more {
  align-self: flex-start;
  justify-content: flex-start;
  gap: var(--wy-s3);
  border: 0;
  border-radius: 0;
  padding: 10px 0;
  background: transparent;
  text-decoration: none;
}

html body.wy-responsive #cases.fill-cases--story .fill-case__more:hover {
  background: transparent;
}

/* Reuse the site's existing > to arrow animation and reduced-motion guard. */
html body.wy-responsive #cases.fill-cases--story .fill-case__more .wy-harr-host {
  margin: 0 !important;
}

html body.wy-responsive #cases.fill-cases--story .fill-case__link:focus-visible .wy-harr .l {
  opacity: 1;
  transform: scaleX(1);
}

html body.wy-responsive #cases.fill-cases--story .fill-case__link:focus-visible .wy-harr .t {
  transform: translateX(6px);
}

/* Whole-card feedback: only the photo scales, leaving the logo, text and
   reading position stable. Retargetable CSS reverses from the current frame. */
html body.wy-responsive #cases.fill-cases--story .fill-case .wy-harr .l {
  opacity: 0;
  transform: scaleX(.4);
}
html body.wy-responsive #cases.fill-cases--story .fill-case .wy-harr .t {
  transform: none;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html body.wy-responsive #cases.fill-cases--story .fill-case:hover .fill-case__scene {
    transform: scale(1.05);
  }

  html body.wy-responsive #cases.fill-cases--story .fill-case:hover .fill-case__more .wy-harr .l {
    opacity: 1;
    transform: scaleX(1);
  }

  html body.wy-responsive #cases.fill-cases--story .fill-case:hover .fill-case__more .wy-harr .t {
    transform: translateX(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.wy-responsive #cases.fill-cases--story .fill-case__scene {
    transition: none;
  }
}

/* Existing white website screenshots need more local contrast than photos.
   Preserve their original upper image and use the original dark wordmark.
   The copy-only scrim fades from transparent at its upper boundary. */
html body.wy-responsive #cases.fill-cases--story .fill-case--light-scene .fill-case__details::before {
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .05) 10%, rgba(0, 0, 0, .16) 25%, rgba(0, 0, 0, .46) 42%, rgba(0, 0, 0, .64) 60%, rgba(0, 0, 0, .7) 85%, rgba(0, 0, 0, .72) 100%);
}

html body.wy-responsive #cases.fill-cases--story .fill-case--light-scene .fill-case__brand-text {
  color: var(--wy-ink);
}

html body.wy-responsive #cases.fill-cases--story .fill-case--light-scene .fill-case__brand {
  filter: none;
  mix-blend-mode: normal;
}

/* Preserve transparent logo artwork and its approved dimensions while
   making every visible brand color pure white on photographic scenes. */
html body.wy-responsive #cases.fill-cases--story .fill-case__brand.fill-case__brand--white {
  filter: brightness(0) invert(1);
  mix-blend-mode: normal;
}

/* 2026-10-29 supplied bright appliance photo: keep the reviewed white copy
   readable with local feathers behind its brand and lower text only. */
html body.wy-responsive[data-responsive-page="solution-global-ops"] #cases.fill-cases--story .fill-case--anonymous-2 .fill-case__logo {
  position: relative;
  isolation: isolate;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .28);
}
html body.wy-responsive[data-responsive-page="solution-global-ops"] #cases.fill-cases--story .fill-case--anonymous-2 .fill-case__logo::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--wy-s5)) calc(-1 * var(--wy-s5)) calc(-2 * var(--wy-s5));
  background: radial-gradient(ellipse 100% 100% at 15% 0%, rgba(0, 0, 0, .64), rgba(0, 0, 0, .4) 45%, transparent 100%);
  pointer-events: none;
}
html body.wy-responsive[data-responsive-page="solution-global-ops"] #cases.fill-cases--story .fill-case--anonymous-2 .fill-case__details::before {
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .2) 25%, rgba(0, 0, 0, .5) 60%, rgba(0, 0, 0, .62) 100%);
}