/* Isolated phone finishes. Desktop/tablet and geometry remain shared. */
@media (max-width: 600px) {
  html:is(#hero-directions,[data-proo-home-release])[data-hero-finish] .proo-static-hero__card { --finish-outer: #131314; }
  html:is(#hero-directions,[data-proo-home-release])[data-cinema-demo][data-hero-finish] .proo-static-hero__cards > .proo-static-hero__slide > .proo-static-hero__card::before {
    background: var(--finish-outer) !important;
  }
  html:is(#hero-directions,[data-proo-home-release])[data-cinema-demo][data-artwork-layout="nested"][data-hero-finish="rounded"] :is(.proo-static-hero__card--software, .proo-static-hero__card--formation) {
    --finish-outer: #242426; --nested-artwork-bg: #242426;
  }
  html:is(#hero-directions,[data-proo-home-release])[data-cinema-demo][data-artwork-layout="nested"][data-hero-theme="dark"][data-hero-finish="rounded"] :is(.proo-static-hero__card--software, .proo-static-hero__card--formation) {
    --finish-outer: #131314; --nested-artwork-bg: #131314;
  }
  html:is(#hero-directions,[data-proo-home-release])[data-cinema-demo][data-hero-finish="rounded"] .proo-static-hero__cards > .proo-static-hero__slide > .proo-static-hero__card::before { border-radius: 7px !important; }
  html:is(#hero-directions,[data-proo-home-release])[data-cinema-demo][data-artwork-layout="nested"][data-hero-finish="reversed"] .proo-static-hero__card {
    --finish-outer: #242426; --nested-artwork-bg: #131314;
  }
  html:is(#hero-directions,[data-proo-home-release])[data-cinema-demo][data-hero-finish="reversed"] .proo-static-hero__cards > .proo-static-hero__slide > .proo-static-hero__card::before { border-radius: 0 !important; }
  html:is(#hero-directions,[data-proo-home-release])[data-cinema-demo][data-artwork-layout="nested"][data-hero-theme="dark"][data-hero-finish="reversed"] :is(.proo-static-hero__card--software, .proo-static-hero__card--formation) { --nested-artwork-bg: #131314; }
  html:is(#hero-directions,[data-proo-home-release])[data-cinema-demo][data-artwork-layout="nested"][data-hero-theme="light"][data-hero-finish="reversed"] .proo-static-hero__card {
    --finish-outer: #131314; --nested-artwork-bg: #242426;
  }
  /* Screenshot finish: 2px outside frame, 10px outer / 8px inner corners. */
  html:is(#hero-directions,[data-proo-home-release])[data-cinema-demo][data-hero-finish="framed"] .proo-static-hero { --inset-artwork-side: 2px; }
  html:is(#hero-directions,[data-proo-home-release])[data-cinema-demo][data-hero-finish="transparent"] .proo-static-hero {
    --inset-artwork-side: 1px; --finish-radius: 11px;
  }
  html:is(#hero-directions,[data-proo-home-release])[data-cinema-demo][data-artwork-layout="nested"]:is([data-hero-finish="framed"], [data-hero-finish="transparent"]) .proo-static-hero__card {
    --inset-artwork-radius: var(--finish-radius, 10px);
    --nested-artwork-radius: calc(var(--inset-artwork-radius) - 2px);
  }
  html:is(#hero-directions,[data-proo-home-release])[data-cinema-demo]:is([data-hero-finish="framed"], [data-hero-finish="transparent"]) .proo-static-hero__cards > .proo-static-hero__slide > .proo-static-hero__card::before { border-radius: var(--inset-artwork-radius) !important; }
  html:is(#hero-directions,[data-proo-home-release])[data-cinema-demo][data-hero-finish="framed"] .proo-static-hero__cards > .proo-static-hero__slide > .proo-static-hero__card::before { bottom: 2px !important; }
  html:is(#hero-directions,[data-proo-home-release])[data-cinema-demo][data-artwork-layout="nested"][data-hero-theme="dark"][data-hero-finish="framed"] :is(.proo-static-hero__card--software, .proo-static-hero__card--formation) { --nested-artwork-bg: #131314; }
  html:is(#hero-directions,[data-proo-home-release])[data-cinema-demo][data-hero-finish="transparent"] .proo-static-hero__card { --finish-outer: transparent; }
  html:is(#hero-directions,[data-proo-home-release])[data-cinema-demo][data-artwork-layout="nested"][data-hero-theme="light"][data-hero-finish="transparent"] .proo-static-hero__card {
    --inset-footer-ink: #151516; --inset-footer-circle-ink: #f7f7f5;
  }
}
/* Approved transparent hero: fill the existing ink from left to right.
   Two paint-only masks retain a faint complete label behind the moving fill.
   No split text, extra DOM, layout changes, scroll listeners or JS timers. */
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  html:is(#hero-directions,[data-proo-home-release])[data-cinema-demo][data-hero-finish="transparent"] .is-open-fade-current .proo-card-label-ink {
    opacity: 1 !important;
    mask-image: linear-gradient(#000, #000), linear-gradient(rgb(0 0 0 / .22), rgb(0 0 0 / .22));
    mask-repeat: no-repeat;
    mask-position: left center;
    animation: cinema-caption-fill 950ms ease-in-out 200ms both !important;
  }
  @keyframes cinema-caption-fill {
    from { mask-size: 0% 100%, 100% 100%; }
    to { mask-size: 100% 100%, 100% 100%; }
  }
}